最近看了些关于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
下载记忆 阅读(426)
评论(1) 编辑 收藏 所属分类:
学习