AJAX实践之与服务器通信

2022-07-15 80酷酷网 80kuku.com

　　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);

}

关于这个控件有个方法可以在各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();

} 

}