最近看了些關于Ajax一些基礎的東西,感覺也沒有什么新鮮的技術,主要是JavaScript和XML,可能是我了解的太少吧.另外關于XMLHttpRequest可以參考網站:
http://www.xmlhttp.cn下面我演示一下我自己編寫的一段代碼:
1) 準備一個Servlet,當請求該Servlet時,它將返回以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)準備一個HTML文件.當點擊"Order"按鈕時,網頁向服務器發送異步請求,請求成功則在按鈕下方顯示"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";????//相對,絕對地址都可以
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行用來產生一個XMLHttpRequest對象,之后調用該對象Open函數對其初始化.其中的布爾值"true"用來表明是否異步請求.情參照
XMLHttp.cn的注解.17行
onreadystatechange的意思是一旦
readyState的值發生變化就會調用validator()函數.20行中
readyState如果等于4表明從服務器接收數據完畢,此時可以通過responseBody,responseText或responseXML來獲取完整的回應數據,不過在此動作之前最好先判斷一下請求到的內容是否是你想要的內容XMLHttpRequest的成員
status存儲的是當前請求的http狀態碼,如果它等于200表明請求成功.最常見的錯誤是404代碼的"Not Found"錯誤.要注意的是此屬性必須在數據接受完畢之后,也就是說
readyState等于4時才能獲取.
? 另外對于處理XML文件則需用到XMLHttpRequest的responseXML屬性(不是方法),它將響應信息格式化為Xml Document對象并返回.例如把Servlet的doPost()方法修改為
1resp.setContentType("text/xml");
2resp.setHeader("Cache-Control","no-cache");
3resp.getWriter().write("<message>Hello?World!</message>"); 注意第一行要設置文檔類型為XML.
此時JavaScript解析時應使用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} 體驗一下Ajax吧! ^_^
posted on 2006-03-27 10:02
下載記憶 閱讀(430)
評論(1) 編輯 收藏 所屬分類:
學習