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>
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 }