AJAX = Asynchronous JavaScript and XML
用途
其实就是希望动态更新网页内容。
Update a web page without reloading the pageRequest data from a server.
after the page has loaded Receive data from a server
or after the page has loadedSend data to a server.in the background
工作过程描述
工作过程
代码该如何写
首先创建XMLHttpRequest对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
看下XMLHttpRequest有哪些常用的方法
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request <br /> header: specifies the header name value: specifies the header value |
| open(method, url, async) | Specifies the type of request <br /> method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
| onreadystatechange | Stores a function (or the name of a function) to be called automatically each time the readyState property changes |
然后是配置请求信息
xhttp.open("GET", "ajax_info.txt", true);
接着是发送请求
// if need
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send();
// or
xhttp.send("fname=Henry&lname=Ford");
监听响应事件，做相应的处理
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// 这就是传说中的动态更新网页内容
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
XMLHttpRequest的事件属性描述
| Property | Description |
|---|---|
| readyState | Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 404: Page not found |
大概流程就是这样子，介绍完毕。
