用 PHP 构建基于 Ajax 的 Web 站点（2）
|
- UID
- 1066743
|
用 PHP 构建基于 Ajax 的 Web 站点（2）
创建 XMLHttpRequest 实例需要创建 ajaxFunction并提供一个变量来容纳创建的 XMLHttpRequest对象。与任何 JavaScript 方法一样，按照清单 2 所示定义这个方法。
清单 2. ajaxFunction的定义1
2
3
4
5
6
| function ajaxFunction() {
var xmlHttp = null;
.
.
.
}
|
大多数现代浏览器都支持 XMLHttpRequest对象。但是，Internet Explorer 6 等比较陈旧的浏览器要求创建一个 ActiveX 对象来执行异步的服务器调用。这会产生一个问题：必须判断正在运行代码的浏览器类型并创建适当的对象。JavaScript 代码通过它的 try/catch功能提供了一个解决方案。只需以正确的优先次序尝试创建对象，让 try/catch块处理其余的事情。清单 3 给出一个代码示例。
清单 3. 创建适当的对象1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| function ajaxFunction() {
var xmlHttp=null;
try
{
// Firefox, Internet Explorer 7. Opera 8.0+, Safari.
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer 6.
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return false;
}
}
}
}
|
可以看到，所有现代浏览器都支持创建 XMLHttpRequest对象。关于 Microsoft®是真正支持 XMLHttpRequest对象，还是使用一个 façade 包装 ActiveX 实现，还有一些争议。
打开服务器连接在同一个 JavaScript 函数中，创建 XMLHttpRequest对象之后，使用 XMLHttpRequest对象的 open方法打开一个到服务器端脚本的连接。这个方法有两个必要参数和三个可选参数，见表 1。
表 1. open方法的参数参数说明method指定要使用的 HTTP 方法。有效值包括 GET、POST、PUT或 HEAD。url指定要调用的 XML 数据或服务器端 XML Web 服务的绝对路径或相对路径。为了防止跨站点脚本攻击，Ajax 请求针对的 URL 必须使用与包含 Ajax 请求的页面相同的协议、主机和端口。尽管一些浏览器可能允许任意的 URL，但是并非所有浏览器都支持这么做。如果需要跨站点通信，必须在服务器端使用 cURL 或其他方法进行处理。async如果希望异步地向服务器发送请求，应该把这个参数设置为 true。true 值还要求设置 onreadystatechange属性，稍后讨论这个属性。把这个参数设置为 false 会禁止大多数浏览器接收任何进一步的用户输入。如果应用程序足够灵活，能够在执行后端操作的同时继续接收输入，那么最好异步地执行操作。user指定一个用户名，用来在执行脚本之前对用户进行身份验证。只有在脚本要求用户身份验证的情况下，才需要这个参数。password指定一个密码，用来在执行脚本之前对用户进行身份验证。只有在脚本要求用户身份验证的情况下，才需要这个参数。
对于这个示例，代码只需要执行一个 GET操作，向服务器上的一个脚本请求时间。还告诉 open方法我们希望异步地执行操作，见清单 4。
清单 4. open方法调用1
2
3
4
5
6
7
8
| function ajaxFunction() {
.
.
.
xmlHttp.open("GET", "time.php", true);
}
|
告诉 Ajax 在服务器端代码执行完成时应该调用哪个方法在使用 Ajax 调用服务器时，产生的响应是通过调用一个回调函数返回的。可以创建并命名一个函数，也可以创建无名的函数。无论是哪种情况，都需要设置 XMLHttpRequest对象的 onReadyStateChange属性，让它知道要使用的回调函数，见清单 5。
清单 5. 设置 onReadyStateChange属性1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function ajaxFunction() {
.
.
.
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4)
{
// Get the data from the server's response.
document.myForm.time.value=xmlHttp.responseText;
xmlHttp=null;
}
}
}
|
可以看到，调用这个方法之后，它会检查 readyState，寻找有效值 4。共有五个有效状态，见表 2。
表 2. readyState的有效值值说明0未初始化1正在装载2装载完成3交互状态4已经完成
这段代码的基本意思是，“如果状态指出操作已经完成，就进行处理”。当状态为已经完成时，下一步是用服务器响应更新需要更新的页面部分。这需要接收赋值给 responseText属性的值，这就是服务器响应。最后，通过把 XMLHttpRequest对象赋值为 null，停止这个对象。 |
|
|
|
|
|
