json ：json-lib json工具类 ajaxutils.js

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>