AJAX Hacks 之HACK2. 使用Request對象與伺服器進行資料傳遞

ajax|request|對象|伺服器|資料 AJAX Hacks 之HACK2. 使用Request對象與伺服器進行資料傳遞

以傳統的傳送表單資料的方式開始，本節介紹使用post方法發送資料，與伺服器進行通訊，而在這個過程中不會出現頁面重新整理現象。然後顯示伺服器相應的資訊。

頁面很簡單，就是一個表單，要求使用者輸入姓名、性別、國家或地區。輸入完畢使用者可以提交表單。（具體圖示見原文）

頁面的HTML代碼如下：
“http://www.w3.org/TR/1999/REC-html401–19991224/strict.dtd”>
“text/javascript“ src=“/parkerriver/js/hack2.js”>

A Few Facts About Yourself...

javascript:void%200>
<"setQueryString();sendData();return false">

First name:

Last name:

Gender:

Country of origin:

Send Data

其中 用來載入js檔案。submit按鈕將調用setQueryString()和sendData()這兩個函數。他們的作用分別是取得並佈建要求的資料格式、傳送資料到伺服器。hack2.js 檔案中有兩個函數的完整實現。下面的代碼是函數setQueryString()：

function setQueryString(){

//initialize the top-level variable; also reset the variable to cover when

//the user clicks multiple times

queryString=“”;

var frm = document.forms[0];

var numberElements = frm.elements.length;

for(var i = 0; i < numberElements; i++) {

if(i < numberElements-1) {

queryString = frm.elements[i].name"="+frm.elements[i].value+"&";

} else {

queryString = frm.elements[i].name"="+frm.elements[i].value;

}

}

}

這個函數的功能簡單來說就是取得form中每個輸入元素的值，將他們以一定的格式儲存到queryString變數中。其格式形如：firstname=Bruce&lastname=Perry&gender=M&country=USA.

當表單的元素個數發生變化時，函數也不必作出修改。

將表單中的資料存入queryString後，就可以通過http post向伺服器發送請求了。接下來看一下這部分的代碼。如前所述，提交表單時，調用setQueryString函數以後，接下來將調用函數sendData()：

var request;

var queryString; //用來儲存表單資料

function sendData(){

setQueryString();

var url=“http://www.parkerriver.com/s/sender”;

httpRequest(“POST”,url,true);

}

//event handler for XMLHttpRequest

function handleCheck(){

if(request.readyState == 4){

if(request.status == 200){

alert(request.responseText);

} else {

alert(“A problem occurred with communicating between the XMLHttpRequest object and the server program.”;

}

}//end outer if

}

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

function initReq(reqType,url,bool){

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

request.onreadystatechange=handleCheck;

request.open(reqType,url,bool);

request.setRequestHeader(“Content-Type”,

“application/x-www-form-urlencoded; charset=UTF-8”;

request.send(queryString);

}

/* 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

//initializations succeeded

if(request){

initReq(reqType,url,asynch);

} else {

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

“of this application‘s features!”;}

}

函數httpRequest()用來檢查客戶的瀏覽器的request對象的類型。其中調用了函數initReq()，兩者的參數是相同的。

代碼request.onreadystatechange=handleResponse;用來指定處理響應的函數。稍後將介紹這個函數。接下來調用request對象的open()方法，為對象發送請求做準備。

The code can set any request headers after calling open(). In our case, we have to create a Content-Type header for a POST request.

設定Headers

在open函數調用後，代碼將設定request haders。在本例中，我們將為post請求建立一個Content-Type header

注意：設定好的header是良好的習慣。

設定headers並發送請求的代碼如下：

request.setRequestHeader("Content-Type",

“application/x-www-form-urlencoded; charset=UTF-8”;

request.send(queryString);

如果使用queryString的值作為參數，send方法就形如：send("firstname=Bruce&lastname=Perry&gender=M&country=USA");

處理結果

發送完請求資料後，接下來要做的就是為使用者顯示結果了。這就是函數handleResponse()所要做的事情了（不要忘記函數initReq()中的這句：request.onreadystatechange=handleResponse;）。當request對象的readyState屬性為4時，表示操作已經完成，然後檢查一下HTTP 響應狀態是不是200。該值表示HTTP請求成功。接下來快顯視窗用來顯示響應結果responseText。這顯然有些唐突，但我認為這樣比較簡單，相對那些功能複雜的例子來說更適合初學者。

//event handler for XMLHttpRequest

function handleResponse(){

if(request.readyState == 4){

if(request.status == 200){

alert(request.responseText); //彈出請求響應的資料

} else {

alert(“A problem occurred with communicating between ”+

“the XMLHttpRequest object and the server program.”;

}

}//end outer if

}

讀者需要重點理解ajax的發送請求，處理響應的機制。

<