AJAX实践之与服务器通信(1) -站长中国-中国站长门户从这里开始全面了解中国站长

AJAX实践之与服务器通信(1)

　 2007年11月17日04:06:47　评论(0条) 字体:[大中小]
相关热点：通信服务器实践 var // the xml response POST

首先看下看下相对简单些的——向服务器发送一个包含有名/值对的简单查询串，在这种情况下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);}

createXML方法无非就是将内容以DOM的样式存到var xml（变量）里。有时也可能出现client直接将本地的一个XML文件直接以DOM（当然可以edit）的样式传送。(也放这个时个的Content-Type应该为text/xml了！)这时可能要用到ActiveXObject("MSXML2.DOMDocument.3.0")这样一个控件了。

关于这个控件有个方法可以在各broswer中通用的JS代码：

// ------------------------------------------------ // Function: CreateXMLDOM //// Purpose: Creates a new XML DOM. //// Parameters: None //// Returns: XMLDOM object OR null // -------------------------------------------------function CreateXmlDOM(){　var oXML = new ActiveXObject(GetXmlParserProgID());　try 　{oXML.setProperty( " AllowXsltScript " , true );　} 　catch (err) {}

　oXML.async = false ;　oXML.validateOnParse = false ;　oXML.resolveExternals = false ;　oXML.setProperty( " SelectionLanguage " , " XPath " );　try {oXML.setProperty( " NewParser " , true );} catch (e) {}

　return oXML;}

// -------------------------------------------------// Function: GetXmlParserProgID //// Purpose: // Gets the ProgID of the highest available version of the // Microsoft XML parser. //// Parameters: None //// Returns: String (i.e. "Msxml2.DOMDocument.4.0") //// ------------------------------------------------- function GetXmlParserProgID(){　var MAX_MAJOR_PARSER_VERSION = 10 ;　var MIN_MAJOR_PARSER_VERSION = 0 ;　var MAX_MINOR_PARSER_VERSION = 9 ;　var MIN_MINOR_PARSER_VERSION = 0 ;

　var sProgID = g_sXmlParserProgID;　var bFound = false ;

　if ( ! sProgID)　{// Iterate through possible versions for ( var nMajor = MAX_MAJOR_PARSER_VERSION; nMajor >= MIN_MAJOR_PARSER_VERSION; nMajor -- ){　for ( var nMinor = MAX_MINOR_PARSER_VERSION; nMinor >= MIN_MINOR_PARSER_VERSION; nMinor -- )　{// Set up the classname for the version that we're trying to instantiate sProgID = " Msxml2.DOMDocument. " + nMajor + " . " + nMinor;

try { 　if ( new ActiveXObject(sProgID)) 　{bFound = true ;break ;　} } catch (e){} 　}

　if (bFound)　{// store in a global variable to speedup subsequent calls g_sXmlParserProgID = sProgID;break ;　} } 　}

　return sProgID;}然后直接用其load方法（本地）。

var xmlDoc = new ActiveXObject( " MSXML2.DOMDocument.3.0 " );xmlDoc.load(local_XML_FileName);

当然也可以直接从server取来（用get方法即可），然后以responseText的方法。xmlht.Open( " GET " ,serv