XMLHttpRequest 使用概括

***********************************************
XMLHttpRequest对象初始化:
***********************************************
<script language="javascript">
var http_request=false;
//IE浏览器
http_request=new ActiveXObject("Msxml2.XMLHTTP");
http_request=new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla浏览器
http_request=new XMLHttpRequest();
</script>

***********************************************
XMLHttpRequest对象的方法:
***********************************************
方法 描述
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader("headerLabel") 作为字符串返回单个的headers
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 设置未决的请求的目标URL,方法和其它参数
send(content) 发送请求
setRequestHeader("laber","value") 设置header并和请求一起发送

***********************************************
XMLHttpRequest对象的属性:
***********************************************
属性 描述
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0=未初始化;1=读取中;2=已读取;3=交互中;4=完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码,如404="文件未找到";200="成功"
statusText 服务器返回的状态文本信息

************************************************

一个完整的Ajax调用流程
************************************************
A、初始化对象并发出XMLHttpRequest请求

B、指定响应处理函数
http_request.onreadystatechange=processRequest;//这个processRequest是函数名,是当从服务器返回数据后触发的事件

C、发出HTTP请求
http_request.open('GET','http://www.163.com/1.asp',true);
http_request.send(null);
//如果第一参数是post则还要加上下面这条语句
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

D、处理服务器返回的信息
在第二步已经指定了响应处理函数,这一步,来看看这个响应处理函数都应该做什么
function processRequest {
//检查XMLHttpRequest对象的readyState值,判断请求目前的状态。
if(http_request.readyState==4{
//信息已经返回,可以开始处理
}else{
//信息还没有返回,等待
}
//判断返回的http状态码,确定返回的页面没有错误。
if(http_request.status==200{
//页面正常,可以开始处理信息
}else{
//页面有问题
}
}
XMLHttpRequest对成功返回的信息有两种处理方式:
responseText:将传回的信息当字符串使用;
responseXML:将传回的信息当XML文档使用,可以用DOM处理.

 

<script language="javascript">
var http_request=false;
function send_request(url){//初始化、指定处理函数、发送请求的函数
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//设置MiME类别
http_request.overideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!http_request){//异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystateChange=processRequest;
//确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processRequest(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已经成功返回,开始处理信息
alert(http_request.responseText);
}else{//页面不正常
alert("您所请求的页面有异常.");
}
}
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2013-10-10 17:50  Angkor--:--  阅读(340)  评论(0编辑  收藏  举报