面试题201412——client 脚本化HTTP


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);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>