AJAX編程實踐之與伺服器通訊

ajax|編程|伺服器

遊客，您好！轉網通站 | 轉電信站 積木首頁 | 500多種網頁特效整理 | 實用查詢函數手冊 | 積木網BT下載聯盟 | 經典笑話 | 廣播電台 | 高清晰經典圖片素材  
程式開發  網頁設計  搜尋引擎  特效代碼  作業系統  防範病毒  駭客技術  圖形圖象  電腦硬體  網路技術  服 務 器  數 據 庫  網文精粹
    
 您的位置：積木首頁 >> 程式開發頻道 >> Ajax技術 >> 本文：  標題：AJAX編程實踐之與伺服器通訊時間：2006-4-2   來源：互連網摘選  瀏覽數：155次首先看下看下相對簡單些的--向伺服器發送一個包含有名/值對的簡單查詢串，在這種情況下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端: ：Gimoo.com

 

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方法（本地）。 ：Gimoo.com

 

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隨便你自己選好了！