Ajax ! XmlHttpRequest
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://blackanger.blog.51cto.com/140924/22388 |
一.创建XmlHttpRequest对象.
在使用XmlHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XmlHttpRequest对象,由于XmlHttpRequest不是一个W
创建一个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
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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>
注意引号…否则会出错. 本文出自 “{ :Alex Space => " Ruby Notes " }” 博客，请务必保留此出处http://blackanger.blog.51cto.com/140924/22388 本文出自 51CTO.COM技术博客 |
blackanger
博客统计信息
热门文章
最新评论
友情链接
