以傳統的傳送表單數據的方式開始，本節介紹使用post方法發送數據，與服務器進行通信，而在這個過程中不會出現頁面刷新現象。然後顯示服務器相應的信息。
頁面很簡單，就是一個表單，要求用戶輸入姓名、性別、國家或地區。輸入完畢用戶可以提交表單。（具體圖示見原文）
頁面的Html代碼如下：
“http://www.w3.org/TR/1999/REC-Html401–19991224/strict.dtd”>
“text/Javascript“ src=“/parkerriver/js/hack2.JS”>
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的發送請求，處理響應的機制。