从0到1学AJAX，这篇就够了！（进阶三）

什么是ajax？

AJAX 就是浏览器提供的一套 API，能够经过 JavaScript 调用，从而实现经过代码控制请求与响应。实现
网络编程

一、使用 AJAX 的过程能够类比日常咱们访问网页过程

// 1. 建立一个 XMLHttpRequest 类型的对象 —— 至关于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 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)
}
}

---

二、readyState

因为 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在获得响应时），也就意味着这个事件会被
触发屡次，因此咱们有必要了解每个状态值表明的含义：

时间轴：

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 形式，了解便可不用了
}
}

---

四、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 。

---

七、响应数据格式

提问：若是但愿服务端返回一个复杂数据，该如何处理？
关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 JavaScript 解析。

---

XML

一种数据描述手段，基本如今的项目不用了，淘汰的缘由：数据冗余太多。

JSON

也是一种数据描述手段，相似于 JavaScript 字面量方式
服务端采用 JSON 格式返回数据，客户端按照 JSON 格式解析数据。
不论是 JSON 也好，仍是 XML，只是在 AJAX 请求过程当中用到，并不表明它们之间有必然的联系，它们只是
数据协议罢了

兼容方案

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

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

---

八、封装

AJAX 请求封装

函数就能够理解为一个想要作的事情，函数体中约定了这件事情作的过程，直到调用时才开始工做。
将函数做为参数传递就像是将一个事情交给别人，这就是委托的概念

/**
* 发送一个 AJAX 请求
* @param {String} method 请求方法
* @param {String} url 请求地址
* @param {Object} params 请求参数
* @param {Function} done 请求完成事后须要作的事情（委托/回调）
*/
function ajax (method, url, params, done) {
// 统一转换为大写便于后续判断
method = method.toUpperCase()
// 对象形式的参数转换为 urlencoded 格式
var pairs = []
for (var key in params) {
pairs.push(key + '=' + params[key])
}
var querystring = pairs.join('&')
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
ActiveXObject('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 请求就设置请求体
var data = null
if (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)
})

---

九、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：请求方法，默认为 get
dataType：服务端响应数据类型
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：请求完成触发（无论成功与否）

十、跨域

相关概念
同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口彻底相同，只有同源的地址才能够相互经过
AJAX 的方式请求。
同源或者不一样源说的是两个地址之间的关系，不一样源地址之间请求咱们称之为跨域请求
什么是同源？例如：http://www.example.com/detail... 与一下地址对比

JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一
段带有函数调用的 JavaScript 全局函数调用的脚本，将本来须要返回给客户端的数据传递进去。
之后绝大多数状况都是采用 JSONP 的手段完成不一样源地址之间的跨域请求

<script src="http://api.zce.me/users.php?callback=foo"></script>
foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])

总结一下：因为 XMLHttpRequest 没法发送不一样源地址之间的跨域请求，因此咱们必需要另寻他法，script 这种方案就是咱们最终选择的方式，咱们把这种方式称之为 JSONP，若是你不了解原理，先记住怎么用，多用一段时间再来看原理。