分享
 
 
 

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

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

首先看下看下相对简单些的--向服务器发送一个包含有名/值对的简单查询串,在这种情况下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();

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有