AJAX Hacks 之HACK2. 使用Request对象与服务器进行数据传递

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

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的发送请求，处理响应的机制。

< <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>