XHR详细讨论

2015-01-28

返回类型:

XMLHttpRequest 的详细属性

responseText:    服务器相应的主体信息,即http的body信息

responseXML: 对于大量的格式化文档,可以用XML来传输或交换,由后台程序把数据封装在XML文档中,js接收XML对象并解析

status:    服务器返回的状态码,例:200,成功

statusText: 服务器返回的状态码对应的文字描述,例如 200 ,OK中的OK

readyState: XMLHttpRequest 对象的自身状态码0-4

onreadystatechange: 事件属性绑定,当XMLHttpRequest对象的状态码发生变化是,激发的函数

 

HTTP的头信息的获取:

利用getResponseHeader(); 或者 getAllResponseHeaders(); 来获取

参数: 类型:'Content-Type','Date','Vary' 的等返回信息的值

注意:服务器集群时:

    Vary 指缓存时应该判断后面的因素

XHR详细讨论_xml

 

XMLHttpRequest 的详细方法:

open("请求方式",url,同步/异步);        

send(null/参数) 参数写法:k1=v1&k2=v2&kn=vn

setRequestHeader(key,value);        //设置请求头信息

Abort() 忽略,不要再进行下去,到此为止

getResponseHeader(): 获取响应的某个头信息

getAllResponseHeaders(): 获取响应的所有头信息

异步原理

状态值

  1. XHR对象刚被创建时

  2. open后为1,此时已经建立连接成功

  3. 接收头信息完毕后为2

  4.  

  5. 结束,断开连接后为4

ajax使用单线程实时插队的方法,没有使用多线程

异步不阻塞原理

 

 

Ajax实现无刷新页面注册:

script中代码:

function ajaxreg(){

//步骤1:收集表单的数据

    //步骤2:打开到后台服务器连接(POST连接)

    //步骤3:发送数据

    //步骤4:监听,回调等

    //1.制造XHR

    var xhr = createXHR();

    //2.打开POST连接

    xhr.open('POST','./AjaxReg.PHP',true);

    //4.绑定

    xhr.onreadystatechange = function(){

        if(this.readyState == 4)

            alert(this.responseText);

    }

    //3.收集表单数据

    var un= document.getElementsByName('username')[0].value;

    var em= document.getElementsByName('email')[0].value;

    //4.send

    //alert("username="+un+"&email="+em);

    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        //POST 必须加上这一句

    xhr.send("username="+un+"&email="+em);

    return false;

}

 

html代码:

<h1>ajax注册</h1>

<div id="regres"></div>

<form action="AjaxReg.php" method="post" target="regzone" οnsubmit="return ajaxreg();">

    <p>用户名:<input type="text" name="username" /></p>

    <p>邮件地址:<input type="text" name="email" /></p>

    <p><input type="submit" name="注册" /></p>

</form>

 

AjaxReg.PHP代码

<?php

print_r($_POST);

?>