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>