AJAX实践之与服务器通信

【导读】本文介绍如何利用AJAX实现与服务器通信的功能，并给出代码及其比较。

首先看下看下相对简单些的——向服务器发送一个包含有名/值对的简单查询串，在这种情况下XHP即可以用GET也可以用POST。

GET
function doRequestUsingGET() {

　createXMLHttpRequest();
　var queryString = " GetAndPostExample? " ;

　queryString = queryString + createQueryString()+ 
" &timeStamp= " + new Date().getTime();

　xmlHttp.onreadystatechange = handleStateChange;

　xmlHttp.open( " GET " , queryString, true );

　xmlHttp.send( null );

} 
POST
function doRequestUsingPOST() {

　createXMLHttpRequest();
　var url = " GetAndPostExample?timeStamp= " + new Date().getTime();

　var queryString = createQueryString();
　xmlHttp.open( " POST " , url, true );

　xmlHttp.onreadystatechange = handleStateChange;

　xmlHttp.setRequestHeader( " Content-Type " , 
" application/x-www-form-urlencoded " ); 

　xmlHttp.send(queryString);

}

queryString就是名/值对的参数形式了（如name=LiLin&age=23），在调用OPEN方法中，当请求方法是用POST的时候为了确保服务器知道请求体中有请求参数，需要调用setRequestHeader，将Content-Type值设置为application/x-www-form-urlencoded.当然也可不放在请求体中（那就不要用POST啦！）

此时server处理：

import java.io. * ;

import java.net. * ;

import javax.servlet. * ;

import javax.servlet.http. * ;
public class GetAndPostExample extends HttpServlet {
　protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)

throws ServletException, IOException {
// Set content type of the response to text/xml 

response.setContentType( " text/xml " );
// Get the user's input 

String firstName = request.getParameter( " firstName " );

String middleName = request.getParameter( " middleName " );

String birthday = request.getParameter( " birthday " );
// Create the response text 

String responseText = " Hello " + firstName + " " + middleName

+ " . Your birthday is " + birthday + " . " 

+ " [Method: " + method + " ] " ;
// Write the response back to the browser 

PrintWriter out = response.getWriter();

out.println(responseText);
// Close the writer 

out.close();

　} 
　protected void doGet(HttpServletRequest request,
HttpServletResponse response)

throws ServletException, IOException {

// Process the request in method processRequest 

processRequest(request, response, " GET " );

　} 
　protected void doPost(HttpServletRequest request, 
HttpServletResponse response)

throws ServletException, IOException {

// Process the request in method processRequest 

processRequest(request, response, " POST " );

　} 

}

对get and post方法都用processRequest来处理。

要向服务器发送相关复杂的查询串，可以将模型变化为XML发送到server 。

client端：

function createXML() {

　var xml = " <pets> " ;
　var options = document.getElementById( " petTypes " ).childNodes;

　var option = null ;

　for ( var i = 0 ; i < options.length; i ++ ) {

option = options[i];

if (option.selected) {

　xml = xml + " <type> " + option.value + " <\/type> " ;

} 

　} 
　xml = xml + " <\/pets> " ;

　return xml;

} 
function sendPetTypes() {

　createXMLHttpRequest();
　var xml = createXML();

　var url = " PostingXMLExample?timeStamp= " + new Date().getTime();
　xmlHttp.open( " POST " , url, true );

　xmlHttp.onreadystatechange = handleStateChange;

　xmlHttp.setRequestHeader( " Content-Type " , 
" application/x-www-form-urlencoded " ); 

　xmlHttp.send(xml);

}