AJAX(第二部分:使用JavaScript和Ajax发出异步请求)

本文中，您将开始接触最基本和基础性的有关Ajax的全部对象和编程方法：XMLHttpRequest对象。该对象实际上仅仅是一个跨越所有Ajax应用程序的公共线程，您可能已经预料到，只有彻底理解该对象才能充分发挥编程的潜力。事实上，有时您会发现，要正确地使用XMLHttpRequest，显然不能使用XMLHttpRequest。这到底是怎么回事呢？

Web1.0，实际上它指的就是具有完全不同的请求和响应模型的传统Web。

Web2.0，(在很大程序上)消除了这种看得见的往复交互。

XMLHttpRequest的方法和属性

open()：建立到服务器的新请求。

send()：向服务器发送请求。

abort()：退出当前请求。

readyState：提供当前HTML的就绪状态。

responseText：服务器返回的请求响应文本。

简单的 new
首先需要创建一个新变量并赋给它一个XMLHttpRequest 对象实例。这在 JavaScript 中很简单，只要对该对象名使用new 关键字即可

<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>

2、增加try/catch快：尝试创建XMLHttpRequest对象。如果失败(catch(failed))则保证request的值仍然为false。

3、检查request是否仍然为false（如果一切正常就不会是false）。

4、如果出现问题(request是false)则使用JavaScript警告通知用户出现了问题。

<script language="javascript" type="text/javascript">
var request = false;
try {
	request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
	request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
	request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
	request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>

不放到方法或函数体中的JavaScript代码称为静态JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。

用XMLHttpRequest发送请求

得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest惟一的目的是让您发送请求和接收响应。其他一切都是JavaScript、CSS或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据。准备好XMLHttpRequest之后，就可以向服务器发送请求了。

escape()方法，它用于转义不能用明文正确发送的任何字符。

打开请求

有了要连接的URL后就可以配置请求了。可以用XMLHttpRequest对象的open()方法来完成。该方法有五个参数：

request-type:发送请求的类型。典型的值是GET或POST，但也可以发送HEAD请求。

url：要连接的URL。

asynch：如果希望使用异步连接则为true，否则为false。该参数是可选的，默认为true。

username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。

password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在Web表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束。结果是，应用程序感觉不那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。

发送请求 send()

指定回调方法

onreadystatechange属性，该属性允许指定一个回调函数。回调允许服务器反向调用Web页面中的代码。

异步原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。

处理服务器响应

回调和Ajax

现在我们已经看到如何告诉服务器完成后应该做什么：将XMLHttpRequest对象的onreadystatechange属性设置为要运行的函数名。这样，当服务器处理完请求后就会自动调用该函数。也不需要担心该函数的任何参数。

HTTP就绪状态

服务器在完成请求之后会在XMLHttpRequest的onreadystatechange属性中查找要调用的方法。这是真的，但还不完整。事实上，每当HTTP就绪状态改变时它都会调用该方法。

HTTP就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态：

0：请求没有发出(在调用open()之前)。

1：请求已经建立但还没有发出(调用send()之前)

2：请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。

3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。

4：响应已完成，可以访问服务器响应并使用它。

对于Ajax编程，需要直接处理的唯一状态就是就绪状态4，它表示服务器响应已经完成，可以完全地使用响应数据了。

HTTP状态码

除了就绪状态外，还需要检查HTTP状态。我们期望的状态码是200，它表示一切顺利。如果就绪状态是4而且状态码是200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。

读取响应文本

现在可以确保请求已经处理完成(通过就绪状态)，服务器给出了正常的响应(通过状态码)，最后我们可以处理服务器返回的数据了。返回的数据保存在XMLHttpRequest对象的responseText属性中。

XMLHttpRequest的属性responseXML,如果服务器选择使用XML响应则该属性包含XML响应。处理XML响应和处理普通文本有很大不同，涉及到解析、文档对象模型(DOM)和其他一些问题。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!