ajax|request|对象|服务器|数据AJAX Hacks 之HACK2. 使用Request对象与服务器进行数据传递 以传统的传送表单数据的方式开始，本节介绍使用post方法发送数据，与服务器进行通信，而在这个过程中不会出现页面刷新现象。然后显示服务器相应的信息。 function setQueryString(){ 将表单中的数据存入queryString后，就可以通过http post向服务器发送请求了。接下来看一下这部分的代码。如前所述，提交表单时，调用setQueryString函数以后，接下来将调用函数sendData()： var request; //event handler for XMLHttpRequest /* Initialize a Request object that is already constructed */ /* Wrapper function for constructing a Request object. 函数httpRequest()用来检查客户的浏览器的request对象的类型。其中调用了函数initReq()，两者的参数是相同的。 代码request.onreadystatechange=handleResponse;用来指定处理响应的函数。稍后将介绍这个函数。接下来调用request对象的open()方法，为对象发送请求做准备。 request.setRequestHeader("Content-Type", 如果使用queryString的值作为参数，send方法就形如：send("firstname=Bruce&lastname=Perry&gender=M&country=USA"); 处理结果 //event handler for XMLHttpRequest 读者需要重点理解ajax的发送请求，处理响应的机制。
页面很简单，就是一个表单，要求用户输入姓名、性别、国家或地区。输入完毕用户可以提交表单。（具体图示见原文）
页面的HTML代码如下：
“http://www.w3.org/TR/1999/REC-html401–19991224/strict.dtd”>
“text/javascript“ src=“/parkerriver/js/hack2.js”>A Few Facts About Yourself...
其中 用来加载js文件。submit按钮将调用setQueryString()和sendData()这两个函数。他们的作用分别是取得并设置请求的数据格式、传送数据到服务器。hack2.js 文件中有两个函数的完整实现。下面的代码是函数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.
当表单的元素个数发生变化时，函数也不必作出修改。
var queryString; //用来保存表单数据
function sendData(){
setQueryString();
var url=“http://www.parkerriver.com/s/sender”;
httpRequest(“POST”,url,true);
}
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
}
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);
}
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!”;}
}
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并发送请求的代码如下：
“application/x-www-form-urlencoded; charset=UTF-8”;
request.send(queryString);
发送完请求数据后，接下来要做的就是为用户显示结果了。这就是函数handleResponse()所要做的事情了（不要忘记函数initReq()中的这句：request.onreadystatechange=handleResponse;）。当request对象的readyState属性为4时，表示操作已经完成，然后检查一下HTTP 响应状态是不是200。该值表示HTTP请求成功。接下来弹出窗口用来显示响应结果responseText。这显然有些唐突，但我认为这样比较简单，相对那些功能复杂的例子来说更适合初学者。
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 Hacks 之HACK2. 使用Request对象与服务器进行数据传递
80酷酷网 80kuku.com
