面试题201412——client 脚本化HTTP

作者：zccst




Ajax的缺点：
1.破坏浏览器后退按钮的正常行为。在动态更新页面后，用户无法回到前一个页面的状态，这是因为浏览器只能记下历史记录中的静态页面。
2.使用JavaScript作Ajax的引擎，JavaScript的兼容性和Debug本身就让人头大。




-------------------------基础知识分界线-----------------



XMLHTTPRequest的几个状态：
0  Uninitialized  初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1  Open  open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2  Send  Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3  Receiving  所有响应头部都已经接收到。响应体开始接收但未完成。
4  Loaded HTTP  响应已经完全接收。



本小结一共有几个知识点：
一、XMLHTTPRequest
详见本文

二、JSONP
参见：JSONP原理及实现
http://zccst.iteye.com/blog/2077570

三、





"response" 有几种属性,  不知道......... 应该是 responseText responseXML


一、XHR的属性：
　　1、readyState
　　当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState就是XHR请求的状态属性，它本身有5个属性值：(如下表)

0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4  描述一种"已加载"状态；此时，响应已经被完全接收。


　　2、responseText
　　responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1、2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4时(以加载)时，responseText包含了完整的响应信息。

　　3、responseXML
　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应。此时，Content-Type头部指定MIME(多功能网际邮件扩充协议)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

　　4、status
　　status属性描述了HTTP请求的状态代码，其类型为short类型。而且仅当readyState值为3或4时，status属性才可以用，否则，就会引发异常。注：鉴于status的属性值较多，此处列举两个重要的属性：200表示OK，一切正常；400表示Bad Request，请求出现语法错误。

　　5、statusText
　　statusText属性描述了HTTP状态代码文本，仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。


二、事件
　　onreadystatechange事件：XHR中的重要事件。当readyState值发生变化的时候，XHR对象都会激发一个onreadystatechange事件。其中，onreadystatechange属性接收一个EventListener值向该方法指示无论readyState何时发生改变，该对象都将激活。
　　XHR对象的方法
　　1、abort()方法
　　你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。
　　2、open()方法
　　你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。
　　3、send()方法
　　在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。
　　4、setRequestHeader()方法
　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。
　　5、getResponseHeader()方法
　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。
　　6、getAllResponseHeaders()方法
　　该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。




三、例子
使用XHR
varxhr=XHR();

//open方法创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
xhr.open("get","test.txt",true);
/*
第一个参数是请求方式,一般用get与post方法,与form标签的method类似
第二个参数是请求的URL
第三个参数是请求是同步进行还是异步进行,true表示异步调用了open方法仅仅是传递了参数而已
*/

xhr.send(null);//调用了send方法后才会发出请求//并且get方式发送请求时send参数是null
在服务器环境中执行上面的脚本,并且给一个php或asp脚本发送请求,会发现服务器端脚本其实会被执行

//PHP脚本
$fp=fopen("a.txt","wb");
fwrite($fp,"PHP文件在后台执行了");fclose($fp);
echo"返回内容!";
上面PHP脚本的返回内容不会直接在页面上显示出来,必需要用JS通过XHR对象接收

varxhr=XHR();
xhr.open("get","test.php",true);
xhr.onreadystatechange=callback;//在readystatechange事件上绑定一个函数//当接收到数据时,会调用readystatechange事件上的事件处理函数xhr.send(null);
functon callback(){
    //在这里面没有使用this.readyState这是因为IE下面ActiveXObject的特殊性
    if(xhr.readyState==4){//readyState表示文档加载进度,4表示完毕
        alert(xhr.reponseText);//responseText属性用来取得返回的文本
    }
}

abort取消当前请求

setRequestHeader 单独指定请求的某个http头如果已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。

getAllResponseHeaders  获取响应的所有http头每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。

getResponseHeader  从响应信息中获取指定的http头当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml",则这句话xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。




请求方式
GET请求

//JS
varxhr=XHR();
xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true);
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
        alert(xhr.responseText);
    }
};
xhr.send(null);//PHP
print_r($_GET);

POST请求

//JS
varxhr=XHR();
xhr.open("post","test.php",true);
xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
        alert(xhr.responseText);
    }
};
//比GET请求多了一步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//另外,数据是通过send方法发送的
xhr.send("qs=true&userName=abc&pwd=123456");//PHP
header("Cache-Control:no-cache,must-revalidate");//可以让浏览器不缓存结果print_r($_POST);

如果您觉得本文的内容对您的学习有所帮助，您可以微信：