Ajax ! XmlHttpRequest
一
.
创建
XmlHttpRequest
对象
.
在使用
XmlHttpRequest
对象发送请求和处理响应之前
,
必须先用
JavaScript
创建一个
XmlHttpRequest
对象
,
由于
XmlHttpRequest
不是一个
W 3C
的标准
,
所以可以采用多种方式创建
XmlHttpRequest
对象
.IE
把
XmlHttpRequest
实现为一个ActiveX
对象,
其他浏览器如Firefox
把它实现为一个javascript
对象.
由于存在这些差别,JavaScript
代码必须包含有关逻辑,
从而使用ActiveX
技术或者使用本地JavaScript
来创建
XmlHttpRequest
实例
.
创建一个
XmlHttpRequest
对象的例子
:
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
在创建
XmlHttpRequest
对象的时候
,
我们不需要判断浏览器属于哪种类型
,
只要判断浏览器是否提供对
ActiveX
对象的支持就行了
,
如果支持
,
则使用
ActiveX
来创建
XmlHttpRequest
对象
,
否则就用本地
javascript
来创建
XmlHttpRequest
对象
.
二
. XmlHttpRequest
对象的方法和属性
.
方法
:
1.void open(String method,String url,Boolean asynch,String username,String password)
这个方法会建立对服务器的调用
.
这是初始化请求的纯脚本方法
.
它有两个必须的参数
(
提供调用的特定方法
get,post,put
等
,
还要提供调用资源的
URL
),
还有
3
个可选参数
(
传递一个
boolean
值
,
指示这个调用是异步还是同步
,
默认为
true,
表示异步
,
我们学的就是异步
,
所以用默认就行
,
但某种情况下设置为
false
是可用的
,
比如验证用户信息
,
后两个参数允许你指定一个特定的用户名和密码
).
2.void send(content)
.
这个方法具体向服务器发出请求
.
如果请求声明为异步
,
这个方法立即返回
.
否则就会等到收到响应为止
.
可选参数可以是
DOM
对象
,
输入流
,
或是字符串
.
传入这个方法的内容会作为请求体的一部分发送
.
3.void setRequestHeader(String header,String value)
设置请求头
.
必须放在
open()
方法后
.
4.void abort();
停止请求
.
5.String getAllResponseHeaders()
得到所有响应头
.
6. String getAllResponseHeader(String header)
得到指定的响应头
属性
:
Onreadystatechange
à
每个状态改变时都会触发这个事件处理器
.
通常会调用一个
javascript
函数
.
readyState
à
请求的状态
,
有
5
个可能取值
:0=
未初始化
,1=
正加载
,2=
已加载
,3=
交互中
,4=
完成
.
responseText
à
服务器的响应
,
表示为一个串
responseXml
à
服务器的响应
,
表示为一个
XML,
这个对象可以解析为一个
DOM
对象
status
à
服务器的
HTTP
状态码
.(200,404
等
)
statusText
à
HTTP
状态码的相应文本
.(OK,NOT FOUND
等
)
三
.
交互示例
.
1.
一个客户端事件触发一个
Ajax
事件
.
如有如下代码
:
<input type=”text” d=”email” name=”email” onblur=”validateEmail()”;>
2.
创建一个
XmlHttpRequest
的实例
,
使用
open()
方法建立调用
,
并设置
URL
以及希望的
HTTP
方法
(get,post
等
),
请求实际上是通过
send
方法调用触发
.
可能的代码如下
:
var xmlHttp;
function validateEmail(){
var email=document.getElementById(“email”);
var url = “validate?email=”+escape(email.value);
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open(“GET”,url);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
3.
向服务器做出请求
.
可能调用
servlet
等任何服务器端技术
.
4.
服务器可以做你想做的事
,
包括访问数据库
,
或者是一个系统
5.
请求返回到浏览器
.Content-Type
设置为
text/html----XmlHttpRequest
对象只能处理
text/html
类型的结果
.
你可以设置头字段
,
确保浏览器不在本地缓存结果
.
response.setHeader(“Cache-Control”,”no-cache”);
response.setHeader(“Pragma”,”no-cache”);
6.
这个示例中
,
XmlHttpRequest
对象配置为处理返回时要调用
callback()
函数
.
这个函数会检查
XmlHttpRequest
对象的
readyState
属性
.
然后查看服务器返回的状态码
.
如果正常
,
则回调函数
callback()
会在客户机上做点有意思的事
.
例如
:
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//do something…
}
}
}
四
.GET
和
POST
当从服务器获取数据时用
GET,
而改变服务器数据的时候用
POST.
五
.
远程脚本
(remote scripting)
远程脚本是一种远程过程调用类型
.
避免刷新页面
.
实现远程脚本的方法通常是将脚本和一个
IFrame
结合
,
以及有服务器返回
JavaScript,
然后在浏览器中运行这个
javascript.
可以用远程脚本来实现类似
Ajax
的无刷新功能
(
在
XmlHttpRequest
问世之前
).
六
.
如何发送简单请求
前面已有简单步骤
,
下面是一个示例
:
<!DOCTYPE html PUBLIC “-//W 3C //DTD XHTML 1.0 Strict//EN”
“[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]”>
<html xmlns=”[url]http://www.w3.org/1999/xhtml[/url]”>
<head>
<title>Simple XmlHttpRequest</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open(“GET”,”SimpleRequest.xml”,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert(“The server replied with:”+ xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form>
<input type=”button” value=”Start Basic Asynchronous Request” />
</form>
</body>
</html>
注意引号
…
否则会出错
.