1、Json是js提供的一种数据交换格式
2、语法:{}表示对象;其中属性名必须使用双引号括起来;属性值包括:null、数值、字符串、数组、对象;定义后可以直接根据“对象名.属性”获取其属性值
3、如果服务器端响应的json串是字符串类型,即:String person = "{\"name\":\"zhangsan\",\"age\":\"18\"}" ;
在客户端执行该json串:var person = eval("(" + xmlHttp.responseText + ")") ;
4、json格式数据与xml中保存数据比较:
xml可读性相对较强;JSON本身就是JS对象,解析难度较低;XML已经流行很多年,但是在AJAX领域,JSON更受欢迎。
5、json-lib小工具:可以把javabean转换成json串
核心jar包:json-lib-2.4-jdk15.jar
依赖jar包:commons-lang-2.5.jar;commons-beanutils-1.8.3.jar;commons-logging-1.1.1.jar;commons-collections-3.2.1.jar;ezmorph-1.0.6.jar;xom-1.1.jar
其中l两个核心类:
JSONObject父类Map
JSONArray父类List
示例:
JSONObject map = new JSONObject() ; //JSONArray的使用相同,只是list集合添加数据使用的是add()方法,不是put()方法
map.put("name","zhangsan");
map.put("age",18);
String s = map.toString() ;
System.out.println(s) ; //输出{"name":"zhangsan","age":18}
把Person对象转换成JSONObject对象:
Person p = new Person("zhangsan",18) ;
JSONObject map = JSONObject.fromObject(p) ;
System.out.println(map.toString()) ; //输出{"name":"zhangsan","age":18}
6、ajax封装工具示例:
>ajaxutils.js
//创建request对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest(); //大多数浏览器
}catch(e){
try{
return ActvieXobject("Msxml2.XMLHTTP"); //ie6
}catch(e){
try{
return ActiveXOBject("Microsoft.XMLHTTP");//ie5和之前
}catch(e){
throw e;
}
}
}
}
/* option对象有如下属性
* //请求方式 请求的url 是否异步 请求体 回调方法
method,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");
}
option.params = null;
//4.发送请求
xmlHttp.send(option.params);
//注册监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断
var data;
if(!option.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);
}
};
};
>Servlet3.java
package com.demo.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Servlet3")
public class Servlet3 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("ajax封装工具");
String str = "Hello servlet!" ;
response.getWriter().print(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应编码
response.setContentType("text/html;charset=utf-8");
//获取请求时的编码
request.setCharacterEncoding("UTF-8");
//获取请求时传递的参数
String username = request.getParameter("username") ;
System.out.println("[post]控制台输出……");
response.getWriter().print("[post请求]Hello" + username);
}
}
>jsp
<%@ 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>ajax封装工具示例</title>
<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(){
ajax(
{
url:"/ali_web/Servlet3",
//type:"json",
callback:function(data){
document.getElementById("h3").innerHTML = data ;
}
}
);
};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1>演示自己封装的小工具</h1>
<h3 id="h3"></h3>
</body>
</html>
导包: