DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax Hacks-hack9 深入了解HTTP Response
Ajax Hacks-hack9 深入了解HTTP Response
編輯:AJAX詳解     
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-Html401–19991224/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屬性被設置進返回頭值裡邊。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved