Ajax

JavaScript

XMLHttpRequest 对象

用法

open()方法启动一个 http 请求，它接收三个参数，要发送的请求类型、请求的 URL 和表示是否异步发送的布尔值。open() 方法仅仅是启动一个请求，并不会发送。请求的 URL 必须在同一个域中，否则会引发安全错误。

send()方法发送请求，它接收一个参数，即作为请求主体发送的数据，如果不需要发送数据，那么必须传入 null。同步的请求会阻塞 JavaScript 的执行，直到服务器响应请求之后。

abort()方法在接收到响应之前取消异步请求。

收到服务器的响应之后，响应的数据会填充为 XHR 对象的属性。

• responseText：作为响应主体被返回的文本。
• responseXML：如果响应的内容类型是 XML，那么这个属性中将保存包含着相应数据的 XML DOM 文档。
• status：响应的 HTTP 状态。
• statusText：HTTP 状态的说明。

XHR 对象的 readyState 属性表示请求/响应过程的当前活动阶段，这个属性可能是以下值。当这个状态改变时，会触发 XHR 对象的 readystatechange 事件。

• 0：未初始化
• 1：启动
• 2：发送
• 3：接收
• 4：完成

HTTP 状态

• 100-199 用于指定客户端应相应的某些动作。
• 200-299 用于表示请求成功。
• 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
• 400-499 用于指出客户端的错误。
• 500-599 用于支持服务器错误。

其中 304 表示请求的资源没有被修改，也可以认为请求成功了。

HTTP 头部信息

setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法必须在调用 open()方法之后，调用 send()方法之前调用。

默认情况下会发送下列头部信息

• Accept：浏览器能够处理的内容类型。
• Accept-Charset：浏览器能够显示的字符集。
• Accept-Encoding：浏览器能够处理的压缩编码。
• Accept-Language：浏览器当前设置的语言。
• Connection：浏览器与服务器之间的连接类型。
• Cookie：当前页面设置的任何 Cookie。
• Host：发出请求的页面所在域。
• Referer：发出请求的页面的 URI。
• User-Agent：浏览器的用户代理字符串。

XMLHttpRequest 2级

FormData

FormData 对象为序列化表单以及创建于表单格式相同的数据提供了便利。在创建 FormData 对象的时候可以直接传入一个表单元素。

append() 方法接收两个参数，键和值。

创建了 FormData 对象后，可以将它直接传给 send()方法。

超时设定

XHR 有 timeout 属性，表示请求在等待响应多少毫秒之后就终止，终止后会触发 timeout 事件。超时终止的时候 readyState 会改变为4，因此会触发 readystatechange 事件，但是超市终止之后再访问 status 属性就会导致错误。

overrideMimeType() 方法

overrideMimeType() 用于重写 XHR 响应的 MIME 类型，这个方法必须在 send() 方法调用之前调用。

进度事件

• loadstart：在接收到响应数据的第一个字节时触发。
• progress：在接收响应期间持续不断地触发。
• error：在请求发生错误时触发。
• abort：在因为调用 abort()方法而终止连接时触发。
• load：在接收到完整的响应数据时触发。
• loadend：在通信完成或者触发 error、abort 或 load 事件后触发。

progress 的事件对象包含三个额外的属性：lengthComputable、position 和 totalSize。其中 lengthComputable 是一个表示进度信息是否可用的布尔值，position 表示已经接收的字节数，totalSize 表示预期字节数。

跨域资源共享

为了实现跨域资源共享，可以在服务器端设置 Access-Control-Allow-Origin。然后在请求头中注明 Origin。

JSONP

• 能够直接访问响应文本，支持浏览器与服务器的双向通信
• 难以确定 JSONP 请求是否成功

JSON

语法

JSON 的语法可以表达一下三种类型的值

• 简单值：同 JavaScript，字符串、数值、布尔值和 null。不支持 undefined。
• 对象
• 数组

JSON 不支持变量、函数或对象实例。

简单值

对象

JSON 中表示对象的方式与 JavaScript 略有不同。
JavaScript：

var object = {
    name: "Nicholas",
    age: 29
}

JSON

{
    "name": "Nicholas",
    "age": 29
}

JSON 的属性名必须要加双引号，JSON 中没有分号。

数组

JSON 数组采用的是 JavaScript 中的数组字面量形式。

解析与序列化

JSON 对象

JSON 对象有两个方法：stringfy()和 prase()。这两个方法分别用于把 JavaScript 对象序列化为 JSON 字符串和把 JSON 字符串解析为原生 JavaScript 值。

var object = {
    name: "Nicholas",
    age: 29
}
var jsontext = JSON.stringfy(object)

在使用 stringfy()序列化 JavaScript 对象时默认不会包含空格字符和缩进。同时所有的函数以及原型都会被忽略，值为 undefined 的属性也会被跳过。

序列化选项

stringfy()方法还可以另外接受两个参数，第一个是过滤器，可以是一个数组，也可以是一个函数；第二个参数是一个选项表示是否在 JSON 字符串中保留缩进。

• 过滤结果
  如果过滤器参数是数组，那么输出的结果中将只包含数组中列出的属性。
  如果第二个参数是函数，那么会用函数对数据逐个处理。传入的函数接受两个参数，属性名和属性值，最后返回相应键的值，如果返回 undefined 相应的属性就会被跳过。

• 字符串缩进
  如果第三个参数是一个数值，那么它将表示每个级别缩进的空格数，同时属性间也会被自动插入换行符。
  如果第三个参数是一个字符串，那么这个字符串将被设置为缩进字符串。
  var jsontext = JSON.stringfy(object, null, "--")

• toJSON
  可以给对象添加 toJSON 方法来自定义序列化。当对象中存在 toJSON()方法时，将其传入 stringfy 方法将会自动调用 toJSON 方法。

var object = {
    name: "Nicholas",
    age: 29,
    toJSON: function(){
        return this.tittle;
    }
};
var jsontext = JSON.stringfy(object);

• 解析选项
  JSON.prase()方法也可以接受另一个参数，该参数是一个还原函数，这个函数也将对每个键值对上调用。还原函数与过滤函数类似，如果还原函数返回 undefined，则表示要从结果中删除相应的值。