javascript 脚本化的HTTP----ajax的基石

使用XMLHttpRequest的步骤

  1.创建一个XMLHttpRequest对象

  2.指定HTTP请求并向一个web服务器提交

  3.同步或异步地获取服务器的响应

获取请求对象

function createRequest(){

    try{

     request=new XMLHttpRequest();   

    }catch(tryMS){

       try{

       request=new ActiveXObject("Msxml2.XMLHTTP");    

       } catch(otherMS){

           try{

        request=new ActiveXObject("Microsoft.XMLHTTP");       

           }catch(failed){

       request=null;        

           }

       }

    }

  return request;  

}

提交一个请求

调用open()方法来指定所请求的URL以及该请求的HTTP方法.request.open("GET",url,false);

false表示同步响应,true是异步响应.还有第四,第五个可选参数,保存name,password.当一个需要授权的服务器获取一个URL时,就要用到这两个参数.open()并不实际的向web服务器发送请求.它只是保存自己的参数,等到稍后实际发送请求的时候再使用.再发送请求之前,必须设置所有需要的请求头部.

    request.setRequestHeader("User-Agent","XMLHttpRequest");

    request.setRequestHeader("Accept-Language","en");

    request.setRequestHeader("If-Modified-Since",lastRequestTime.toString());

注意:web浏览器自动为建立的请求添加相关的cookie.只有当想要想服务器发送一个假的cookie的时候,才需要显式的设置"Cookie"头部.

发送request.send(null);

获取一个同步响应

响应的处理用下面的代码,

if(request.status==200){

     if(request.getResponseHeader("Content-Type")=="text/xml"){

                  var doc=request.responseXML;

                  //add data parsed process

             }

}

处理一个异步响应

异步响应的处理代码

request.onreadystatuschange=function(){

   if(request.readyState==4){

       if(request.status==200){

               //parse the response data

             }

    }

}

readyState状态的解释:0,open()还没有调用;1,open()调用,send()没有调用;2,send()调用,但是服务器没有响应;3,正在从服务器接受数据;4,服务器响应完成.但是这个状态也是非标准的,只是用状态4是一种安全的做法.

安全限制上来讲,这个HTTP必须要有一个服务器,否则没法使用.

基本的GET工具

getText工具

Http.getText=function(url,callback){

   var request=createRequest();

   request.onreadystatechange=function(){

     if(request.readyState==4&&request.status==200){

   callback(request.responseText);

 }

   }

    resquest.open("GET",url);

request.send(null);

}

getxml工具

Http.getText=function(url,callback){

   var request=createRequest();

   request.onreadystatechange=function(){

     if(request.readyState==4&&request.status==200){

   callback(request.responseXML);

 }

   }

    resquest.open("GET",url);

request.send(null);

}

只获取头部的HTTP方法

Http.parseHeaders=function(request){

  var headerText=request.getAllResponseHeaders();

  var headers={};

  var ls=/^\s*/;

  var ts=/\s*$/;

  

  var lines=headerText.split("\n");

  

  for(var i=0;i<lines.length;i++){

    var line=lines[i];

if(line.length==0)continue;

var pos=line.indexOf(':');

var name=line.substring(0,pos).replace(ls,"").replace(ts,"");

var value=line.substring(pos+1).replace(ls,"").replace(ts,"");

headers[name]=value;  

  }

   return headers;

}

Http.getHeaders=function(url,callback,errorHandler){

   var request=createRequest();

   request.onreadystatechange=function(){

      if(request.readyState==4){

    if(request.status==200){

  callback(Http.parseHeaders(request));

}else{

   if(errorHandler)errorHandler(request.status,request.statusText);

   else callback(null);

}

  }

   }

       request.open("HEAD",url);

   request.send(null);

}

HTTP的post方法

使用post方式的时候,发送的信息有重要的价值,例如密码,个人账户,可做id的信息,有价值的个人资料.

它的发送方式与get有明显的 不同.

下面是示例代码:

Http.post=function(url,values,callback,errorHandler){

   var request=createRequest();

   request.onreadystatechange=function(){

     if(request.readyState==4){

   if(request.status==200){

     callback(http._getResponse(request));

   }else{

 if(errorHandler)errorHandler(request.status,request.statusText);

 else callback(null);

   }

 }

   }

    request.open("POST",url);

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

request.send(Http.encodeFormData(values));

};

Http.encodeFormData(data){

  var pairs=[];

  var regexp=/%20/g;

  for(var name in data){

    var value=data[name].toString();

var pair=encodeURIComponent(name).replace(regexp,"+")+"="+encodeURIComponent(value).replace(regexp,"+");

pairs.push(pair);

  }

  return pairs.join('&');

}

Http._getResponse=function(request){//解析不同类的返回数据

  switch(request.getResponseHeader("Content-type")){

    case "text/xml": return request.responseXML;

case "text/json":

case  "text/javascript":

case   "application/javascript":

case   "application/x-javascript": return eval(request.responseText);

default : request.responseText;

  }

}

设置请求过期:每一次想服务器发送信息的时候都有可能失败,当失败的时候会对后续的发送有影响.设置一个过期时间会对这个问题有很大的帮助.

Http.get=function(url,callback,options){

   var request=createRequest();

   var n=0;

   var timer;

   if(options.timeout){

     timer=setTimeout(function(){

 request.abort();

 if(options.timeoutHandler)options.timeoutHandler(url);

   },options.timeout); 

   }

    request.onreadystatechange=function(){

  if(request.readyState==4){

   if(timer)clearTimeout(timer);

   if(request.status==200){

     callback(Http._getResponse(request));

   }else {

 if(options.errorHandler)options.errorHandler(request.status,request.statusText);   

  else callback(null);  

}

  }else if(options.progressHandler){

    options.progressHandler(++n);

  }

}

    var target=url;

if(options.parameters)target+="?"+Http.encodeFormData(options.parameters);

request.open("GET",target);

request.send(null);

};

ajax的示例代码可以通过上面的代码自行补充.