Ajax

什么是Ajax

Ajax 是一种在 XML、HTML、CSS 和 JavaScript 的帮助下创建更好、更快和更具交互式 Web 应用程序的新技术。 Ajax 是一种独立于 Web 服务器软件的 Web 浏览器技术。用户可以继续使用该应用程序，而客户端程序在后台向服务器请求信息。

简单的来说

Ajax 的全称就是 Asynchronous JavaScript + XML。
异步传输 + js + xml
Ajax 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程。

所谓异步，就是通常指我们浏览网页时，向服务器发送请求的时候，浏览器进行局部刷新，我们无需等待。让用户体验更好。

Ajax 的原理

Ajax的原理就是通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获取数据，然后用 JavaScript 来操作 DOM 而更新页面。

创建Ajax的详细过程

---

//step1.创建 XMLHttpRequest 对象，也就是创建一个异步调用对象；

//step2.创建一个新的 HTTP 请求，并指定改 HTTP 请求的方法、URL以及验证信息；

//step3.设置响应 HTTP 状态变化的函数；

//step4.发送 HTTP 请求；

//step5.获取异步调用返回的数据；

//step6.使用 JavaScript 和 DOM 实现局部刷新；


/* 示例 */
// 1. 创建一个 XMLHttpRequest 类型的对象，相当于打开了一个浏览器
var xhr = new SMLHttpRequest()

// 2. 打开与一个网站之间的连接--相当于在地址栏输入访问地址
xhr.open('GET', './time.php')

// 3.通过连接发送一次请i去--相当于回车或者点击访问发送请求
xhr.send(null)

// 4.指定 xhr 状态变化事件处理函数 -- 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
	// 通过 xhr 的 readState 判断此次请求的响应是否接受完成
	if (this.readyState === 4){
		// 通过 xhr 的 responseText 获取响应的响应体	
		console.log(this)
	}
}

---

readyState

readystatechange 事件是在 xhr 对象状态变化时触发（不是得到响应时），也意味着整个事件会多次触发。

readyState	状态描述	说明
0	UNSENT	代理（XHR）被创建，但尚未调用 open() 方法
1	OPENED	open()方法已经被调用，建立了连接
2	HEADERS_RECEIVED	send() 方法已经被调用，并且已经可以获取状态行和响应头
3	LOADING	响应题下载中， responseText 属性可能已经包含部分数据
4	DONE	响应体下载完成，可以直接使用 responseText。

时间轴

var xhr = new XMLHttpRequest() 
console.log(xhr.readyState) 
// => 0 
// 初始化 请求代理对象   
xhr.open('GET', 'time.php') 
console.log(xhr.readyState) 
// => 1 
// open 方法已经调用，建立一个与服务端特定端口的连接   
xhr.send()   
xhr.addEventListener('readystatechange', function () {  
		 switch (this.readyState) {     
        	case 2:       
        	// => 2    
            // 已经接受到了响应报文的响应头         

			// 可以拿到头       
			// console.log(this.getAllResponseHeaders()) 
				console.log(this.getResponseHeader('server'))       
			// 但是还没有拿到体       
				console.log(this.responseText)       
				break  
				     
			case 3:       
			// => 3       
			// 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整         
			// 在这里处理响应体不保险（不可靠）       
				console.log(this.responseText)       
				break   
				    
			case 4:       
			// => 4       
			// 一切 OK （整个响应报文已经完整下载下来了）         
			// 这里处理响应体       
				console.log(this.responseText)       
				break   
		} 
})

// 通过状态值的含义得出结论：一般我们都是在 `readyState` 值为 `4` 时，执行响应的后续逻辑。
xhr.onreadystatechange = function () {   
	if (this.readyState === 4) {     
		// 后续逻辑......   
	} 
}

遵循HTTP

本质上 XMLHttpRequest就是 JavaScript 在 Web平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然时 HTTP 请求，同样符合 HTTP 约定的格式：

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

xhr.onreadystatechange = function () {   
	if (this.readyState === 4) {     
		// 获取响应状态码     
		console.log(this.status)     
		// 获取响应状态描述     
		console.log(this.statusText)     
		// 获取响应头信息     
		console.log(this.getResponseHeader('Content‐Type')) 
		// 指定响应头     
		console.log(this.getAllResponseHeader()) 
		// 全部响应头     
		// 获取响应体     
		console.log(this.responseText) 
		// 文本形式     
		console.log(this.responseXML) 
		// XML 形式，了解即可不用了   
	} 
}

参考链接：

• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

具体用法

GET请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递

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)   
	} 
}   
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

POST请求

POST 请求过程中，都是采用请求体承载需要提交的数据

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)   
	} 
}

同步与异步

同步：一个在同一时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等待
异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待。

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求时否采用异步方式执行，默认为 true ，如果需要同步执行可以通过传递 false 实现：

console.log('before ajax') 

var xhr = new XMLHttpRequest() 

// 默认第三个参数为 true 意味着采用异步方式执行 
xhr.open('GET', './time.php', true) 

xhr.send(null) 

xhr.onreadystatechange = function () {   
	if (this.readyState === 4) {     
	// 这里的代码最后执行     
	console.log('request done')   
	} 
} 
console.log('after ajax')

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步

console.log('before ajax') 

var xhr = new XMLHttpRequest() 

// 同步方式 
xhr.open('GET', './time.php', false) 

// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发 
xhr.onreadystatechange = function () {   
	if (this.readyState === 4) {     
		// 这里的代码最后执行     
		console.log('request done')   
	} 
} 
xhr.send(null) 
console.log('after ajax')

演示同步异步差异。
一定在发送请求 send() 之前注册 readystatechange (不管同步或者异步)

• 为了这个事件可以更加可靠（一定触发），一定是先注册
  了解同步模式即可，切记不要使用同步模式。
  至此，我们已经大致了解了 AJAX 的基本API

JSON

现在采用最多的传输格式

处理响应数据渲染

模板引擎：

• art-Template：https://aui.github.io/art-template/

兼容方案

XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')