封装ajax小工具： 

  1 ajax-lib/ajaxutils.js:
  2 
  3 // 创建request对象
  4 function createXMLHttpRequest() {
  5     try {
  6         return new XMLHttpRequest();//大多数浏览器
  7     } catch (e) {
  8         try {
  9             return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
 10         } catch (e) {
 11             try {
 12                 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
 13             } catch (e) {
 14                 alert("哥们儿，您用的是什么浏览器啊？");
 15                 throw e;
 16             }
 17         }
 18     }
 19 }
 20 /*
 21  * option对象有如下属性
 22  */
 23          /*  请求方式method, 
 24         /*  请求的url url, 
 25         /*  是 否异步asyn, 
 26         /*  请求体params, 
 27         /*  回调方法callback,
 28         /*  服务器响应数据转换成什么类型type
 29         */
 30 function ajax(option) {
 31     /*
 32      * 1. 得到xmlHttp
 33      */
 34     var xmlHttp = createXMLHttpRequest();
 35     /*
 36      * 2. 打开连接
 37      */
 38     if(!option.method) {//默认为GET请求
 39         option.method = "GET";
 40     }
 41     if(option.asyn == undefined) {//默认为异步处理
 42         option.asyn = true;
 43     }
 44     xmlHttp.open(option.method, option.url, option.asyn);
 45     /*
 46      * 3. 判断是否为POST
 47      */
 48     if("POST" == option.method) {
 49         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 50     }
 51     /*
 52      * 4. 发送请求
 53      */
 54     xmlHttp.send(option.params);
 55     
 56     /*
 57      * 5. 注册监听
 58      */
 59     xmlHttp.onreadystatechange = function() {
 60         if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
 61             var data;
 62             // 获取服务器的响应数据，进行转换！
 63             if(!option.type) {//如果type没有赋值，那么默认为文本
 64                 data = xmlHttp.responseText;
 65             } else if(option.type == "xml") {
 66                 data = xmlHttp.responseXML;
 67             } else if(option.type == "text") {
 68                 data = xmlHttp.responseText;
 69             } else if(option.type == "json") {
 70                 var text = xmlHttp.responseText;
 71                 data = eval("(" + text + ")");
 72             }
 73             
 74             // 调用回调方法
 75             option.callback(data);
 76         }
 77     };
 78 };
 79 
 80 
 81 
 82 
 83 
 84 servlet：
 85     public void doGet(HttpServletRequest request, HttpServletResponse response)
 86             throws ServletException, IOException {
 87 
 88         String str = "{\"name\":\"zhangSan\", \"age\":189999, \"sex\":\"male\"}";
 89         response.getWriter().print(str);
 90         System.out.println(str);
 91         }
 92 
 93 使用：
 94 <script type="text/javascript">
 95     window.onload = function() {
 96         var btn = document.getElementById("btn");
 97         btn.onclick = function() {
 98             ajax(
 99             {
100                 url : "<c:url value ='/Aservlet'/>",
101                 type : "json",
102                 callback : function(data) {
103                     document.getElementById("h3").innerHTML = data.name +","
104                             + data.age + "," + data.sex;
105                     }
106             }
107             );
108         };
109     };
110 </script>
111 </head>
112 <body>
113     <button id="btn">点击这里</button>
114     <h1>显示自己的ajax小工具</h1>
115     <h3 id="h3"></h3>
116 </body>

 

posted @ 2015-11-03 10:12  暗夜小精灵～～  阅读(244)  评论(0)    收藏  举报