AJAX
简介
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
同步和异步
同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有等待过程。
异步交互：发送一个请求，不需要等待返回，随时可以再发送下一个请求，不需要等待。
例子：我喊你吃饭，喊你之后，你答应了，我们一起吃饭，这就是同步
我喊你吃饭，喊你之后，我就自己去吃了，而不管你是否去，这就是异步
AJAX的核心 XMLHttpRequest对象
XMLHttpRequest对象 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
大多数浏览器创建XMLHttpRequest对象: var xmlHttp=new XMLHttpRequest();
IE 6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
IE 5.5以及之前更早版本:var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
使用AJAX的步骤
1.第一步
创建XMLHttpRequest对象，为了支持所有浏览器，我们编写一个创建方法
我们可以不用判断是什么浏览器，而用异常处理的方法来创建对象。
当创建对象出现异常时，就用另一种方式创建。
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e)
{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{
throw e;
}
}
}
} 2.第二步
打开与服务器的连接
使用XMLHttpRequest的open方法
xmlHttp.open(method,url,async);
规定请求的类型、URL 以及是否异步处理请求。
-method：请求的类型；GET 或 POST
-url：文件在服务器上的位置
-async：true（异步）或 false（同步）
例如: xmlHttp.open("GET","/day10/AServlet",true);
3.第三步
发送请求
使用XMLHttpRequest的send方法
xmlHttp.send(String)
-String仅用于post请求。一般是请求参数。
get请求无参数,一般是xmlHttp.send(null);
null可以不用，但是有的浏览器不加null可能会发送失败。
4.第四步
获取服务器的响应
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
在xmlHttp对象上的onreadystatechange事件上注册监听器.
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化,未调用open方法
1: 服务器连接已建立,调用了open方法，还没有调用send方法
2: 请求已接收，调用完了send方法
3: 请求处理中
4: 请求已完成，且响应已就绪.(通常我们只关心这个状态)
得到xmlHttp对象的状态
var state=xmlHttp.readyState;//可能是0,1,2,3,4
得到服务器响应的状态吗
var status=xmlHttp.status;//可能是200，404，500
得到服务器响应的内容
var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content=xmlHttp.responseXML;//得到服务器的响应的xml格式的内容
例如
xmlHttp.onreadystatechange=function(){ //xmlHttp对象的5种状态都会调用该方法
if(xmlHttp.readyState==4&&xmlHttp.status==200){ //判断请求是否完成和是否请求成功
var text=xmlHttp.responseText;//获取响应内容
}
}
案例一：使用AJAX获取服务端响应数据，点击按钮后显示在页面上
我们在Servlet中向客户端响应Hello AJAX
public class AServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().print("Hello AJAX"); //响应内容
}
} 我们在JSP使用AJAX获取响应内容 ，点击按钮将获取的内容显示在页面上
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function createXMLHttpRequest(){ //创建XMLHttpRequest对象的方法
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
window.onload=function(){ //当整个文档加载完毕时执行这个方法
var btn=document.getElementById("btn"); //获取按钮元素
btn.onclick=function(){ //给按钮添加点击事件
var xmlHttp=createXMLHttpRequest(); //获取XMLHttpRequest对象
xmlHttp.open("GET","/Ajax/AServlet","true"); //打开与服务器连接
xmlHttp.send(null); //发送请求
xmlHttp.onreadystatechange=function(){ //当状态改变时执行该方法
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
//当请求完成时。获取服务端响应数据
var text=xmlHttp.responseText;
var h1=document.getElementById("h1");
//显示在h1标签中
h1.innerHTML=text;
}
};
};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
案例二：发送post请求
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的请求参数
jsp页面发送post请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function createXMLHttpRequest(){ //创建XMLHttpRequest对象的方法
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
//文档加载完成时触发该方法
window.onload=function(){
var btn=document.getElementById("btn"); //获取按钮
btn.onclick=function(){ //添加点击对象
var xmlHttp=createXMLHttpRequest();
xmlHttp.open("POST","/Ajax/BServlet","true"); //设置post请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头
xmlHttp.send("username=张三&paswword=123"); //设置请求参数
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
var text=xmlHttp.responseText;
var h1=document.getElementById("h1");
h1.innerHTML=text;
}
};
};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
我们在Servlet中获取post请求参数
public class BServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("username"); //获取请求参数
System.out.println(name);
response.getWriter().print("POST："+name);
}
} 案例：用户名是否被注册
我们在Servlet中判断用户名是否被注册
public class CServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");//获取请求参数
if(username.equalsIgnoreCase("zed")){ //如果用户名等于zed，就表示已注册，返回1，否则表示未注册，返回0
response.getWriter().print("1");
}else
{
response.getWriter().print("0");
}
}
}<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
window.onload=function(){
var name=document.getElementById("username"); //获取用户名元素
name.onblur=function(){ //当当前元素失去焦点时触发该事件
var xmlHttp=createXMLHttpRequest();
xmlHttp.open("POST","/Ajax/CServlet","true");
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("username="+name.value); //将用户名发送至servlet
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
//获取响应数据
var text=xmlHttp.responseText;
//将是否注册的信息下显示在span中
var span1=document.getElementById("span1");
if(text==1){ //判断Servlet返回的数值，1表示已注册，0表示未注册
span1.innerHTML="用户名已被注册";
}else{
span1.innerHTML="";
}
}
};
};
};
</script>
<body>
<h1>演示注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="username"><span id="span1"></span><br>
密 码:<input type="password" name="password"><br>
<input type="submit" value="提交">
</form>
</body>
</html> 案例：服务端响应的内容为XML
我们必须在Servlet中设置响应头，才能让页面知道我们返回的是XML。
我们在Servlet中响应XML 格式
public class DServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String xml="<students>"+
"<student id='001'>"+
"<name>zhangsan</name>"+
"<age>18</age>"+
"</student>"+
"</students>";
response.setContentType("text/xml;charset=utf-8"); //设置格式为XML
response.getWriter().print(xml);
}
} 我们在jsp页面获取xml内容 ，进行解析
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
window.onload=function(){
var btn=document.getElementById("btn"); //获取按钮
btn.onclick=function(){ //添加点击事件
var xmlHttp=createXMLHttpRequest();
xmlHttp.open("GET","/Ajax/DServlet","true");
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
var doc=xmlHttp.responseXML; //获取xml格式的响应内容
var ele=doc.getElementsByTagName("student")[0]; //通过标签名字获取元素，因为获取的是一个集合，所以我们通过下标来获取第一个元素
var id=ele.getAttribute("id"); //获取元素的属性
var name=ele.getElementsByTagName("name")[0].textContent; //获取各个元素的值
var age=ele.getElementsByTagName("age")[0].textContent;
var s=id+","+name+","+age;
document.getElementById("h1").innerHTML=s; //将内容设置到h1标签里显示
}
};
};
};
</script>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
案例：省市联动
我们使用XML来存放省市
<?xml version="1.0" encoding="utf-8"?>
<china>
<province name="北京">
<city>东城区</city>
<city>西城区</city>
<city>崇文区</city>
<city>宣武区</city>
<city>朝阳区</city>
<city>丰台区</city>
<city>石景山区</city>
<city>海淀区</city>
<city>门头沟区</city>
<city>房山区</city>
<city>通州区</city>
<city>顺义区</city>
<city>昌平区</city>
<city>大兴区</city>
<city>怀柔区</city>
<city>平谷区</city>
<city>密云县</city>
<city>延庆县</city>
</province>
<province name="天津">
<city>和平区</city>
<city>河东区</city>
<city>河西区</city>
<city>南开区</city>
<city>河北区</city>
<city>红桥区</city>
<city>塘沽区</city>
<city>汉沽区</city>
<city>大港区</city>
<city>东丽区</city>
<city>西青区</city>
<city>津南区</city>
<city>北辰区</city>
<city>武清区</city>
<city>宝坻区</city>
<city>宁河县</city>
<city>静海县</city>
<city>蓟县</city>
</province>
</china> 我们先创建一个省的Servlet ,来获取xml文件中的省
我们使用dom4j和xpath来解析xml文件
public class ProvinceServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
SAXReader sax=new SAXReader(); //创建dom4j的解析器
try {
Document document=sax.read(new File("f://china.xml")); //读取xml文件
List<Node> list=document.selectNodes("//province/@name"); //使用xpath语法获取省的name属性
String s="";
for(Node node:list){ //遍历集合，将所有值变为字符串，用：分割开
s=s+node.getText()+":";
}
response.getWriter().print(s); //响应给客户端
} catch (DocumentException e) {
e.printStackTrace();
}
}
}我们再创建一个市的servlet，来从xml文件中获取指定省的所有市
public class CityServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8"); //响应内容为xml格式
String prov=request.getParameter("province"); //获取参数，传过来的是哪个市
SAXReader sax=new SAXReader(); //创建解析器
try {
Document document=sax.read(new File("f://china.xml")); //解析文件
Node node=document.selectSingleNode("//province[@name='"+prov+"']"); //获取指定市的节点
String s=node.asXML(); //将xml变成字符串
response.getWriter().print(s); //响应给客户端
} catch (DocumentException e) {
e.printStackTrace();
}
}
}<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
window.onload=function(){ //文档加载完成时省份就应该显示
var xmlHttp=createXMLHttpRequest(); //创建XMLHttpRequest对象
xmlHttp.open("GET","/Ajax/ProvinceServlet","true"); //打开连接
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var s=xmlHttp.responseText; //获取响应的内容
var arr=new Array(); //创建一个数组
arr=s.split(":"); //将响应的内容通过：分割开，得到所有省份
var select=document.getElementById("select1"); //获取省份的下拉菜单
for(var i=0;i<arr.length;i++){ //遍历省份集合
var option=document.createElement("option"); //创建option元素
option.value=arr[i];
var text=document.createTextNode(arr[i]); //创建文本节点，值为省份
option.appendChild(text); //将文本节点添加到option下
select.appendChild(option);//将option添加到select下
}
}
};
document.getElementById("select1").onchange=function(){ //如果省份的下拉列表发生变化触发该方法
var xmlHttp=createXMLHttpRequest();
xmlHttp.open("POST","/Ajax/CityServlet","true");
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var e=document.getElementById("select1"); //获取省份的下拉列表
var select2=document.getElementById("select2"); //获取市的下拉列表
var optionList=select2.getElementsByTagName("option");//获取市下的所有option
while(optionList.length>1){ //如果值大于1，说明里面有值，清空
select2.removeChild(optionList[1]);
}
xmlHttp.send("province="+e.value); //将省份发送到servlet
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var s=xmlHttp.responseXML; //获取响应的xml
var arr=s.getElementsByTagName("city"); //获取xml中所有的city标签
for(var i=0;i<arr.length;i++) //遍历数组
{
//添加到市的select中
var option=document.createElement("option")
var text=document.createTextNode(arr[i].textContent);
option.appendChild(text);
select2.appendChild(option);
}
}
};
};
};
</script>
<body>
<select name="province" id="select1"> //创建两个列表
<option>==请选择省==</option>
</select>
<select name="city" id="select2">
<option>==请选择市==</option>
</select>
</body>
</html>XStream
作用
用来将JavaBean序列化（转换）为XML，或将XML反序列为JavaBean。
案例
需要先导入两个jar包。
主要包：xstream.jar
依赖包: xpp3_min-1.1.4c.jar
我们创建两个javaBean，一个Province表示省，一个city表示市
City.java
public class City {
private String name; //城市名字
private String description; //城市描述
public City(String name, String description) {
super();
this.name = name;
this.description = description;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
@Override
public String toString() {
return "City [name=" + name + ", description=" + description + "]";
}
}Province.java
public class Province {
private String name; //省名字
private List<City> cities=new ArrayList(); //省下的市
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<City> getCities() {
return cities;
}
public void setCities(List<City> cities) {
this.cities = cities;
}
public void addCity(City city){ //添加市的方法
cities.add(city);
}
}我们使用XStream来将javaBean变为XML
public class Demo1 {
public static void main(String[] args) {
List<Province> provinces=getProvinceList();
XStream xstream=new XStream();
String s=xstream.toXML(provinces); //将省份集合转换为xml格式
System.out.println(s);
}
public static List<Province> getProvinceList(){ //获取省份集合
Province p1=new Province();
p1.setName("河南");
p1.addCity(new City("郑州","zhengZhou"));
p1.addCity(new City("洛阳","LuoYang"));
Province p2=new Province();
p2.setName("东北");
p2.addCity(new City("辽宁","LiaoNing"));
p2.addCity(new City("铁岭","TieLing"));
List<Province> l=new ArrayList();
l.add(p1);
l.add(p2);
return l;
}
}输出 ：
<list>
<cn.cad.xstream.Province>
<name>河南</name>
<cities>
<cn.cad.xstream.City>
<name>郑州</name>
<description>zhengZhou</description>
</cn.cad.xstream.City>
<cn.cad.xstream.City>
<name>洛阳</name>
<description>LuoYang</description>
</cn.cad.xstream.City>
</cities>
</cn.cad.xstream.Province>
<cn.cad.xstream.Province>
<name>东北</name>
<cities>
<cn.cad.xstream.City>
<name>辽宁</name>
<description>LiaoNing</description>
</cn.cad.xstream.City>
<cn.cad.xstream.City>
<name>铁岭</name>
<description>TieLing</description>
</cn.cad.xstream.City>
</cities>
</cn.cad.xstream.Province>
</list>我们发现根元素是< list >,这是因为我们将list对象传入，让XStream将我们解析,而Province对象和City对象都带上了包名，所以我们将其改变一下。
public class Demo2 {
public static void main(String[] args) {
List<Province> provinces=getProvinceList();
XStream xstream=new XStream();
//指定别名，将指定类型转换成我们想要的标签
xstream.alias("china", List.class);
xstream.alias("province", Province.class);
xstream.alias("city", City.class);
String s=xstream.toXML(provinces);
System.out.println(s);
}
public static List<Province> getProvinceList(){
Province p1=new Province();
p1.setName("河南");
p1.addCity(new City("郑州","zhengZhou"));
p1.addCity(new City("洛阳","LuoYang"));
Province p2=new Province();
p2.setName("东北");
p2.addCity(new City("辽宁","LiaoNing"));
p2.addCity(new City("铁岭","TieLing"));
List<Province> l=new ArrayList();
l.add(p1);
l.add(p2);
return l;
}
}<china>
<province>
<name>河南</name>
<cities>
<city>
<name>郑州</name>
<description>zhengZhou</description>
</city>
<city>
<name>洛阳</name>
<description>LuoYang</description>
</city>
</cities>
</province>
<province>
<name>东北</name>
<cities>
<city>
<name>辽宁</name>
<description>LiaoNing</description>
</city>
<city>
<name>铁岭</name>
<description>TieLing</description>
</city>
</cities>
</province>
</china>
这样的XML格式看起来就舒服很多。但是我们想将province的name标签作为属性,并将< cities >这样的集合名称去掉，只要里面的内容。
public class Demo3 {
public static void main(String[] args) {
List<Province> provinces=getProvinceList();
XStream xstream=new XStream();
//指定别名
xstream.alias("china", List.class);
xstream.alias("province", Province.class);
xstream.alias("city", City.class);
xstream.useAttributeFor(Province.class, "name");//将name变成属性
xstream.addImplicitCollection(Province.class, "cities");//去除list类型的属性，只把list里面的内容生成节点
String s=xstream.toXML(provinces);
System.out.println(s);
}
public static List<Province> getProvinceList(){
Province p1=new Province();
p1.setName("河南");
p1.addCity(new City("郑州","zhengZhou"));
p1.addCity(new City("洛阳","LuoYang"));
Province p2=new Province();
p2.setName("东北");
p2.addCity(new City("辽宁","LiaoNing"));
p2.addCity(new City("铁岭","TieLing"));
List<Province> l=new ArrayList();
l.add(p1);
l.add(p2);
return l;
}
}<china>
<province name="河南">
<city>
<name>郑州</name>
<description>zhengZhou</description>
</city>
<city>
<name>洛阳</name>
<description>LuoYang</description>
</city>
</province>
<province name="东北">
<city>
<name>辽宁</name>
<description>LiaoNing</description>
</city>
<city>
<name>铁岭</name>
<description>TieLing</description>
</city>
</province>
</china>我们想要去除城市的description标签。
public class Demo3 {
public static void main(String[] args) {
List<Province> provinces=getProvinceList();
XStream xstream=new XStream();
//指定别名
xstream.alias("china", List.class);
xstream.alias("province", Province.class);
xstream.alias("city", City.class);
xstream.useAttributeFor(Province.class, "name");//将name变成属性
xstream.addImplicitCollection(Province.class, "cities");//去除list类型的属性，只把list里面的内容生成节点
xstream.omitField(City.class, "description"); //description属性不生成xml标签
String s=xstream.toXML(provinces);
System.out.println(s);
}
public static List<Province> getProvinceList(){
Province p1=new Province();
p1.setName("河南");
p1.addCity(new City("郑州","zhengZhou"));
p1.addCity(new City("洛阳","LuoYang"));
Province p2=new Province();
p2.setName("东北");
p2.addCity(new City("辽宁","LiaoNing"));
p2.addCity(new City("铁岭","TieLing"));
List<Province> l=new ArrayList();
l.add(p1);
l.add(p2);
return l;
}
}
<china>
<province name="河南">
<city>
<name>郑州</name>
</city>
<city>
<name>洛阳</name>
</city>
</province>
<province name="东北">
<city>
<name>辽宁</name>
</city>
<city>
<name>铁岭</name>
</city>
</province>
</china>JSON
简介
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析
JSON 独立于语言，JSON可以被其他语言使用，不只是JS。
与XML的异同
相同之处：
JSON 是纯文本
JSON 具有"自我描述性"（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输
不同处：
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字
为什么使用JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
使用 JSON
读取 JSON 字符串
用 eval() 处理 JSON 字符串
JSON语法
-{}表示对象
-数据之间由逗号分割
-[]表示数组
-JSON数据的格式是 名称:值
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null
JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"
案例1
<script type="text/javascript">
window.onload=function(){
var person1={"name":"张三","age":18,"sex":"man"}; //js语法创建对象
var s="{\"name\":\"张三\",\"age\":18,\"sex\":\"man\"}"; //json语法创建字符串
var person2=eval("("+s+")"); //eval（）方法执行字符串内容，获取person对象
alert(person1.name+","+person1.age+","+person1.sex);//输出都一样
alert(person2.name+","+person2.age+","+person2.sex);
}
</script>
<body>
</body> 案例：从服务器接受JSON数据
我们Servlet响应一个JSON字符串
public class AServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String jsontext="{\"name\":\"李四\",\"age\":18,\"sex\":\"women\"}";
response.getWriter().print(jsontext);
}
} 在jsp页面中获取json字符串，将其转换成对象
<script type="text/javascript">
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw e;
}
}
}
}
window.onload=function(){
var btn=document.getElementById("btn"); //获取按钮
btn.onclick=function(){ //按钮点击事件
var xmlHttp=createXMLHttpRequest();
xmlHttp.open("GET","/JSON/AServlet","true");
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
var text=xmlHttp.responseText; //获取数据
var person=JSON.parse(text); //将数据转换为对象
var s=person.name+","+person.age+","+person.sex;
var h1=document.getElementById("h1");
h1.innerHTML=s;
}
};
};
};
</script>
<body>
<button id="btn">点击这里</button><br>
<h1 id="h1"></h1>
</body>
JSON.prase（）可以把json字符串转换为对象。
eval方法也可以，不过推荐使用JSON.parse（）
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
