黑马程序员_超全面的JavaWeb视频教程vedio黑马程序员_超全面的JavaWeb教程-源码笔记JavaWeb视频教程_day23-资料源码ajax_codeday23_3
本代码中有模拟 jquery里面的对Ajax的简化封装：
json2.jsp Ajax原生请求
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'json2.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("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); //4. 给xmlHttp的状态改变事件上添加监听 xmlHttp.onreadystatechange = function() { //双重判断 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { var text = xmlHttp.responseText;//它是一个json串 // 执行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>JSON之Hello World</h1> <h3 id="h3"></h3> </body> </html>
package cn.itcast.demo1; import java.util.ArrayList; import java.util.List; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import org.junit.Test; /** * 演示JSON-LIB小工具 * @author cxf * */ public class Demo1 { /* * 当map来用 */ @Test public void fun1() { JSONObject map = new JSONObject(); map.put("name", "zhangSan"); map.put("age", 23); map.put("sex", "male"); String s = map.toString(); System.out.println(s); } /* * 当你已经有一个Person对象时，可以把Person转换成JSONObject对象 */ @Test public void fun2() { Person p = new Person("liSi", 32, "female"); // 把对象转换成JSONObject类型 JSONObject map = JSONObject.fromObject(p); System.out.println(map.toString()); } /** * JSONArray */ @Test public void fun3() { Person p1 = new Person("zhangSan", 23, "male"); Person p2 = new Person("liSi", 32, "female"); 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("zhangSan", 23, "male"); Person p2 = new Person("liSi", 32, "female"); List<Person> list = new ArrayList<Person>(); list.add(p1); list.add(p2); System.out.println(JSONArray.fromObject(list).toString()); } }
// 创建request对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("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) {//双重判断 var data; // 获取服务器的响应数据，进行转换！ 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); } }; };
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'json3.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <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元素中 --%> <button id="btn">点击这里</button> <h1>显示自己封装的ajax小工具</h1> <h3 id="h3"></h3> </body> </html>