Ajax学习二 Ajax引擎对象中的方法和属性

Ajax引擎对象中的方法

abort()                    停止当前请求
getAllResponseHeaders()            作为字符串返回完整的headers
getResponseHeader("headerLabel")    作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])    设置未决的请求的目标 URL，方法，和其他参数
send(content)                发送请求
setRequestHeader("label", "value")    设置header(头信息)并和请求一起发送


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

 
1、使用Ajax请求服务器：

      是用Ajax中的方法实现

2、通过Ajax获取服务器发送的数据：
    
       是用Ajax的属性实现

 

setRequestHeader:

通常在HTTP协议里，客户端像服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，告诉服务器客户端要下载什么信息以及相关的参数。而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。 但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这是当我们需要修改或添加这些参数时就用到了

CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示,
当然还有其他编码方式,如：CONTENT-TYPE:multipart/form-data .

setRequestHeader方法只是为XMLHTTP添加或修改HTTP头提供的一个接口方法而已。

<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script>
    function createAjax(){//创建对象
        //window对象中有XMLHttpRequest存在就不是IE的老版本
      if (window.XMLHttpRequest) {
        request=new XMLHttpRequest();
        if (request.overrideMimeType) {
            request.overrideMimeType("text/xml");
        };
      }else if(window.ActiveXObject){   //window对象中有ActiveXObject属性存在就是低版本的IE
          var versons=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];

            for (var i = 0; i < versons.length; i++) {
                 try{
                     request=new ActiveXObject(versons[i]);
                     if (request) {
                         return request;
                     };
                 }catch(e){
                     request=false;
                 }
            }
      }         
 
     return request;
    }
 
    var ajax=null;//每次创建之前先初始化对象（保证每次创建的对象都是一个新的）

    function show(){//获取服务器发送的数据（响应）用ajax属性实现
      var conid=document.getElementById('con');
      ajax=createAjax();//创建对象
      ajax.onreadystatechange=function(){//状态改变的事件触发器
          if(ajax.readyState==4){//对象状态
              if(ajax.status==200){//服务器返回的状态码
                  var data=ajax.responseText;
                  alert(data);
                  conid.innerHTML=data;
              }else{
                  alert('请求失败');
              }
          }
      }
     //请求数据：用ajax方法实现
     ajax.open("post","server.php",true);
     // ajax.open("post","server.php?username=lisi&email=11111"+Math.random(),true);
     //上面的方式用post就必须加上下面这句，用get的话不用加。
     ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
     ajax.send("username=lisi&email=11111");//因为上面是post所以在这里传值
    }
    

</script>

<input type="button" value="request" onclick="show()">
<div style="height:300px;width:300px;background:yellow" id="con">
</div>