Ajax学习笔记

Avatarcoderfee/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请求是否为异步模式,默认为truetrue, 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
}
});
Copyright ©; 2016-2022 coderfee, All rights reserved.