一, 通过IE建立XMLHTTP请求
这种请求方式源自与微软创建了XMLHTTP请求对象,只要用户的机器上安装了MSXML就可以发送XMLHTTP请求来创建客户端和服务器端的通信, XMLHTTP请求本质上是添加了额外的用于发送和接收XML代码的功能的普通http请求. 要在IE中创建XMLHTTP请求对象,需要使用ActiveXObject对象.
1. 建立请求对象
var oRequest = new ActiveXObject("Microsoft.XMLHTTP");
发展至今,XMLHTTP请求有了多个版本, 为了使用最新版本的XMLHTTP请求对象, 我们建立如下代码:
function createXMLHTTP(){
var arr =["MSXML2.XMLHTTP5.0", "MSXML2.XMLHTTP4.0",
"MSXML2.XMLHTTP3.0", "MSXML2.XMLHTTP",
"Microsoft.XMLHTTP" ]
for(var i=0; i<arr.length; i++){
try{
var oRequest = new ActiveXObject(arr); //为确保用户使用的是最新版本的XMLHTTP请求对象而特殊处理
return oRequest;
}
catch(oError){
//处理错误
}
}
throw new Error("MSXML is not installed on your system."); // 如果系统没有安装MSXML,则抛出异常
}
var oRequest =createXMLHTTP(); //初始化一个XMLHTTP对象,用于同步或异步向服务器发送消息,并接收返回结果
2. 通过open方法,建立与服务器的通信地址URL,并指定是同步或异步方式建立
oRequest.open("get","example.txt",false) //参数说明, 1.请求类型 2.URL 3.是否异步发送请求,false =同步, true=异步
3. 建立请求后,发送请求,通过触发onreadystatechange事件获取返回结果
oRequest.send(null);
send方法必须接收一个参数,表示发送时附加的请求参数, 如果是get请求 设置为null,因为参数可以直接附加到URL后面,而如果是post请求则需要使用如:name1=value1&name2=value2形式显示的设置参数.
发送请求后,如果是同步发送的话,javascript解释程序则会等待请求返回,返回响应后,status特性则会放入请求的HTTP状态(200 是正常,404表示没有找到页面).同时,statusText特性中放入描述状态的信息, 可以通过responseText接收服务器返回的文本.如果返回的是xml,还要在reponseXML特性中放入一个由返回的文本
构造的XML DOM对象.
例如:
var oRequest =createXMLHTTP();
oRequest.open("get","example.txt",false) //同步请求
oRequest.send(null); //发送get请求
alert("Status is "+ oRequest.status +"( "+ oRequest.statusTest +")"); //显示状态号,状态信息
alert("Response text is :"+ oRequest.responseText); //获取服务器返回的文本
如果请求的是一个xml,则要通过responseXML来读取.
oRequest.responseXML.documentElement.tagname; //获取从服务器返回的xml文档元素的标签名
以上例子必须在服务器上运行才能返回正确的结果,因为xml http对象通过服务器报告mime类型来判读返回的内容是否为xml文档.
前面通过同步发送请求获取服务器端响应来获取数据,如果是异步发送的话,还必须使用onreadystatechange事件,通过处理readyState特性是否等于4来判断 服务器是否请求完毕. 因为reponse特性在请求完毕前是不可用的.所以我们改写上面的例子,以异步发送请求:
var oRequest =createXMLHTTP();
oRequest.open("get","example.txt",true) //异步请求
oRequest.onreadystatechange = function(){
if(oRequest.readyState ==4)
{
alert("Status is "+ oRequest.status +"( "+ oRequest.statusTest +")"); //显示状态号,状态信息
alert("Response text is :"+ oRequest.responseText); //获取服务器返回的文本
}
}
oRequest.send(null); //发送get请求
以上顺序不可颠倒, 当异步发送一个请求以后, 就会触发onreadystatechange事件, 通过readystate状态来判断请求是否结束并返回了数据.
当然我们也可以通过调用abort()方法来取消请求,如:
var oRequest =createXMLHTTP();
oRequest.open("get","example.txt",true) //异步请求
oRequest.onreadystatechange = function(){
if(oRequest.readyState ==3){
oRequest.abort(); //因为请求还没完成就终止了, 所以下面就不会弹出提示框.
}
else if(oRequest.readyState ==4)
{
alert("Status is "+ oRequest.status +"( "+ oRequest.statusTest +")"); //显示状态号,状态信息
alert("Response text is :"+ oRequest.responseText); //获取服务器返回的文本
}
}
oRequest.send(null);
4. 可利用的http首部
每个HTTP请求发送时都包含一个HTTP首部,这个首部对用户来说是隐藏,但对于开发人员来说却是一个很有利用价值的东西. 我们可以通过设置HTTP首部来发送一些信息,在服务器处理后,又可以把这个首部发送回来,从而达到client和server之间的交互.
前面我们建立了XMLHTTP请求对象, 其实该对象还有一些方法用于设置或获取HTTP首部信息.
getAllResponseHeaders() 用于返回所用响应的HTTP首部信息字符串, 它看起来如下:
Date: Sun,14 Nov 2009 20:10:00 GMT
Server: Apache/1.3 (Unix)
Vary:Accept
X-Powered-By:PHP/4.3.8
Connection:close
Content-Type: text/html;charset=iso-8859-1;
从该首部信息中,我们就可以看出,使用的是什么服务器,是否支持php等.如果来获取特定的信息,如下:
var sDate = oRequest.getResponseHeader("Date"); //获取日期信息
向Http首部设置自己的信息
oRequest.setRequestHeader("name","XX");
oRequest.setRequestHeader("age",18);
二. 通过Mozilla建立XMLHTTP请求
由于IE的XMLHTTP请求对象获得了大多数web开发人员的青睐,所以其他浏览器的开发人员加以效仿, 而Mozilla是第一个完成这个任务的,它创建了XMLHttpRequest请求对象. 与IE有略微的区别,行为完全与微软的版本相同, 后来Safari和Opera复制了Mozilla的实现,也创建了自己的XMLHttpRequest对象来建立XMLHTTP请求.
Mozilla中建立XMLHTTP请求的方式如下:
var oRequest = new XMLHttpRequest();
三. 创建统一的XMLHTTP请求对象
为了建立起一个统一的XMLHttpRequest对象我们封装成一个函数. 这样方便调用.
function createXMLHttpRequest(){
if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) { //如果是微软的话,则需要复杂处理,其他浏览器直接创建XMLHttpRequest对象来创建XMLHTTP请求.
function XMLHttpRequest() {
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oRequest = new ActiveXObject(arrSignatures);
return oRequest;
} catch (oError) {
//ignore
}
}
throw new Error("MSXML is not installed on your system.");
}
}
else
return new XMLHttpRequest();
}
}
var xmlHttp=createXMLHttpRequest(); //这样就创建了一个统一的XMLHTTP请求对象
创建XMLHTTP请求对象以后就可以使用前面讨论过的方法来发送请求,接收响应. 请方式基本一致.
