AServlet
public class AServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { /* * 向客户端发送json串 */ String str="{\"name\":\"zs\",\"age\":11,\"sex\":\"male\"}"; response.getWriter().print(str); System.out.println(str); } } <script type="text/javascript"> function createXMLHttpRequest(){ try{ return new XMLHttpRequest();//大多数浏览器 }catch(e){ try{ return ActiveXObject("Msxml2.XMLHTTP");//IE6.0 }catch(e){ try{ return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早 }catch(e){ alert("什么浏览器？"); throw e; } } } } window.onload = function(){ //获取btn元素 var btn = document.getElementById("btn"); btn.onclick = function(){//给按钮的点击事件上添加监听 //使用ajax得到服务器端响应，把结果显示到h3中 //1、得到request var xmlHttp = createXMLHttpRequest(); /*2、连接 */ xmlHttp.open("GET","<c:url value='/AServlet'/>",true); /*3、发送 */ xmlHttp.send(null); //get请求没有请求体，也要给出null，不然firefox可能不能发送 //4、给xmlHttp的状态改变事件上添加监听 xmlHttp.onreadystatechange = function(){ //双重判断 if(xmlHttp.readyState ==4 && xmlHttp.status ==200){ var text = xmlHttp.responseText;//是一个json块 var person = eval("("+text+")"); var s = person.name+"," +person.age+","+person.sex; document.getElementById("h3").innerHTML = s; } } } } </script> </head> <body> <%--点击按钮后把服务器响应的数据显示到h3元素中 --%> <button id="btn">点击</button> <h1>hell word</h1> <h3 id="h3"></h3> </body> /** * json-lib小工具 */ public class Demo1 { /* * 当map来用 */ @Test public void fun1(){ JSONObject map = new JSONObject(); map.put("name", "zs"); map.put("age", 12); map.put("sex", "male"); String s = map.toString(); System.out.println(s); } /* * 当你已经有了一个Person对象时，可以把Person转换成JSONObject对象 */ @Test public void fun2(){ Person p = new Person("ls",11,"female"); //把对象转换成JSONObject类型 JSONObject map = JSONObject.fromObject(p); System.out.println(map.toString()); } /** * JSONArray */ @Test public void fun3(){ Person p1 = new Person("ls",11,"female"); Person p2 = new Person("zs",16,"male"); JSONArray list = new JSONArray(); list.add(p1); list.add(p2); System.out.println(list.toString()); } /** * 原来就有一个List，需要把List转换成JSONArray */ @Test public void fun4(){ Person p1 = new Person("ls",11,"female"); Person p2 = new Person("zs",16,"male"); List<Person> list = new ArrayList<Person>(); list.add(p1); list.add(p2); System.out.println(JSONArray.fromObject(list).toString()); } } <script type="text/javascript" src="<c:url value='ajax-lib/ajaxutils.js'/> "></script> <script type= "text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ /* 1、ajax */ ajax( { url:"<c:url value='/AServlet'/>", type:"json", callback:function(data){ document.getElementById("h3").innerHTML = data.name+","+data.age+","+data.sex; } } ); } } </script> </head> <body> <%--点击按钮后把服务器响应的数据显示到h3元素中 --%> <h1>显示自己封装的</h1> <button id="btn">点击</button> <h1>hell word</h1> <h3 id="h3"></h3> </body>ajaxutils.js
//创建request对象 function createXMLHttpRequest(){ try{ return new XMLHttpRequest();//大多数浏览器 }catch(e){ try{ return ActiveXObject("Msxml2.XMLHTTP");//IE6.0 }catch(e){ try{ return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早 }catch(e){ alert("什么浏览器？"); throw e; } } } } /* *option对象有如下属性 */ /*请求方式 method,*/ /*请求的url url,*/ /*是否异步 asyn,*/ /*请求体 params,*/ /*回调方法 callback,*/ /*服务器响应数据转换成什么类型 type*/ function ajax(option){ /* * 1、得到xmlHttp */ var xmlHttp = createXMLHttpRequest(); /* * 2、打开连接 */ if(!option.method){//默认为GET请求 option.method = "GET"; } if(option.asyn == undefined){//默认为异步处理 option.asyn = true; } xmlHttp.open(option.method,option.url,option.asyn); /* * 3、判断是否为POST */ if("POST" ==option.method){ xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } /* * 4、发送请求 */ xmlHttp.send(option.params); /* * 5、注册监听 */ xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断 //获取服务器的响应数据，进行转换 if(!option.type){//如果type没有赋值，那么默认为文本 data = xmlHttp.responseText; } else if(option.type=="xml"){ data = xmlHttp.responseXML; } else if(option.type == "text"){ data = xmlHttp.responseText; } else if(option.type="json"){ var text = xmlHttp.responseText; data = eval("("+text+")"); } //调用回调方法 option.callback(data); } } }