前端开发进阶之——Ajax详解，一看就懂，一学就会！

什么是ajax？

AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现

网络编程

1、使用 AJAX 的过程可以类比平常我们访问网页过程

// 1\. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器varxhr =newXMLHttpRequest()// 2\. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址xhr.open('GET','./time.php')// 3\. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求xhr.send(null)// 4\. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作xhr.onreadystatechange =function(){// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成if(this.readyState ===4) {// 通过 xhr 的 responseText 获取到响应的响应体console.log(this)}}

哦对了，我这里有一套Web前端从入门到精通的全套资料，价值4980元，现免费送给大家，但是要加我的Web前端学习Q群：983840410才可以免费领取，因为我在里面会私发给大家，欢迎你前来领取

2、readyState

由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被

触发多次，所以我们有必要了解每一个状态值代表的含义：

[图片上传失败...(image-62c2e1-1558359068841)]

时间轴：

[图片上传失败...(image-6e1d8d-1558359068841)]

varxhr =newXMLHttpRequest()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) {case2:// => 2// 已经接受到了响应报文的响应头// 可以拿到头// console.log(this.getAllResponseHeaders())console.log(this.getResponseHeader('server'))// 但是还没有拿到体console.log(this.responseText)breakcase3:// => 3// 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整// 在这里处理响应体不保险（不可靠）console.log(this.responseText)breakcase4:// => 4// 一切 OK （整个响应报文已经完整下载下来了）// 这里处理响应体console.log(this.responseText)break}})

通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

xhr.onreadystatechange =function(){if(this.readyState ===4) {// 后续逻辑......}}

3、遵循 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 形式，了解即可不用了}}

4、GET 请求

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

varxhr =newXMLHttpRequest()// 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 一般都是业务数据

5、POST 请求

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

varxhr =newXMLHttpRequest()// open 方法的第一个参数的作用就是设置请求的 methodxhr.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=value2xhr.send('key1=value1&key2=value2')xhr.onreadystatechange =function(){if(this.readyState ===4) {console.log(this.responseText)}}

6、同步与异步

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

待

异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认

为 true ，如果需要同步执行可以通过传递 false 实现：

console.log('before ajax')varxhr =newXMLHttpRequest()// 默认第三个参数为 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')varxhr =newXMLHttpRequest()// 同步方式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 。

7、响应数据格式

提问：如果希望服务端返回一个复杂数据，该如何处理？

关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 JavaScript 解析。

XML

一种数据描述手段，基本现在的项目不用了，淘汰的原因：数据冗余太多。

JSON

也是一种数据描述手段，类似于 JavaScript 字面量方式

服务端采用 JSON 格式返回数据，客户端按照 JSON 格式解析数据。

不管是 JSON 也好，还是 XML，只是在 AJAX 请求过程中用到，并不代表它们之间有必然的联系，它们只是

数据协议罢了

兼容方案

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

varxhr =window.XMLHttpRequest ?newXMLHttpRequest() :newActiveXObject('Microsoft.XMLHTTP')

8、封装

AJAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。

将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

/**

* 发送一个 AJAX 请求

* @param {String} method 请求方法

* @param {String} url 请求地址

* @param {Object} params 请求参数

* @param {Function} done 请求完成过后需要做的事情（委托/回调）

*/functionajax(method, url, params, done){// 统一转换为大写便于后续判断method = method.toUpperCase()// 对象形式的参数转换为 urlencoded 格式varpairs = []for(varkeyinparams) {pairs.push(key +'='+ params[key])}varquerystring = pairs.join('&')varxhr =window.XMLHttpRequest ?newXMLHttpRequest() :newActiveXObject('Microsoft.XMLHTTP')xhr.addEventListener('readystatechange',function(){if(this.readyState !==4)return// 尝试通过 JSON 格式解析响应体try{done(JSON.parse(this.responseText))}catch(e) {done(this.responseText)}})// 如果是 GET 请求就设置 URL 地址 问号参数if(method ==='GET') {url +='?'+ querystring}xhr.open(method, url)// 如果是 POST 请求就设置请求体vardata =nullif(method ==='POST') {xhr.setRequestHeader('Content‐Type','application/x‐www‐form‐urlencoded')data = querystring}xhr.send(data)}ajax('get','./get.php', {id:123},function(data){console.log(data)})ajax('post','./post.php', {foo:'posted data'},function(data){console.log(data)})

9、jQuery 中的 AJAX

$.ajax

$.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')}})

常用选项参数介绍：

url：请求地址type：请求方法，默认为getdataType：服务端响应数据类型ajax('get','./get.php', { id:123},function(data){console.log(data)})ajax('post','./post.php', { foo:'posted data'},function(data){console.log(data)})$.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')}})

常用选项参数介绍：

url：请求地址

type：请求方法，默认为 get

dataType：服务端响应数据类型

contentType：请求体内容类型，默认 application/x-www-form-urlencoded

data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递

timeout：请求超时时间

beforeSend：请求发起之前触发

success：请求成功之后触发（响应状态码 200）

error：请求失败触发

complete：请求完成触发（不管成功与否）

10、跨域

相关概念

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过

AJAX 的方式请求。

同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求

什么是同源？例如： http://www.example.com/detail... 与一下地址对比

JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。

其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一

段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求

foo(['我','是','你','原','本','需','要','的','数','据'])

总结一下：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方

案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再