Ajax学习笔记

coderfee/Apr 08, 2016/#JavaScript#

Step1—创建实例化对象

由于各浏览器间的差异，创建实例的方法也不同，下面的代码创建了一个跨浏览器的类实例。

var xhr
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest() // sarifi/firefox/chrome/IE7+
} else {
  xhr = new ActiveXObject('Microsoft.HTTPXML') // IE5/6
}

如果不考虑 IE5/6，其实只需下面的代码：

var xhr = new XMLHttpRequest()

Step2—发送请求

open()方法
参数说明取值
method 请求类型，参数大写 POST, GET
URL 请求的URL地址 url
async 请求是否为异步模式，默认为true true, false
send()方法
请求类型参数
POST string
GET null

参数	说明	取值
method	请求类型，参数大写	`POST`, `GET`
URL	请求的URL地址	`url`
async	请求是否为异步模式，默认为`true`	`true`, `false`

请求类型	参数
`POST`	`string`
`GET`	`null`

Step3—取得响应

检查请求状态，监听readyState和status的变化

xhr.onreadystatechange = function () {
  if (xhr.readystate === 4) {
    if (xhr.status === 200) {
      // Success do something
    } else {
      // Failed
    }
  }
}

readyState取值如下

readyState	说明
0	请求未初始化，open方法未调用
1	服务器连接已建立，open方法已调用
2	请求已接受，收到头信息
3	请求处理中，收到响应体
4	请求已完成，响应完成

status取值如下

status	说明
1XX	信息类，收到请求，表示正在处理
2XX	成功，表示用户请求被正确接收处理
3XX	重定向，表示请求没有成功
4XX	客户端错误
5XX	服务器错误

http 状态码详解

Step4—jQuery 实现 Ajax

jQuery 中提供了一个实现 Ajax 的方法即jQuery.ajax([settings])，参数如下：

参数	说明
type	请求类型`POST` `GET`
url	发送请求地址
data	一个对象，发送到服务器的数据
dataType	预期服务器返回的数据类型，一般采用`json`
success	请求成功后的回调函数
error	请求失败后的回调函数

示例：

$.ajax({
  type: "POST",
  url: <url>
  data: <data>,
  dataType: "josn",
  success: function() {
    // do something
  },
  error: function() {
    // do something
  }
});