Ajax Hacks-hack9 深入了解HTTP Response

HTTP响应头是描述性的信息，符合HTTP 1.1 协议规范，web服务器向请求端发送精确的页面或数据。如果你已经使用XMLHttpRequest对象编过程(在本章的前面讨论过)，你应该知道request.status属性是从服务器返回的响应状态码。它是用来检测HTTP响应状态的重要值。

装态值包括200(请求成功)、404(请求的URL不存在，或页面不存在)500(服务器内部错误)。

然而，你还想看到更多的其他优选请求的响应头信息，例如与响应相关的web服务器软件类型(服务器请求头)，或者响应的content类型(Content-Type)。本hack请求用户输入的一个URL。当用户点击输入框以外的部分时，浏览器会显示该URL的响应头信息。作为一个ajax应用，页面是不会出现刷新情况的。

请求对象方法只返回可用的响应头的一个子集，包括Content-Type, Date, Server,和Content-Length.

html代码如下:

“http://www.w3.org/TR/1999/REC-html401C19991224/strict.dtd”>

Find out the HTTP response headers when you “GET” a Web page

JavaScript:void%200>

Enter a URL:

::press tab when finished editing the

field::

Figure 1-13 shows the page in the Safari browser.

Figure 1-13. Scoping the response

程序预先使用http://www.parkerriver.com/s/sender?name=guest来填充该text。

当用户输入URL以后点击Tab键，或点击输入框外的部分时，输入框的onblur事件被激发。事件处理函数是getAllHeaders，该函数传递用户输入的RUL进入request对象。request对象向此URL发送请求，并向web页面返回的响应头。

下面的代码是文件hack7.js。显示代码以后，将解释一下如何显示服务器响应头信息。其余的可以参考本章其他hack。

var request;

var urlFragment=“http://www.parkerriver.com/s/sender?name=guest”;

function getAllHeaders(url){

httpRequest(“GET”,url,true);

}

//function for XMLHttpRequest onreadystatechange event handler function handleResponse( ){ try{ if(request.readyState == 4){ if(request.status == 200){ /* All headers received as a single string */ var headers = request.getAllResponseHeaders( ); var div = document.getElementById(“msgDisplay”; div.className=“header”; div.innerHTML=”

"+headers+"

“; } else { //request.status is 503 if the application isn‘t available; //500 if the application has a bug alert(request.status); alert(“A problem occurred with communicating between ”+ “the XMLHttpRequest object and the server program.”; } }//end outer if } catch (err) { alert(“It does not appear that the server is ”+ “available for this application. Please”+ “ try again very soon. //nError: ”+err.message);

}

}

/* Initialize a request object that is already constructed */

function initReq(reqType,url,bool){

try{

/* Specify the function that will handle the HTTP response */

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.send(null);

} catch (errv) {

alert(

“The application cannot contact the server at the moment. ”+

“Please try again in a few seconds.” );

}

}

/* Wrapper function for constructing a request object.

Parameters:

reqType: The HTTP request type, such as GET or POST.

url: The URL of the server program.

asynch: Whether to send the request asynchronously or not. */

function httpRequest(reqType,url,asynch){

//Mozilla-based browsers

if(window.XMLHttpRequest){

request = new XMLHttpRequest( );

} else if (window.ActiveXObject){

request=new ActiveXObject(“Msxml2.XMLHTTP”;

if (! request){

request=new ActiveXObject(“Microsoft.XMLHTTP”;

}

}

//the request could still be null if neither ActiveXObject

//initialization succeeded

if(request){

initReq(reqType,url,asynch);

} else {

alert(“Your browser does not permit the use of all ”+

“of this application‘s features!”;

}

}

令人感兴趣的部分是handleResponse函数。该函数调用request对象的getAllResponseHeaders方法，该方法返回所有的可用的响应头信息，预格式为string。开发者更喜欢这些值作为JSON格式返回，而不是作为一个单一的字符串返回。

为取得一个头信息，也可以使用request.getResponseHeader方法。例如request.getResponseHeader(“Content-Type”)可以得到响应头的Content类型：

接下来代码将取得div元素，并在其中显示头信息：

if(request.status == 200){ /* All headers received as a single string */ var headers = request.getAllResponseHeaders( ); var div = document.getElementById(“msgDisplay”; div.className=“header”; div.innerHTML=”

"+headers+"

“; }…

为能向信息显示提供css格式，代码设置了div的className属性，这个类已经预先定义了，代码如下：

div.header{ border: thin solid black; padding: 10%;

font-size: 0.9em; background-color: yellow}

span.message { font-size: 0.8em; }

以这样的方式，代码会动态地将一个div连向一个特定的CSS类，这个类是单独定义的。这种策略帮助DOM编程者描述区分。最后div的innerHTML属性被设置进返回头值里边。

欢迎大家阅读《Ajax Hacks-hack9 深入了解HTTP Respon…_jquery》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网(gaodaima.com)提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：Ajax Hacks-hack9 深入了解HTTP Respon_jquery