再见了ajax

一、AJAX
1.定义： AJAX本质是浏览器提供的一套API，可以通过JavaScript调用，实现对服务器发出请求和接收服务端返回的响应，AJAX在客户端拿取的不是HTML页面，而是页面中的字符串，以json格式表现数据。应用场景：到服务端去拿数据；页面的局部刷新。
2.遵循HTTP:本质上XMLHttpRequest就是JavaScript在web平台发送HTTP请求的手段，这个HTTP请求符合HTTP约定的格式：

//设置请求报文的请求行
xhr.open('GET','./aaa.php')
//设置请求头
xhr.setRequestHeader('accept','text/plain')
//设置请求体
xhr.send(null)

xhr.onreadystatechange = function(){
	if(this.readystate === 4){
		//获取状态响应码
		console.log(this.status)
		//指定响应头
		console.log(this.getResponseHeader('Content-type'))
		//全部响应头
		console.log(this.getAllResponseHeader())
		//获取响应体
		console.log(this.responseText)
}
}在这里插入代码片

有关readyState状态码
0 代理被创建，但未调用open（）方法
1 open(）方法被调用，建立了连接
2 已经获取状态行和响应头
3 响应体下载中
4 响应体下载完成，可以直接使用responseText

3.get请求和post请求区别

var xhr = new XMLHttpRequest()
 // GET 请求传递参数通常使用的是问号传参
 // 这里可以在请求地址后面加上参数，从而传递数据到服务端
 xhr.open('GET', './delete.php?id=1')
 // 一般在 GET 请求时无需设置响应体，可以传 null 或者不传
 xhr.send(null)xhr.onreadystatechange = function () { 
 	 if (this.readyState === 4) {   
 	 	 console.log(this.responseText) 
 	 }
  } 
 

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () { 
	 if (this.readyState === 4) {  
	 	  console.log(this.responseText)  
    }
 }   

二、ajax在jQuery中的应用
在jQuery中的封装：

$.ajax({ 
	 url: './get.php',  
	 type: 'get',  
	 dataType: 'json',  
	 data: { id: 1 },  
	 beforeSend: function (xhr) {    
	 	console.log('before send')  },  
	 success: function (data) {    
	 	console.log(data)  },  
	 error: function (err) {    
	 	console.log(err)  },  
	 complete: function () {    
	 	console.log('request completed')  
	 }
}）