Ajax学习笔记

April 08,2016
0
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()方法

    请求类型参数
    POSTstring
    GETnull

Step3—取得响应

检查请求状态,监听readyStatestatus的变化

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
  }
});

商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。