Ajax入门到高手第1章Word下载.docx
《Ajax入门到高手第1章Word下载.docx》由会员分享，可在线阅读，更多相关《Ajax入门到高手第1章Word下载.docx（29页珍藏版）》请在冰豆网上搜索。
,'
hello_world.php'
true）;
xmlhttp.onreadystatechange=function（）
if（xmlhttp.readyState==4&
&
xmlhttp.status==200）
alert（xmlhttp.responseText）;
xmlhttp.send（）;
可以看到，所有的操作都是围绕xmlhttp这个对象展开的，而xmlhttp是XMLHttpRequest对象的
一个实例。
XMLHttpRequest对象是当今所有Ajax和Web2.0应用程序的技术基础。
尽管各大软件厂商和开
源社团都推出了各种Ajax开发框架，以此来简化XMLHttpRequest对象的使用，但是详细了解
XMLHttpRequest的使用方法，对于学习Ajax是一个必要的过程。
下面开始介绍XMLHttpRequest对象所有的属性和方法。
1.1.1初始化请求
使用XMLHttpRequest的open方法来初始化一个请求。
回顾HelloWorld！
中open方法的使用，
如下所示。
service/hello_world.php'
这里给open方法传递了3个参数：
'
、'
和true。
它们的作用分别介绍
如下。
'
：
定义了请求的方法为GET方法。
定义了请求的目标地址。
true：
定义了请求为异步请求。
第6章HelloWorld！
分析·
173·
oXMLHttpRequest.open（strMethod,strUrl,boolAsync,strUser,strPassword）;
完整的参数如表1.1所示。
表1.1open方法参数列表
参数名说明
strMethod字符串型。
HTTP请求的方法，例如POST、GET、PUT、HEAD、DELETE等，大小写不敏感
strUrl字符串型。
请求的URL地址，可以为绝对地址，也可以为相对地址
boolAsync
布尔型。
指定此请求是否为异步方式，默认为true。
如果是异步方式，则当状态改变时会调用
onreadystatechange属性指定的回调函数
strUser字符串型。
当服务器需要身份验证时，在此处指定用户名。
可选参数
strPassword字符串型。
验证信息中的密码部分。
如果用户名为空，则此值将被忽略。
1.1.2设置请求的HTTP头信息
XMLHttpRequest对象提供了setRequestHeader方法，可以用来设置请求的HTTP头信息：
oXMLHttpRequest.setRequestHeader（strHeader,strValue）;
参数列表如表1.2所示。
表1.2setRequestHeader方法参数列表
strHeader字符串型。
头名称
strValue字符串型。
值
常见用法介绍如下。
用POST方法提交请求时，设置编码类型：
oXMLHttpRequest.setRequestHeader（"
Content-Type"
"
application/x-www-form-urlencoded"
提交COOKIE：
oXMLHttpRequest.setRequestHeader（'
COOKIE'
cookiename=cookievalue）;
提交XML：
Content-Type'
'
text/xml'
备注：
如果存在已经命名的HTTP头，则会被新的定义覆盖。
此方法必须在open方法后调用。
现在修改HelloWorld!
的代码来测试setRequestHeader方法。
程序首先通过setRequestHeader来发
送一个Cookie值，然后在服务端获取后输出，再在客户端显示出来。
将HelloWorld!
中JavaScript的内
容进行适当修改，如下所示。
174·
xmlhttp.setRequestHeader（'
author=RobinChen'
然后，修改hello_world.php中的代码，如下所示。
<
?
echo$_COOKIE['
author'
];
>
运行结果如图1.1所示。
对话框显示的正是程序所提交的COOKIE：
author的内容。
1.1.3发送请求
在XMLHttpRequest对象被初始化之后，可以调用send方法将请求发送到指定的HTTP服务器。
oXMLHttpRequest.send（varBody）;
send方法的参数说明如表1.3所示。
表1.3send方法参数列表
varBody通过请求发送的数据，variant型，可以是字符串、DOM树，或者其他任意数据流
如果请求是同步请求，此方法将会等待请求完成或者超时后才会返回，请求过程中页面程序将会
中断执行，处于“假死”状态，请求返回后再继续执行。
如果请求是异步请求，则立即返回，页面程
序不会中断。
如果发送的数据为字符串型，则回应的数据被编码为utf-8，可以按需要设置一个包含charset的文
档类型头。
如果发送的数据为XMLDOMObject，则回应的数据将被编码为在XML文档中声明的编码
图6.1运行结果
175·
类型。
如果XML文档中并没有声明编码类型，则使用默认的utf-8。
当使用GET方法提交请求，或者没有需要发送的数据时，可以send（null）或直接省略参数send（）。
为了让读者明白同步请求和异步请求的差别，看下面的例子。
前台页面async_test.html的代码如下
所示。
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
content="
text/html;
charset=utf-8"
/>
title>
同步、异步请求测试<
/title>
styletype="
text/css"
input{margin-right:
20px;
/style>
scripttype="
text/javascript"
//异步请求
functionasyncRequest（）{
try{
}catch（e）{
async_test.php'
xmlhttp.onreadystatechange=function（）{
xmlhttp.status==200）{
//同步请求
functionsyncRequest（）{
false）;
/script>
/head>
body>
inputtype="
button"
onclick="
syncRequest（）;
value="
发送同步请求"
asyncRequest（）;
发送异步请求"
/body>
/html>
176·
为了更好地体现出同步请求和异步请求的差别，此例特别在服务端进行耗时的大运算量计算，来
加大请求发出到返回的时间间隔。
后台页面async_test.php的代码如下所示。
$i=0;
while（$i<
10000000）{
$i++;
echo$i;
程序界面如图1.2所示。
如图1.3所示，单击“发送同步请求”按钮后，浏览器进入“假死”状态，
用户不能再进行任何操作，直到请求的结果返回才可以继续操作。
而单击“发送异步请求”按钮，则
不会影响用户其他的操作。
返回结果，如图1.4所示。
图1.2同/异步请求例程界面图1.3浏览器进入“假死”状态
图1.4返回结果
显而易见，异步请求提供了更好的用户体验。
1.1.4获取请求的当前状态
一个XMLHttpRequest对象，在其生命周期中有5种状态，分别介绍如下。
0（未初始化）：
对象已经创建，但是未调用open方法初始化。
1（初始化）：
对象已经初始化，但未调用send方法。
2（发送数据）：
send方法已经被调用，但是HTTP状态和HTTP头未知。
3（数据传送中）：
已经开始接收数据。
但由于响应数据和HTTP头信息不全，这时尝试获取
数据会出现错误。
4（完成）：
数据接收完毕。
177·
通过访问该对象的readyState的属性可以知道对象当前处于哪种状态。
现在将HelloWorld.html内
容进行修改，代码如下所示。
HelloWorld<
window.onload=function（）
document.body.innerHTML+='
div>
readyState:
+xmlhttp.readyState+'
/div>
;
responseText:
+xmlhttp.responseText+'
通过Web服务器访问该页面，效果如图1.5所示。
图1.5readyState
178·
1.1.5指定请求状态改变时的事件处理句柄
当XMLHttpRequest对象的readyState发生变化时，会触发一个叫readystatechange的事件。
通过
将处理函数赋给XMLHttpRequest对象的onreadystatechange属性，可以为该事件指定事件处理函数。
在6.1.4小节的示例中就是声明了一个匿名函数作为readystatechange的处理函数，并在该函数内完成
了对XMLHttpRequest对象请求状态的判断和输出，代码如下所示。
1.1.6返回当前请求的HTTP状态码
在请求完成后，可以通过访问XMLHttpRequest对象的status属性来获取当前HTTP请求的状态，
以此来判断请求是否成功。
status是一个只读的整型数值，其取值范围如表1.4所示。
表1.4HTTP状态码
值说明
100Continue
101SwitchingProtocols
200OK
201Created
202Accepted
203Non-AuthoritativeInformation
204NoContent
205ResetContent
206PartialContent
300MultipleChoices
301MovedPermanently
302Found
303SeeOther
304NotModified
305UseProxy
307TemporaryRedirect
400BadRequest
401Unauthorized
179·
续表
402PaymentRequired
403Forbidden
404NotFound
405MethodNotAllowed
406NotAcceptable
407ProxyAuthenticationRequired
408RequestTimeout
409Conflict
410Gone
411LengthRequired
412PreconditionFailed
413RequestEntityTooLarge
414Request-URITooLong
415UnsupportedMediaType
416RequestedRangeNotSuitable
417ExpectationFailed
500InternalServerError
501NotImplemented
502BadGateway
503ServiceUnavailable
504GatewayTimeout
505HTTPVersionNotSupported
1.1.7从返回信息中获取指定的HTTP头
通过getResponseHeader方法可以取得指定的HTTP头信息。
该方法接受一个参数，制定了需要获
取的HTTP头的名称。
下面的示例演示了getResponseHeader的用法，前台页面getRequestHeader.html
的代码如下所示。
getResponseHeaderdemo<
scripttype="
180·
header.php'
Header-Author:
+xmlhttp.getResponseHeader（'
Author'
）
+'
Header-WebSite:
+
xmlhttp.getResponseHeader（'
WebSite'
）+'
后台页面header.php的代码如下所示。
header（"
Author:
RobinChen"
WebSite:
echo"
HelloWorld!
程序中，在后台的header.php中输出了两个自定义的头信息：
Author和WebSite，然后在前台的getResponseHeader.html中获取并输
出。
程序运行结果如图1.6所示。
1.1.8获取返回信息的所有HTTP头
使用getResponseHeader方法可以获取单个HTTP头信息。
如果需要一次性获取所有的HTTP头信
息，则可以使用getAllResponseHeaders方法。
下面的示例演示了getAllResponseHeaders的用法，前台
页面getAllResponseHeaders.html的代码如下所示。
图6.6getResponseHeader
181·
getAllResponseHeadersdemo<
window.alert（xmlhttp.getAllResponseHeaders（））;
xmlht
升级会员 