Ajax入门到高手第1章.docx
- 文档编号:7675070
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:29
- 大小:25.03KB
Ajax入门到高手第1章.docx
《Ajax入门到高手第1章.docx》由会员分享,可在线阅读,更多相关《Ajax入门到高手第1章.docx(29页珍藏版)》请在冰豆网上搜索。
Ajax入门到高手第1章
XMLHttpRequest对象详解
搭建基本的Ajax开发框架
小结
HelloWorld!
分析
第一章
本书的前面几章向读者介绍开发Ajax应用程序所需要具备的基础知识和开发中经
常用到的一些工具。
从本章开始,正式向读者介绍Ajax的相关知识。
在第1章中向读
者展示了一个简单的Ajax应用程序实例:
HelloWorld!
,本章主要对该程序的各个组
成部分进行分析。
并将结合实例重点介绍XMLHttpRequest对象的属性和方法,并介绍
如何搭建基本的Ajax应用框架。
最后,再给HelloWorld!
程序添加一些新的功能。
·172·Ajax从入门到精通
1.1XMLHttpRequest对象详解
回顾第1章中的Ajax示例程序HelloWorld!
的内容。
try
{
varxmlhttp=newXMLHttpRequest();
}
catch(e)
{
varxmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.open('GET','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方法的使用,
如下所示。
xmlhttp.open('GET','service/hello_world.php',true);
这里给open方法传递了3个参数:
'GET'、'service/hello_world.php'和true。
它们的作用分别介绍
如下。
'GET':
定义了请求的方法为GET方法。
'service/hello_world.php':
定义了请求的目标地址。
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:
oXMLHttpRequest.setRequestHeader('Content-Type','text/xml');
备注:
如果存在已经命名的HTTP头,则会被新的定义覆盖。
此方法必须在open方法后调用。
现在修改HelloWorld!
的代码来测试setRequestHeader方法。
程序首先通过setRequestHeader来发
送一个Cookie值,然后在服务端获取后输出,再在客户端显示出来。
将HelloWorld!
中JavaScript的内
容进行适当修改,如下所示。
·174·Ajax从入门到精通
try
{
varxmlhttp=newXMLHttpRequest();
}
catch(e)
{
varxmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.open('GET','hello_world.php',true);
xmlhttp.setRequestHeader('COOKIE','author=RobinChen');
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.send();
然后,修改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运行结果
第6章HelloWorld!
分析·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">
//www.w3.org/1999/xhtml">
input{margin-right:
20px;}
//异步请求
functionasyncRequest(){
try{
varxmlhttp=newXMLHttpRequest();
}catch(e){
varxmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.open('GET','async_test.php',true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
xmlhttp.send();
}
//同步请求
functionsyncRequest(){
try{
varxmlhttp=newXMLHttpRequest();
}catch(e){
varxmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.open('GET','async_test.php',false);
xmlhttp.send();
alert(xmlhttp.responseText);
}