Ajax机制简介
Ajax作为一种常用的web技术,本质是通过XMLHttpRequest对象请求远程接口获取数据,本文简单介绍其实现机制。
Ajax基础
一个完整的Ajax过程如下:
- 创建XMLHttpRequest对象
- 通过上一步创建的XMLHttpRequest对象,打开一个连接
- 绑定事件,对获取到的数据进行处理。一般为请求成功后的回调函数
- 发送该请求
根据上面的步骤进行简单的描述:
1. 对于不同的浏览器,创建一个能发起Ajax请求对象的方式不一样。 现代浏览器通过内嵌的XMLHttpRequest()对象即可实现,而老的浏览器(IE6/IE6-)则需要通过一个ActiveX对象来创建。
2. 打开一个到远程对象的请求,需要通过XHR的open()方法实现。语法:
open(method, url, async, user, password)
其中:
- method可以取值为GET、POST、HEAD、PUT、DELETE、OPTIONS,前二者是常用的。
- url为请求的远程接口
- async为布尔值,是否需要异步处理请求,默认为true
- 如果此接口需要用户名和密码,可附上,不过这样就暴露了
3. 通过监控readystatechange事件,判断数据是否请求完成,并进行相关处理。其状态值可以通过readyState获取,有如下5种状态:
- 0: XHR对象未初始化
- 1: XHR对象已经建立,但还未发送
- 2: 已调用send(),请求已发送
- 3: 已接收到数据,正在处理中
- 4: 数据接收并处理完成,可以使用了
4. send()方法用于发送请求,若是POST方式,可以将需要传送的数据作为参数发送,形如send(data),但此时需要先设置 XMLHttpRequest请求头的Content-Type为application/x-www-form-urlencoded。
一个简单的Ajax示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
var XMLHttpFactories = [ function () { return new XMLHttpRequest()}, function () { return new ActiveXObject( "Msxml2.XMLHTTP" )}, function () { return new ActiveXObject( "Msxml3.XMLHTTP" )}, function () { return new ActiveXObject( "Microsoft.XMLHTTP" )} ]; function createXMLHTTPObject() { var xmlhttp = false ; for ( var i=0;i<XMLHttpFactories.length;i++) { try { xmlhttp = XMLHttpFactories[i](); } catch (e) { continue ; } break ; } return xmlhttp; } // 步骤1:建立XMLHttpRequest对象 var xhr = createXMLHTTPObject(); // 步骤2:打开一个连接 // 步骤3:绑定对返回数据的回调函数 xhr.onreadystatechange = function () { console.log(xhr.readyState + ':' + xhr.status); } // 步骤4:发送请求 xhr.send(); |
Ajax进阶
1. setRequestHeader(name, value) setRequestHeader()用来设置HTTP请求头,如在POST时,需要设置xhr.setRequestHeader(‘Content- Type’, ‘application/x-www-form-urlencoded’);
2. getResponseHeader(name) 此处可获得返回的HTTP头中的指定信息。
3. getAllResponseHeaders() 此方法获得返回的HTTP头。
转自:http://www.cnblogs.com/lovebear/archive/2012/05/28/2521016.html