1. 创建 XMLHttpRequest 对象的一个实例
var xmlHttp;
function createXMLHttpRequest() {
//检查是否支持 ActiveXObject 控件(IE浏览器)
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
2. 方法和属性
2.1 常用的方法有 open( ) 和 send( ) 。
void open(string method, string url, boolean async, string username, string password) 建立对服务器的调用。
- method: GET、POST或PUT。
- url:相对url或绝对url。
- async:可选,默认值为true,表示异步请求;false表示同步。
void send(context):具体向服务器发出请求。如果请求声明为异步,这个方法就会立即返回,否则它会等待直到接收到响应为止。
- 可选参数可以是 DOM 对象的实例、输入流、或者串。若请求类型为 GET 时,参数使用
null
;若为 POST 时,参数内容将作为请求体的一部分发送。
void setRequestHeader(string header, string value):为请求中一个给定的首部设置值。这个方法必须在 open() 之后才能调用。
- header:要设置的首部。
- value: 在首部中放置的值。
void abort():停止请求。
string getAllResponseHeaders():返回一个串,其中包含HTTP请求的所有响应首部,首部包括Content-length、Data和URL。
string getResponseHeaders(string header):与上面的 getAllResponseHeaders( ) 对应。
- header表示你希望得到的指定首部值,并且把这个值作为串返回。
2.2 标准 XMLHttpRequest 属性
属性 | 描述 |
---|---|
onreadystatechange | 每个状态改变时都会触发这个事件处理器,值可以为回调函数的指针 |
readyState | 请求的状态。有5个可取值。(在下方有说明) |
responseText | 服务器的响应,表示一个串 |
responseXML | 服务器的响应,表示为XML。这个对象可解析为一个 DOM 对象 |
status | 服务器的 HTTP 状态码(200对应 OK,404对应 Not Found …) |
statusText | HTTP 状态码的相应文本(OK 或 Not Found …) |
readyState 请求状态的5个值:
- 0:未初始化
- 1:正在加载
- 2:已加载
- 3:交互中
- 4:完成
3. Ajax 交互示例
请求返回到浏览器时的首部设置:
- Content-Type:text/html
- Cache-Control:no-cache
4. GET 与 POST
GET 请求通过向 url 传递参数,浏览器和服务器会限制其长度。
POST 则不会限制发送给服务器的数据量大小。一般来讲,
- 使用 GET 方法从服务器获取数据。
- 使用 POST 方法改变服务器上的状态。
使用 POST 时,需要设置 XMLHttpRequest 对象的 Content-Type 首部:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
5. 简单请求
5.1 回调
onreadystatechange
属性存储了回调函数的指针。当 XMLHttpRequest 对象的内部状态发生改变时,就会调用这个回调函数。当进行了异步调用,请求就会发出,脚本立即处理执行。一旦发出了请求,对象的 readyState
属性会经过几个变化,一般处理的是服务器响应结束时的状态。
回调函数 callback 方法:
xmlHttp.onreadystatechange = callback; //函数指针
function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.Status == 200) {
//可以简单的设置div的文本等等
}
}
}
5.2 简单请求的示例
//javascript
var xmlHttp;
function createXMLHttpRequest() {
//检查是否支持 ActiveXObject 控件(IE浏览器)
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
//显示 simpleResponse.xml 里的文本
}
}
}
<!--html-->
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>
注:以上摘自《Ajax基础教程》