aja_编程实践之与服务器通信.docx

AJAX编程实践之与服务器通信 首先看下看下相对简单些的-向服务器发送一个包含有名/值对的简单查询串，在这种情况下XHP即可以用GET也可以用POST。GETfunction doRequestUsingGET() createXMLHttpRequest();var queryString = GetAndPostExample? ;queryString = queryString + createQueryString()+ &timeStamp= + new Date().getTime();xmlHttp.onreadystatechange = handleStateChange;xmlHttp.open( GET , queryString, true );xmlHttp.send( null ); POSTfunction 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 . * ;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 users 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 = ;var options = document.getElementById( petTypes ).childNodes;var option = null ;for ( var i = 0 ; i options.length; i + ) option = optionsi;if (option.selected) xml = xml + + option.value + ; xml = xml + ;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 were 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 ,server_XML_FileName, true );xmlht.onreadystatechange = stateChange;xmlht.Send( null );function handleStateChange() if (xmlHttp.readyState = 4 ) if (xmlHttp.status = 200 ) xmlDoc.loadXML(xmlht.responseText); 实际上xmlDoc.loadXML(xmlht.responseText)所得到的就是一个于内存中的DOM了,而直接用responseXML的话就直接可以解析为一个DOM了!(注意load（FILE）与loadXML（DOM）是不同的)此时servert process :import java.io. * ;import javax.servlet. * ;import javax.servlet.http. * ;import javax.xml.parsers.DocumentBuilderFactory;import javax.xml.parsers.ParserConfigurationException;import org.w3c.dom.Document;import org.w3c.dom.NodeList;import org.xml.sax.SAXException;public class PostingXMLExample extends HttpServlet protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException String xml = readXMLFromRequestBody(request);Document xmlDoc = null ;try xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder().parse( new ByteArrayInputStream(xml.getBytes(); catch (ParserConfigurationException e) System.out.println( ParserConfigurationException: + e); catch (SAXException e) System.out.println( SAXException: + e); /*/ /* Note how the Java implementation of the W3C DOM has the same methods* as the JavaScript implementation, such as getElementsByTagName and * getNodeValue.*/ NodeList selectedPetTypes = xmlDoc.getElementsByTagNa