Ajax总结

前言

概念：
async JavaScript and xml：异步的js和xml，async就是异步的意思，JavaScript就是js编程语言，xml是可扩展标记语言，主要用于传输数据

-为什么要使用Ajax呢？

在没有Ajax之前的页面中的数据要实现更新，必须要把整个页面全部进行刷新，这样的效果导致了用户体验非常不好，比如：要填写一个信息表单，以实现一部分数据的刷新改变，但在提交后，整个页面都重新刷新加载，大大提高了网络成本和等待时间

优点：
无需刷新整个页面来更新提交数据，只需要刷新局部页面就可以实现更新数据，用户体验更好

缺点：
对网络的SEO（网络优化）支持不友好

工作原理：
Ajax的工作原理主要是利用js的一个内置对象XMLHttpRequest，来实现对服务器端发起异步请求, 并接收响应回来的数据

二、使用步骤

Ajax发送get请求

代码如下（示例）：

	1.通过XMLHttpRquest构造函数创建实例对象
	//这个实例对象负责发起请求，并接收数据
	let xhr = new XMLHttpRquest()
	
	2.通过xhr实例对象来配置请求方式和请求地址
	//请求地址是后端提供的
	//请求方式有get和post，这里使用get请求
	xhr.open("get","请求地址?键=键值&键=键值")
	
	3.发送请求
	xhr.send()
	
	4.监听请求状态
	//使用onreadystatechange事件
	xhr.onreadystatechange = function(){
		//请求的状态码如果等于4，并且http状态码等于200
		if(xhr.readyState == 4 && xhr.status == 200){
			//数据响应成功，接收数据
			let res = xhr.responseText
		}
	}

为了更好的理解ajax，使用Ajax发送get请求，在发送请求时要提前准备好一个接口地址

• Ajax发送post请求

	1.通过XMLHttpRquest构造函数创建实例对象
	//通过这个实例对象来发送请求和接收数据
	let xhr = new XMLHttpRquest()
	
	2.通过xhr实例对象配置请求方式和请求地址
	xhr.open("post","请求地址")
	
	3.配置请求头
	/*post请求方式和get请求方式不同，
	post请求方式需要配置请求头,
	需要先调整发送给后端的参数的数据格式，
	以表单数据的格式来提交参数
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

	以JSON字符串的格式提交数据
xhr.setRequestHeader('Content-Type','application/json')
	*/
xhr.setRequestHeader('Content-Type','提交给后端的数据格式')
	
	4.发送请求
	//post请求方式具体数据是写在send中
	xhr.send("键名=键值&键名=键值")

	5.监听请求状态
	xhr.onreadystatechange = function(){
		//如果请求状态等于4，并且http状态码等于200
		if(xhr.readystate ==4 && xhr.status == 200){
			//数据响应成功
			let res = xhr.responseText
		}
	}
	

---

注意：
请求状态码和http网络传输协议状态码

上面的的例子中的xhr.readystate ==4 && xhr.status == 200，这句代码表示什么意思呢？
为什么请求状态等于4，并且http状态码等于200时，表示请求访问成功呢？
readyState：请求状态码
0：请求未初始化
1：请求已建立
2：请求已接收
3：请求处理中
4：请求已完成

可以看出readyState只有在等于4的时候，请求是已完成的状态，表示可以返回响应的数据

http网络传输协议状态码
200：请求成功
304：Not Modified：未修改，本次的请求的内容和上次一样，直接从浏览器缓存中拿出数据，不会再走服务器请求
400：Bad Request：错误请求，本次请求没有被服务器正确解析
401：Unauthorized ：未授权，没有权限访问该接口
403：Forbidden：拒绝访问，任何情况下都不可以访问该接口
404：Not Found：服务器地址，参数，请求方式错误的时候
5xx/6xx：服务器错误

可以看出status 只有在等于200的时候，请求是成功的状态，表示可以返回响应的数据
所以只有这两个条件都满足的时候就证明发送的请求成功了并且返回了响应的数据

GET请求和POST请求方式的区别（重点）
1. get请求不需要设置请求头，post请求必须要设置请求头
2. get请求的参数是拼接在请求地址后面的，以‘?’隔开，post请求的参数是写在send方法里面的
3. get请求只支持2kb的参数，post请求没有限制(可以通过服务器端限制)
4. post请求参数的安全性相对于get请求更高一些