javascript与服务器2

一, 通过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请求对象以后就可以使用前面讨论过的方法来发送请求,接收响应. 请方式基本一致.