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 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 = " " ;　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 " " 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随便你自己选好了！ 　　首先看下看下相对简单些的--向服务器发送一个包含有名/值对的简单查询串，在这种情况下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 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 = " " ;　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 " " 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随便你自己选好了！ 下载本文示例代码


AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信AJAX编程实践之与服务器通信