CODERFE

Ajax学习笔记

Ajax即Asynchronous Javascript and XML(异步的Javascript与XML技术),简单来说就是无需刷新整个页面就能更新用户界面,从而更快地响应用户行为的一套技术。

Step1—创建实例化对象

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

1
2
3
4
5
6
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // sarifi/firefox/chrome/IE7+
} else {
xhr = new ActiveXObject("Microsoft.HTTPXML"); // IE5/6
}

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

1
var xhr = new XMLHttpRequest();

Step2—发送请求

  • open()方法

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

    请求类型参数
    POSTstring
    GETnull

Step3—取得响应

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

1
2
3
4
5
6
7
8
9
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请求失败后的回调函数

示例:

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
type: "POST",
url: <url>
data: <data>,
dataType: "josn",
success: function() {
// do something
},
error: function() {
// do something
}
});