首頁新隨筆新文章聯系聚合

posts - 81,comments - 41,trackbacks - 0

<

2009年12月

>

日

一

二

三

四

五

六

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

我的博客開張啦！歡迎大家多多來踩！

常用鏈接

留言簿(5)

隨筆檔案

文章檔案

2008年12月 (1)

相冊

畢業照

搜索

積分與排名

積分 - 64552
排名 - 823

閱讀排行榜

評論排行榜

AJAX技術初探

一、連接的建立

var request;

window.onload = function()

{

listApi();

}

function createRequest()

{

try{

request = new XMLHttpRequest();

}catch (trymicrosoft){

try{

request = new ActiveXObject("Msxml2.XMLHTTP");

}catch (othermicrosoft){

try{

request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (failed) {

request = false;

}

if(!request)

alert("Error initializing XMLHttpRequest!");

}

二、服務器端Servlet

這是doGet方法，即將參數寫在調用串中。

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("UTF-8");

int restMethodId = Integer.parseInt(request.getParameter("restMethodId"));

String xml_start = "<methodDetail>";

String xml_end = "</methodDetail>";

StringBuilder xml = new StringBuilder();

xml.append(xml_start);

RestDao restDao = new RestDao();

RestMethod restMethod = restDao.getRestMethod(restMethodId);

xml.append("<name>");

xml.append(zhuanYi(restMethod.getRestMethodName()));

xml.append("</name>");

xml.append(xml_end);

String xmlString = xml.toString();

xmlString = xmlString.replace(" ", " ");

xmlString = xmlString.replace("&", "&");

response.getWriter().write(xmlString);

}

三、頁面發送請求

這里調用的Servlet的Get調用，即調用doGet方法。這種方式適合于參數是簡單數據，這樣可以把參數卸載調用url中。
對于參數是復雜的數據對象時，應該調用doPost方法，即在調用串中不包含調用參數，而是把調用參數寫在request.send(參數對象)中，doGet調用時此處為null。

function getMethodDetail(methodId)

{

var id = methodId.substr(6);

var url = "servlet/getMethodDetail?restMethodId=" + escape(id);

call(url);

}

function call(url)

{

createRequest();

if(request){

request.open("GET",url,true);

request.onreadystatechange = callback;

request.send(null);

}

四、回調函數

function callback(){

if(request.readyState ==4){

if(request.status ==200){

parseMessage();

}else{

alert("不能得到方法信息:" + req.statusText);

}

五、解析返回XML、操作Dom以實現頁面動態變化

//解析返回xml的方法

function parseMessage()

{

var xmlDoc = request.responseXML.documentElement;

if(xmlDoc.nodeName == "apis")

{

updateApi(xmlDoc);

}

else if(xmlDoc.nodeName == "methods")

{

updateMethod(xmlDoc);

}

else if(xmlDoc.nodeName == "methodDetail")

{

updateMethodDetail(xmlDoc);

}

else

{

alert("NO Api");

}

function updateApi(xmlDoc)

{

var apis = xmlDoc.getElementsByTagName("api");

var apiul = document.getElementById("apiul");

equalCount(apis.length, apiul);

var apiliArray = apiul.getElementsByTagName("li");

for(var i=0; i<apiliArray.length; i++)

{

apiliArray[i].onclick = function(){listMethod(this.id);}

var apiId = apis[i].childNodes[0].firstChild.nodeValue;

apiliArray[i].id = "api" + apiId;

var apiName = apis[i].childNodes[1].firstChild.nodeValue;

var nameText=document.createTextNode(apiName);

apiliArray[i].removeChild(apiliArray[i].childNodes[0]);

apiliArray[i].appendChild(nameText);

}

posted on 2009-12-04 11:07 胖胖泡泡閱讀(144) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

常用鏈接

留言簿(5)

隨筆檔案

文章檔案

相冊

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜