AJAX編程實踐之與服務器通信
首先看下看下相對簡單些的--向服務器發送一個包含有名/值對的簡單查詢串,在這種情況下XHP即可以用GET也可以用POST。
queryString就是名/值對的參數形式了(如name=LiLin&age=23),在調用OPEN方法中,當請求方法是用POST的時候為了確保服務器知道請求體中有請求參數,需要調用setRequestHeader,將Content-Type值設置為application/x-www-form-urlencoded.當然也可不放在請求體中(那就不要用POST啦!)
此時server處理:
對get and post方法都用processRequest來處理。
要向服務器發送相關復雜的查詢串,可以將模型變化為XML發送到server 。
client端:
createXML方法無非就是將內容以DOM的樣式存到var xml(變量)里。有時也可能出現client直接將本地的一個XML文件直接以DOM(當然可以edit)的樣式傳送.(也放這個時個的Content-Type應該為text/xml了!)這時可能要用到ActiveXObject("MSXML2.DOMDocument.3.0")這樣一個控件了。
關于這個控件有個方法可以在各broswer中通用的JS代碼:
然后直接用其load方法(本地)。
當然也可以直接從server取來(用get方法即可),然后以responseText的方法
實際上xmlDoc.loadXML(xmlht.responseText)所得到的就是一個于內存中的DOM了,而直接用responseXML的話就直接可以解析為一個DOM了!(注意load(FILE)與loadXML(DOM)是不同的)
此時servert process :
DOM,JDOM,JAXP隨便你自己選好了!
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 " ,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.getElementsByTagName( " type " ); String type = null ; String responseText = " Selected Pets: " ; for ( int i = 0 ; i < selectedPetTypes.getLength(); i ++ ) { type = selectedPetTypes.item(i).getFirstChild().getNodeValue(); responseText = responseText + " " + type; } response.setContentType( " text/xml " ); response.getWriter().print(responseText); } private String readXMLFromRequestBody(HttpServletRequest request) { StringBuffer xml = new StringBuffer(); String line = null ; try { BufferedReader reader = request.getReader(); while ((line = reader.readLine()) != null ) { xml.append(line); } } catch (Exception e) { System.out.println( " Error reading XML: " + e.toString()); } return xml.toString(); } } |
DOM,JDOM,JAXP隨便你自己選好了!