xmlHttp基础

XmlHttp是什么? 
    最通用的定义为:XmlHttp是一套可以在JavaScript、Vbscript、Jscript等脚本语言中通过http协议传送或接收数据的一套API。 
    来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。 


XmlHttp对象参考: 
属性 
    readyState用来记录当前请求的状态,只读。 
        0(未初始化)   对象已创建,但是尚未初始化(尚未调用open方法) 
        1(初始化)     对象已初始化(调用了open方法),尚未调用send方法 
        2(发送数据)   send方法已调用,但是当前的状态及http头未知 
        3(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误 
        4(完成)       数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
        当readyState发生改变时,调用onreadystatechange方法,onreadystatechange需要自己定义。 
    status长整形,此属性只读,返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。 
    responseText 将响应信息作为字符串返回.只读 
    responseXML  将响应信息格式化为Xml Document对象并返回,只读 
方法 
    abort 取消当前请求 
        XMLHttpRequest.abort(); 
    open  创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码) 
        XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); 
        参数 
            bstrMethod http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。 
            bstrUrl 请求的URL地址,可以为绝对地址也可以为相对地址。 
            varAsync[可选] 布尔型,指定此请求是否为异步方式,默认为true。 
            bstrUser[可选] 如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。 
            bstrPassword[可选] 验证信息中的密码部分,如果用户名为空,则此值将被忽略。 
        调用open方法后,会将readyState修改为1。 
    setRequestHeader 单独指定请求的某个http头 
        XMLHttpRequest.setRequestHeader(bstrHeader, bstrValue); 
        参数 
            bstrHeader 字符串,头名称(可以是自定义key)。 
            bstrValue 字符串,值。 
        send  发送请求到http服务器并接收回应 
        XMLHttpRequest.send(varBody); 
        参数 
            varBody 欲通过此请求发送的数据。 
        调用send方法后,会先调用onreadystatechange方法,此时readyState状态为1,然后会已经进程将readyState修改为2、3、4 
        一般情况下,使用Ajax提交或者获取参数可以采用GET、POST方式,使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。 
        例如 : 
            var url = "login.jsp?user=XXX&pwd=XXX"; 
            xmlHttpRequest.open("GET",url,true); 
            xmlHttpRequset.send(); 
      此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。 
      例如: 
            xmlHttpRequest.open("POST","login.jsp",true); 
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); 
            xmlHttpRequest.send("user="+username+"&pwd="+password); 
      需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。 

 

面举个完整的例子: 
客户端js: 
function xmlHttpAjax(url,para,async){
  var xmlHttpReq;
  if(window.XMLHttpRequest){ 
    xmlHttpReq=new XMLHttpRequest();
  }else if(window.ActiveXObject){ 
    xmlHttpReq=new ActiveXObject("MSXML2.XMLHTTP.3.0");
  }else{ 
    alert('Javascript not enabled or MSXML not available'); 
  }
  xmlHttpReq.onreadystatechange=function(){
    if(xmlHttpReq.readyState==4){ 
      if(xmlHttpReq.status==200){ 
        responseText=xmlHttpReq.responseText; 
      }else{ 
        alert('status:'+xmlHttpReq.status); 
      }
    }
}; 
xmlHttpReq.open('POST',url,async);
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); 
xmlHttpReq.send(para); 
/* 
* xmlHttpReq.open('GET',url,async); 
* xmlHttpReq.send(); 
*/

posted @ 2010-03-05 15:43  小肖程序  阅读(460)  评论(0编辑  收藏  举报