目录
一、什么是Ajax
二、XMLHttpRequest 对象
1.创建 XMLHttpRequest 对象
2.向服务器发送请求
3.服务器响应
三、总结
一、什么是Ajax
Ajax 是一种异步加载页面内容的技术，即用户点击了某个链接之后，可以只更新页面中的一小部分而不用重新加载整个网页。Ajax 的主要优势就是对页面的处理以异步方式发送到服务器，而服务器不会用整个页面来响应请求，它会在后台处理请求。与此同时，用户可以继续浏览页面并与页面进行交互。相应的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。
图1.1 Ajax 加载
二、XMLHttpRequest 对象
XMLHttpRequest 对象是 Ajax 技术的核心，这个角色充当着脚本与服务器之间中间人的角色，这个对象可以自己发送请求也可以自己处理请求。
1.创建 XMLHttpRequest 对象
考虑到所有浏览器的支持（大部分浏览器基于 XMLHttpRequest 对象来创建新对象，IE部分版本的浏览器实现方式则不同），创建新对象的方法可以这样写：
function getHTTPObject () {
if(typeof XMLHttpRequest == "undifined")
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {}
return false;
}
return new XMLHttpRequest();
}
有了这个方法后，在脚本中要使用 XMLHttpRequest 对象时，可以直接将新对象赋值给一个新变量：
var request = getHTTPObject();
2.向服务器发送请求
如需将请求发送到服务器，可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
-
open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
其中，method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步） - send(string)：将请求发送到服务器，其中，string：仅用于 POST 请求。
如下面的代码会在页面加载完成时发起一个 get 请求，请求与本文件位于同一文件夹的 example.txt 文件：
function getNewContent() {
var request = getHTTPObject();
if(request) {
//指定请求的目标
request.open("GET","example.txt",true);
//明确如何处理相应
request.onreadystatechange = function () {//onreadystatechange函数会在服务器给XMLHttpRequest对象送回响应的时候被触发执行
if(request.readyState==4) {
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
//发送请求
request.send(null);
} else {
alert("Sorry,your browser doesn't support XMLHttpRequest");
}
}
在这个例子中，onreadystatechange 事件处理函数在等到 readyState 值变为4之后，就会从responseText 属性里取得文本数据，然后把数据放到一个段落里，再将新段落添加到 DOM 里。
其中，有几个比较重要的 XMLHttpRequest 对象属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪 |
| status | 200: "OK"；404: 未找到页面 |
3.服务器响应
使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性可以获得服务器的响应：
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
如上面的例子代码中就运用到了 responseText 属性。下面的代码则运用了 responseXML 属性来获得服务器的响应：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
除了上面的简单地获取服务器中 .txt 文件的内容之外，Ajax 还可以和 web 服务器中的 ASP 页面或 PHP等脚本文件进行相关的通信，实现更加复杂多样的功能。
三、总结
Ajax 技术的运用可以减少了许多页面重新加载的次数，减少用户重复刷新页面的次数，但同时，这种缺少记录的技术会与浏览器的一些使用惯例产生冲突，如无法使用后退按钮或为指定的页面添加书签等。另外，使用了 Ajax 技术的站点，用户必须启用了 JavaScript 功能之后才能正常访问，在运用 Ajax 技术的同时，如何做到平稳退化也是一个需要好好考虑的方面。
网友评论