在现代大多数的浏览器中,Ajax以可利用的XMLHttpRequest对象为中心。这个对象可以让用户在后台连接服务器,传递数据给服务器上的PHP脚本,并且可以读取来自这些脚本的响应。
这个示例中的JavaScript首先创建一个XMLHttpRequest对象,并将其存储在名为XMLHttpRequestObject的变量中。这段JavaScript代码包含在一个HTML <script>元素中,首先声明该变量并将其设置为FALSE(如果没有成功创建一个XMLHttpRequest对象,那么该变量将会一直保持FALSE,可以用其后的代码来测试这一点):
- <script language = "javascript">
- var XMLHttpRequestObject = false;
- .
- .
- .
- </script>
现在已经创建了XMLHttpRequest对象-- 根据所处理的浏览器的不同,处理过程也将有所区别。首先可以尝试使用window.XMLHttpRequest在以下浏览器中创建这个对象:Netscape Navigator(7.0及以上版本)、Apple Safari(1.2及以上版本)和Firefox。如果这个对象存在,可以像下面这样测试:
- <script language = "javascript">
- var XMLHttpRequestObject = false;
- if (window.XMLHttpRequest) {
- .
- .
- .
- }
- </script>
如果window.XMLHttpRequest存在,可以使用表达式new XMLHttpRequest()像下面这样创建一个新的XMLHttpRequest对象:
- <script language = "javascript">
- var XMLHttpRequestObject = false;
- if (window.XMLHttpRequest) {
- XMLHttpRequestObject = new XMLHttpRequest();
- }
- </script>
这就照顾到了Firefox、Navigator和Safari等浏览器。现在有了一个现成的可用于这些浏览器的XMLHttpRequest对象。
要是Internet Explorer会怎么样呢?在Internet Explorer中,只需要像创建ActiveX对象一样创建XMLHttpRequest对象即可。所以,首先要测试是否可以创建ActiveX对象:
- <script language = "javascript">
- var XMLHttpRequestObject = false;
- if (window.XMLHttpRequest) {
- XMLHttpRequestObject = new XMLHttpRequest();
- } else if (window.ActiveXObject) {
- .
- .
- .
- }
- </script>
如果可以创建ActiveX对象,那么可以在Internet Explorer中使用表达式ActiveXObject("Microsoft.XMLHTTP")来创建一个新的XMLHttpRequest对象。
- <script language = "javascript">
- var XMLHttpRequestObject = false;
- if (window.XMLHttpRequest) {
- XMLHttpRequestObject = new XMLHttpRequest();
- } else if (window.ActiveXObject) {
- XMLHttpRequestObject = new
- ActiveXObject("Microsoft.XMLHTTP");
- }
- </script>
到目前为止,我们已经为所有主要的浏览器创建了一个XMLHttpRequest对象。这个对象的主要属性和方法在这些浏览器上是相同的-- 表12-1至表12-6给出了该对象的所有属性和方法。
表12-1 用于Internet Explorer的XMLHttpRequest 对象的属性
属 性 | 说 明 |
onreadystatechange | 包含事件处理程序的名称,该事件处理程序 应该在readyState属性的值改变时被调用。读/写 |
readyState | 包含请求的状态。只读 |
responseBody | 包含响应主体。该响应主体是可以返回HTTP响应的方法。只读 |
responseStream | 包含到服务器的二进制响应流。只读 |
responseText | 包含作为字符串的响应主体。只读 |
responseXML | 包含作为XML的响应主体。只读 |
status | 包含由请求返回的HTTP状态码。只读 |
statusText | 包含HTTP响应状态文本。只读 |
表12-2 用于Internet Explorer的XMLHttpRequest 对象的方法
方 法 | 说 明 |
abort | 终止HTTP请求 |
getAllResponseHeaders | 返回所有HTTP头 |
getResponseHeader | 返回HTTP头的值 |
open | 打开到服务器的请求 |
send | 发送HTTP请求到服务器 |
setRequestHeader | 设置HTTP头的名称和值 |
表12-3 用于Mozilla、Firefox和Netscape Navigator的XMLHttpRequest 对象的属性
属 性 | 说 明 |
channel | 包含用于执行请求的通道。只读 |
readyState | 包含请求的状态。只读 |
responseText | 包含作为字符串的响应主体。只读 |
responseXML | 包含作为XML的响应主体。只读 |
status | 包含由请求返回的HTTP状态码。只读 |
statusText | 包含HTTP响应状态文本。只读 |
表12-4 用于Mozilla、Firefox和Netscape Navigator的XMLHttpRequest 对象的方法
方 法 | 说 明 |
abort | 终止HTTP请求 |
getAllResponseHeaders | 返回所有HTTP头 |
getResponseHeader | 返回HTTP头的值 |
openRequest | 打开请求的本地(非脚本)方法 |
overrideMimeType | 重写服务器返回的MIME类型 |
表12-5 用于Apple Safari的XMLHttpRequest 对象的属性
属 性 | 说 明 |
onreadystatechange | 包含事件处理程序的名称,该事件处理 程序应该在readyState属性的值改变时被调用。读/写 |
readyState | 包含请求的状态。只读 |
responseText | 包含作为字符串的响应主体。只读 |
responseXML | 包含作为XML的响应主体。只读 |
status | 包含由请求返回的HTTP状态码。只读 |
statusText | 包含HTTP响应状态文本。只读 |
表12-6 用于Apple Safari的XMLHttpRequest 对象的方法
方 法 | 说 明 |
abort | 终止HTTP请求 |
getAllResponseHeaders | 返回所有HTTP头 |
getResponseHeader | 返回HTTP头的值 |
open | 打开到服务器的请求 |
send | 发送HTTP请求到服务器 |
setRequestHeader | 设置HTTP头的名称和值 |
现在就有了一个XMLHttpRequest对象-- 下一步就是打开它,准备与服务器交互。