JSON
1、json
    是js提供的一種資料交換格式
2、json的語法
    {}:是物件
        屬性名必須使用雙引號括起來。單引不行
        屬性值：
            null
            數值
            字串
            陣列：使用[]括起來
            boolean值：true和false 
3、應用json
    var person = {"name":"zs","age":11,"sex":"male"}    

4、json和xml比較
    可讀性：xml強
    解析難度：JSON本身就是js物件，簡單的多
    流行度：XML已經流行多年，但在AJAX領域，JSON更受歡迎
var person={
    "name":"zs"
    "friend":[
        {"name":"ls","friends":[

        ]},
    ]
}

json-lib
1、是什麼
    可以把javabean轉換成json串
2、jar包
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.3.jar
commons-logging-1.1.jar
ezmorph-1.0.6.jar
json-lib-2.1-jdk15.jar
xom-1.0b3.jar

3、核心類
    JSONObject->Map
        toString();
        JSONObject map = JSONObject.fromObject(person);把物件轉換成JSONObject物件
    JSONArray-->List
        toString();
        JSONArray jsonArray = JSONObject.fromObject(list);把list轉換成JSONArray物件
 

/**
 * json-lib小工具
 */
public class Demo {
    @Test
    public void fun() {
        JSONObject map = new JSONObject();
        map.put("name", "zhangsan");
        map.put("age", 18);
        map.put("sex", "male");
        String s = map.toString();
        System.out.println(s);
    }

    /**
     * 當你已經有了一個Person物件時，可以把Person轉換成JSONObject物件
     */
    @Test
    public void fun2() {
        Person p = new Person("zhangsan", 18, "male");
        // 把物件轉換成JsonObject型別
        JSONObject map = JSONObject.fromObject(p);
        String s = map.toString();
        System.out.println(s);
    }

    /**
     * JsonArray
     */
    @Test
    public void fun3() {
        Person p1 = new Person("zhangsan", 18, "male");
        Person p2 = new Person("lisi", 20, ",male");
        // 把物件轉換成JsonObject型別
        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", 18, "male");
        Person p2 = new Person("lisi", 20, ",male");
        // 把物件轉換成JsonObject型別
        List<Person> list = new ArrayList<Person>();
        list.add(p1);
        list.add(p2);
        System.out.println(JSONArray.fromObject(list).toString());
    }
}
 

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

測試ajaxutils.js

.jsp

<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='/JsonServlet'/>",
				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>