转蝲googleq篇发表?a >Devmo上的AJAX: Getting Started?/p>
目录
- 什么是AJAXQ?/a>
- W一步：如何发出一个HTTPh
- W二步：处理服务器的响应
- W三步：一个简单的例子
- W四步：?acronym title="Extensible Markup Language">XML响应协同工作
什么是AJAX
AJAX是一个新的合成术语，隐含了两个已l存在多q的JavaScriptҎ(gu)，但是直到最q，随着一些诸如Gmail、Google Suggest以及Google Maps的蘪动，才被许多|络开发者所注意到?/p>
我们所讨论的两个JavaScript的特性是你能够：
- 向服务器发出h而不需重新加蝲M面
- 解析XML文档q且与之协同工作
AJAX是一个羃写，A是指"asynchronous"Q异步的Q，它表CZ可以在向服务器发Z个HTTPh后，边做其他的事情，边等待服务器的响应?strong>JA表示"JavaScript"Q?strong>X表示"XML"Q可扩展标记语言Q?/p>
W一步：如何发出一个HTTPh
Z用JavaScript向服务器发出一个HTTPhQ你需要一个类的实例来提供l你q种功能。这个类原本在IE里被作ؓ一个ActiveX对象提出Q叫XMLHTTP。然后，Mozilla、Safari以及一些其他的览器相l跟随，出现了一?code>XMLHttpRequestc，其支持微软的ActiveX对象原本的方法和属性?/p>
所以，Z能够跨浏览器地创个类的对象，你需要这P
if (window.XMLHttpRequest) { // Mozilla, Safari,
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
Q以上例子中的代码，是一个用来构建XMLHTTP实例的简单版本，实际使用时的例子请参见本文的W三步）
如果服务器端的响应中没有包含XML的mime-type报头QheaderQ，有些版本的Mozilla览器可能不会处理。所以，Z安全赯Q你可以用一个特D的Ҏ(gu)来给服务器端发出的响应强加上q个报头Q以防其不是text/xmlcd?/p>
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');下一步就是你来决定在服务器对你的h作出响应后，你准备做什么。这一阶段Q你只需要告诉HTTPh对象QHTTP request objectQ用哪一个JavaScript函数来处理这一响应。这一步用讄该对?code>onreadystatechange属性ؓ相应的JavaScript函数名来实现Q?/p>
http_request.onreadystatechange = nameOfTheFunction;注意Q在函数名后面没有括受另外如下定义处理响应的函数Q?/p>
http_request.onreadystatechange = function(){
// 处理响应
};接下来，既然你已l声明了在接到响应后q什么，你就需要去发出h。你需要调用HTTPhcȝopen()?code>send()Ҏ(gu)Q?/p>
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);open()Ҏ(gu)的第一个参数是HTTPh的方式——GET、POST、HEAD或者Q何其它你想用的Q你的服务器支持的方式。方式的名称要大写，否则有些览器（如FirefoxQ可能就不会处理h。可以去 W3C specs获取更多的你可以使用的HTTPh方式的信息?- W二个参数是你所h面的URL?
- W三个参数是用来讄h是否为异步的。如果是
TRUEQ则在服务器未q回响应的时候，JavaScript的函Cl箋执行。这也就是AJAX中的A的含义?/li>
send()Ҏ(gu)的参数可以M你希望传递给服务器的数据Q数据应该ؓ如下格式的查询串Q?/p>
name=value&anothername=othervalue&so=onW二步：处理服务器响?/h3>
CQ当你向服务器发Z一个请求，你也发Z一个被设计用来处理响应的JavaScript函数的名字?/p>
http_request.onreadystatechange = nameOfTheFunction;
我们来看看这个函数都应该做些什么。首先，光要检查请求的状态，如果状态的gؓ4Q那么就意味着全部的服务器响应都已接受完毕Q你可以l箋来处理了?/p>
if (http_request.readyState == 4) {
// 一切就l，相映已接受完?br />} else {
//未qA
}readyState全部值的列表如下Q?
- 0Q未初始?uninitializedQ?
- 1Q正在加?loadingQ?
- 2Q加载完?loadedQ?
- 3Q交?interactiveQ?
- 4Q完?completeQ?/li>
下一步是查HTTP服务器响应的情况代码。所有可能的代码都被列在?a title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" >W3C的网?/a>上。目前，我们只对200 OK响应感兴?/p>
if (http_request.status == 200) {
// 极了！
} else {
// hZ些问题，
// 比如响应可能?04(Not Found)Q未扑ֈ
// 或?00Q内部服务器错误
}在你查完h的状态和HTTP响应情况后，你就可以自己军_Ҏ(gu)务器发送给你的数据作什么样的处理了。你有两U途径来访问这些数据：
http_request.responseText会把服务器的响应作Z个文本串q回http_request.responseXML把响应作ؓ一?code>XMLDocument对象q回Q你可以用JavaScript的文对象模型（DOMQ的函数来处?/li>
W三步：一个简单的例子
我现在来做一个简单的HTTPh。我们的JavaScript脚本会h一个HTML文Q?code>test.htmlQ其包含了一D|本——“这是一个测试。”——然后我们会alert() test.html的内宏V?/p>
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')">
发出h
</span>在这个例子中Q?
- 用户在浏览器里点几Z发求”（make a requestQ；
- q会调用
makeRequest()函数Qƈ且附有参?code>test.htmlQ一个自阿同一目录下的HTML文的名字? - h被发出，然后Q?code>onreadystatechangeQ操作被传递给
alertContents()Q? alertContents()查响应是否被接收和是否状态ؓ“OK”，然后alert() test.html文g的内宏V?/li>
与XML响应协同工作
在上个例子中Q在HTTP响应被接收完毕后Q我们和使用了请求对象的responseText属性，其包含了test.html文g的内宏V现在，让我们试?code>responseXML属性?/p>
让我们现在就创徏一个有效的XML文档Q这个文档稍后会被我们请求。文（test.xmlQ包括：
<?xml version="1.0" encoding="utf-8" ?>
<root>
q是个测?
</root>...
onclick="makeRequest('test.xml)">
...然后?code>alertContents()里把alert()行替换成alert(http_request.responseText);Qƈ且，在其上方写下Q?pre>var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);q样Q我们获取了responseXML中的XMLDocument对象Qƈ且用DOMҎ(gu)来访问了XML文中所包含的某些内宏V你可以?a title="http://www.w3clubs.com/mozdev/test.xml" >q里览?code>test.xmlQ更新后的脚本可以在q里得到?/p>
可以?a title="http://www.mozilla.org/docs/dom/" s DOM implementation获取更多的DOMҎ(gu)?/p>