首先看下看下相對簡單些的--向服務器發送一個包含有名/值對的簡單查詢串
在這種情況下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);
}
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隨便你自己選好了！
參考資料：foundations-of-ajax
相關鏈接: Ajax---通過JSON與服務器通信（發送請求和處理響應）