Ajax入门到高手第1章Word下载.docx
- 文档编号:20799554
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:29
- 大小:25.03KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax 入门 高手
![提示](https://static.bdocx.com/images/bang_tan.gif)