Ajax学习笔记

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

Step3—取得响应

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

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

readyState取值如下

status取值如下

http 状态码详解

Step4—jQuery 实现 Ajax

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

示例：

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