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>