Ajax Hack 之hack 13 在text或textarea裡顯示伺服器資訊

ajax|伺服器|顯示 Ajax Hack 之hack 13 在text或textarea裡顯示伺服器資訊

本hack講的是不重新整理頁面顯示伺服器資訊。

使用者可以通過輸入text和伺服器組件互動而不用每次都等待頁面的重新整理。一個典型的例子就是拼字檢測或自動完成field[Hack #78]。使用request 對象作為媒介，伺服器組件可以和使用者之間即時互動。

本hack顯示一個自動的伺服器響應，響應無重新整理的顯示在text中。本hack是[Hack #12]的擴充，該hack使用request對象將使用者提交的資料傳送給伺服器組件。

本hack擷取使用者提交的資訊，並將統計的結果顯示在相同的標籤裡邊。你也可以使用client-side JavaScript完成相同的工作，當然，為了證明某個伺服器組件做了這個工作，本hack還顯示了伺服器的一些資訊。

圖2-2 顯示了初始頁面

圖2-3顯示了輸入資訊以後按tab後的結果

下面是頁面的html代碼。引入了js檔案hacks_2_1.js。

“http://www.w3.org/TR/2000/REC-xhtml1–20000126/DTD/xhtml1-strict.dtd”>

Get stats from textareas and textfields using Ajax

javascript:void%200>

Enter a few words for submitting to our server:

Enter a phrase for submitting to our server: <br/><br />

上一個hack講的是如何無重新整理地提交使用者資訊。換句話說，在使用者鍵入一些資訊並按tab按鈕或點擊其他地區後，text裡邊的資料就被傳送給了伺服器。

onblur事件將調用getInfo( )函數，將text中的資訊作為參數傳遞。

完整的代碼在hack12裡邊，在這裡就不再完整列舉了。下面將getInfo( )函數和handleResponse( )函數作為重點介紹一下。

function getInfo(obj){

if (obj == null ) { return; }

formObj=obj;

formObjTyp =obj.tagName;

if(formObjTyp "input" || formObjTyp "INPUT"){

formObjTyp = formObjTyp " "formObj.type;

}

formObjTyp = formObjTyp.toLowerCase( );

var url = “http://www.parkerriver.com/s/webforms?objtype=”+

encodeURIComponent(formObjTyp)+“&val=”+

encodeURIComponent(obj.value);

httpRequest(“GET”,url,true);

}

這個函數將使用者鍵入的資訊作為val參數傳遞給伺服器組件。此外obj參數持有的是text對象，用來取得鍵入的資訊。這是一個DOM對象，如HTMLInputElement或HTMLTextAreaElement

即時伺服器訊息傳遞

伺服器程式取得使用者鍵入的資訊，然後將統計的結果返回。為了確定響應資訊，伺服器返回的資訊的格式是JSON格式[Hack #7]。JSON是一種很容易處理的XML檔案格式。

返回的資料也可以作為一個簡單的字串。使用JSON格式只是作者的個人愛好而以。不過確實很容易使用。

下面的代碼是一個伺服器返回的JSON檔案，如果使用者在textarea裡鍵入了55個詞：

{

Form_field_type: “textarea”,

Text_length: “385”,

Word_count: “55”,

Server_inf “Apache Tomcat/5.0.19”

}

這段代碼描述了一個有四個不同屬性的js對象：Form_field_type, Text_length,Word_count, 和Server_info. 下面的代碼也顯示了如何處理這個對象的每個屬性。接著heack取得這一伺服器響應資訊，並將它插入到textarea裡邊。

handleResponse( )函數：

//event handler for XMLHttpRequest

function handleResponse( ){

try{

if(request.readyState == 4){

if(request.status == 200){

var resp = request.responseText;

if(resp != null){

var func = new Function(“return ”+resp);

var objt = func( );

if(formObjTyp == “textarea”{

if(formObj != null){

formObj.value = objt.Form_field_type +

“ character count: ”+objt.Text_length+

“\\nWord count: ”+

objt.Word_count+“\\nServer inf ”+

objt.Server_info;

}

} else if(formObjTyp == “input text”{

if(formObj != null){

formObj.value = objt.Form_field_type +

“ # characters: ”+objt.Text_length+

“ Word count: ”+objt.Word_count; }

}

}

} else {

//request.status is 503

//if the application isn‘t available;

//500 if the application has a bug

alert(

“A problem occurred with communicating ”+

“between the XMLHttpRequest object and ”+

“the server program.”;

}

}//end outer if

} catch (err) {

alert(err.name);

alert(“It does not appear that the server ”+

“is available for this application. Please”+

“ try again very soon. \\nError: ”+err.message);

}

}

代碼以文字格式設定取得響應資訊。因為文本的格式是JSON（作為js的對象），代碼使用了這一特殊的技術在hack7裡邊。建構函式將text作為一個js對象返回。在這個例子裡，objt變數指的是伺服器組件的響應，使用傳遞對象方法，你可以使用objt.Server_info來取得伺服器資訊。

下面的代碼就是將響應資訊作為一個對象返回：

var resp = request.responseText;

var func = new Function(“return ”+resp);

//call the function and return the object to which

//the objt variable now points

var objt = func( );

下面的代碼是將資訊插入到textarea裡邊。

if(formObjTyp == "textarea"){

if(formObj!= null){

formObj.value = objt.Form_field_type +

“ character count: ”+objt.Text_length+

“\\nWord count: ”+

objt.Word_count+“\\nServer inf ”+

objt.Server_info;

}

}

圖2-3顯示了結果。

你可以訪問 textarea，使因為這是一個頂級JavaScript變數，formObj指向了它。代碼的關鍵之一是設定textarea或text的值。

當伺服器發資訊給textarea而不是text時，會包括換行(\\n in JavaScript)，因為textarea能顯示更多文本。而text不能包含分行符號，因為text只有一行。

<