封装JavaScript的AJAX

 1 // 创建request对象
 2 function createXMLHttpRequest() {
 3     try {
 4         return new XMLHttpRequest();//大多数浏览器
 5     } catch (e) {
 6         try {
 7             return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
 8         } catch (e) {
 9             try {
10                 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
11             } catch (e) {
12                 alert("用的是什么浏览器啊？");
13                 throw e;
14             }
15         }
16     }
17 }
18 //option对象有如下属性
19          /*请求方式*/method, 
20         /*请求的url*/ url, 
21         /*是否异步*/asyn, 
22         /*请求体*/params, 
23         /*回调方法*/callback,
24         /*服务器响应数据转换成什么类型*/type
25 
26 function ajax(option) {
27     //1. 得到xmlHttp
28     var xmlHttp = createXMLHttpRequest();
29     //2. 打开连接
30     if(!option.method) {//默认为GET请求
31         option.method = "GET";
32     }
33     if(option.asyn == undefined) {//默认为异步处理
34         option.asyn = true;
35     }
36     xmlHttp.open(option.method, option.url, option.asyn);
37     //3. 判断是否为POST
38     if("POST" == option.method) {
39         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
40     }
41     //4. 发送请求
42     xmlHttp.send(option.params);
43     //5. 注册监听
44     xmlHttp.onreadystatechange = function() {
45         if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
46             var data;
47             // 获取服务器的响应数据，进行转换！
48             if(!option.type) {//如果type没有赋值，那么默认为文本
49                 data = xmlHttp.responseText;
50             } else if(option.type == "xml") {
51                 data = xmlHttp.responseXML;
52             } else if(option.type == "text") {
53                 data = xmlHttp.responseText;
54             } else if(option.type == "json") {
55                 var text = xmlHttp.responseText;
56                 data = eval("(" + text + ")");
57             }
58             // 调用回调方法
59             option.callback(data);
60         }
61     };
62 };

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>My JSP 'json3.jsp' starting page</title>
 7     <meta http-equiv="pragma" content="no-cache">
 8     <meta http-equiv="cache-control" content="no-cache">
 9     <meta http-equiv="expires" content="0">    
10     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11     <meta http-equiv="description" content="This is my page">
12 <script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"></script>
13 <script type="text/javascript">
14 window.onload = function() {
15     var btn = document.getElementById("btn");
16     btn.onclick = function() {
17         ajax(
18             {
19                 url:"<c:url value='/AServlet'/>",
20                 type:"json",
21                 callback:function(data) {
22                     document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex;
23                 }
24             }
25         );
26     };
27 };
28 </script>
29   </head>
30   <body>
31 <%-- 点击按钮后，把服务器响应的数据显示到h3元素中 --%>
32 <button id="btn">点击这里</button>
33 <h1>显示自己封装的ajax小工具</h1>
34 <h3 id="h3"></h3>
35   </body>
36 </html>

index.jsp

 1 import java.io.IOException;
 2 
 3 import javax.servlet.ServletException;
 4 import javax.servlet.http.HttpServlet;
 5 import javax.servlet.http.HttpServletRequest;
 6 import javax.servlet.http.HttpServletResponse;
 7 public class AServlet extends HttpServlet {
 8     public void doGet(HttpServletRequest request, HttpServletResponse response)
 9             throws ServletException, IOException {
10         /*
11          * 向客户端发送json串
12          */
13         String str = "{"name":"zhangSan", "age":18, "sex":"male"}";
14         response.getWriter().print(str);
15         System.out.println(str);
16     }
17 }

AServlet