最近看了些關(guān)于Ajax一些基礎(chǔ)的東西,感覺(jué)也沒(méi)有什么新鮮的技術(shù),主要是JavaScript和XML,可能是我了解的太少吧.另外關(guān)于XMLHttpRequest可以參考網(wǎng)站:
http://www.xmlhttp.cn下面我演示一下我自己編寫(xiě)的一段代碼:
1) 準(zhǔn)備一個(gè)Servlet,當(dāng)請(qǐng)求該Servlet時(shí),它將返回以HTML格式返回"Hello World!"字樣.
public?class?Hello?extends?HttpServlet?{
????public?void?doGet(HttpServletRequest?req,?HttpServletResponse?res)
????????throws?ServletException,?IOException?{
????????this.doPost(req,?res);
????}
????public?void?doPost(HttpServletRequest?req,?HttpServletResponse?res)
????????throws?ServletException,?IOException?{
????????res.setContentType("text/html");
????????res.setHeader("Cache-Control","no-cache");
????????res.getWriter().write("Hello?World!");
????}
}2)準(zhǔn)備一個(gè)HTML文件.當(dāng)點(diǎn)擊"Order"按鈕時(shí),網(wǎng)頁(yè)向服務(wù)器發(fā)送異步請(qǐng)求,請(qǐng)求成功則在按鈕下方顯示"Hello World!".
?1<html>
?2<head>
?3????<title>Test?Ajax</title>
?4????<script?language="JavaScript">
?5????????var?req;
?6????????var?url;
?7????????function?requestServlet()?{
?8????????????if?(window.XMLHttpRequest)?{
?9????????????????req?=?new?XMLHttpRequest();
10????????????}?else?if?(window.ActiveXObject)?{
11????????????????req?=?new?ActiveXObject("Microsoft.XMLHTTP");
12????????????}
13????????????var?url?=?"http://localhost:8080/ajax/HelloServlet";
14????????????//var?url?=?"HelloServlet";????//相對(duì),絕對(duì)地址都可以
15????????????req.open("POST",?url,?true);
16????????????req.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
17????????????req.onreadystatechange=validator;
18????????????req.send();
19????????}
20????????function?validator()?{
21????????????if?(req.readystate?==?4)?{
22????????????????if?(req.status?==?200)?{
23????????????????????msg.innerHTML?=?req.responseText;
24????????????????}
25????????????????else{
26????????????????????msg.innerHTML?=?"req.status?=?"?+?req.status;
27????????????????}
28????????????}
29????????}
30????</script>
31</head>
32
33<body>
34<input?type="button"?name="order"?value="Order"?onClick="requestServlet()"/><br/>
35<span?id="msg"></span>
36</body>
37</html> 代碼的8-12行用來(lái)產(chǎn)生一個(gè)XMLHttpRequest對(duì)象,之后調(diào)用該對(duì)象Open函數(shù)對(duì)其初始化.其中的布爾值"true"用來(lái)表明是否異步請(qǐng)求.情參照
XMLHttp.cn的注解.17行
onreadystatechange的意思是一旦
readyState的值發(fā)生變化就會(huì)調(diào)用validator()函數(shù).20行中
readyState如果等于4表明從服務(wù)器接收數(shù)據(jù)完畢,此時(shí)可以通過(guò)responseBody,responseText或responseXML來(lái)獲取完整的回應(yīng)數(shù)據(jù),不過(guò)在此動(dòng)作之前最好先判斷一下請(qǐng)求到的內(nèi)容是否是你想要的內(nèi)容XMLHttpRequest的成員
status存儲(chǔ)的是當(dāng)前請(qǐng)求的http狀態(tài)碼,如果它等于200表明請(qǐng)求成功.最常見(jiàn)的錯(cuò)誤是404代碼的"Not Found"錯(cuò)誤.要注意的是此屬性必須在數(shù)據(jù)接受完畢之后,也就是說(shuō)
readyState等于4時(shí)才能獲取.
? 另外對(duì)于處理XML文件則需用到XMLHttpRequest的responseXML屬性(不是方法),它將響應(yīng)信息格式化為Xml Document對(duì)象并返回.例如把Servlet的doPost()方法修改為
1resp.setContentType("text/xml");
2resp.setHeader("Cache-Control","no-cache");
3resp.getWriter().write("<message>Hello?World!</message>"); 注意第一行要設(shè)置文檔類型為XML.
此時(shí)JavaScript解析時(shí)應(yīng)使用ResponseXML了.
1function?validator()?{
2????if?(req.readystate?==?4)?{
3????????if(req.status==200){
4????????????var?message?=?req.responseXML.getElementsByTagName("message")[0];
5????????????msg.innerHTML?=?message.childNodes[0].nodeValue;
6????????}
7????}
8} 體驗(yàn)一下Ajax吧! ^_^
posted on 2006-03-27 10:02
下載記憶 閱讀(435)
評(píng)論(1) 編輯 收藏 所屬分類:
學(xué)習(xí)