\黑馬程序員_超全面的JavaWeb視頻教程vedio\黑馬程序員_超全面的JavaWeb教程-源碼筆記\JavaWeb視頻教程_day23-資料源碼\ajax_code\day23_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>