Ajax发送请求

Ajax

Ajax不是一个新技术，而是多种技术的集合

Ajax： Asynchronous Javascript And Xml
全称：异步的JavaScript和XML数据交互技术
注：原始的Ajax技术中使用XML标记语言完成数据交互，但是标记语言中包含了大量的无效数据（标签），所以后来使用JSON数据代替XML进行数据传递

Ajax技术的核心

异步JavaScript对象：XMLHttpRequest
数据交互实体：JSON对象

Ajax技术的实现

1.JavaScript Ajax
2.jQuery Ajax：底层封装JavaScript Ajax，实现了简洁的调用
3.axios：底层通过Promise封装JavaScript Ajax，实现了简洁同步调用

Ajax实现

创建后端服务应用(略)

前后端分离模式下，后端路由接收到请求，完成是数据处理后只响应数据，不再提供视图页面
创建一个index.html页面，通过ajax技术获取数据

<button>点击获取数据</button>
<script>
	let btn = document.querySelector('button')
	btn.onclick = function(){
		//创建JS异步对象
		let xhr = new XMLHttpRequest()
		//请求方式，请求地址
		xhr.open('get','http://localhost:3000/users')
		//发送请求
		xhr.send()
		//解析并渲染数据
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status ==200) {
					//获得数据，DOM渲染
					let jsonObj = JSON.parse(xhr.responseText)
					console.log(jsonObj)
			}
		}
	}
</script>

注：服务器上默认同源策略限制，不允许不同服务器的请求访问数据
改造后端数据，添加同源策略配置，允许不同服务器获取数据

router.get('/user',async (req,res)=>{
	res.header('Access-Control-Allo-Origin','*')
	...
})

jQuery中的Ajax

1.$.get(url.[data],[callback],[type])

$.get()发送一个get请求方式的ajax请求
url:必选参数，请求地址
data：可选参数，请求中附带的参数
callback: 可选参数，回调函数，请求成功后的处理函数
type：可选参数，返回数据的类型

2.$.post(url.[data],[callback],[type])

$.post()发送一个post请求方式的ajax请求
url:必选参数，请求地址
data：可选参数，请求中附带的参数
callback: 可选参数，回调函数，请求成功后的处理函数
type：可选参数，返回数据的类型

3.$.ajax(url,[settings])

$.ajax()表示发送一个ajax请求
settings：请求中的配置项，如请求方式、请求参数、处理函数等

$(function(){
	$.get('http://localhost:3000/user',dat=>{
		console.log(dat)
	})
})

$(function() {
    // 2、使用$.ajax()获取数据
    $.ajax({
        url: "http://localhost:3000/user",
        type: "GET",
        success: function(data) {
            initArticle(data)
        },
        error: function() {
            console.log("请求发送失败")
        }
    })
})

跨域请求

1.什么是跨域
通常一个完整的网络请求，即URL地址，包含如下几个部分

http://www.example.com:80/index.html?name=zhangsan
http: 访问协议
www.exampe.com： 域名
：80 端口
/index.html 资源路径
?name=zhangsan : get参数

发起请求的HTML，工作的服务器和接收请求的后端项目，工作的服务器操作的协议、域名、端口其中有一项不同则称为跨域请求

2.什么是同源策略
由于数据安全问题，任何服务器默认情况下都是不允许、不支持跨域访问的，这种限制同源访问数据的策略称为同源策略

同源策略：
请求的一方，被请求的一方，必须在同源模式（域名、端口、协议）下才能完成数据访问
不同域名、不同协议、不同端口的情况下，默认不允许完成数据请求

3.数据共享需求
尽管服务器通过同源策略，默认禁止跨域访问数据的情况
但是很多时候网络上的某些数据，有共享的需求，这样的情况下需要包含数据的服务器支持数据访问，完成数据共享操作

4.跨域访问的实现

Jsonp跨域，核心