web day23 AJAX,XStream,JSON

AJAX概述

1. ajax概述

  *asynchronous javascript and xml：异步的js和xml

  * 它能使用js访问服务器，而且是异步访问！

  * 服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！

   > text：纯文本

   > xml：xml

   > json：它是js提供的数据交互格式，它在ajax中最受欢迎！

 

2. 异步交互和同步交互

  * 同步：

   > 发一个请求，就要等待服务器的响应结束，然后才能发第二个请求！中间这段时间就是一个字“卡”

   > 刷新的是整个页面！

  * 异步：

   > 发一个请求后，无需等待服务器的响应，然后就可以发第二个请求！

   > 可以使用js接收服务器的响应，然后使用js来局部刷新！

 

3. ajax应用场景

  * 百度的搜索框

  * 用户注册时（校验用户名是否被注册过）

 

4. ajax的优缺点

  优点：

  * 异步交互：增强了用户的体验！

  * 性能：因为服务器无需再响应整个页面，只需要响应部份内容，所以服务器的压力减轻了！

 

  缺点：

  *ajax不能应用在所有场景！

  *ajax无端的增多了对服务器的访问次数，给服务器带来了压力！

 

==========================================

==========================================

 

ajax发送异步请求（四步操作）

 

1. 第一步（得到XMLHttpRequest）

  *ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax！！！

  * 得到XMLHttpRequest

   > 大多数浏览器都支持：varxmlHttp = new XMLHttpRequest();

   > IE6.0：var xmlHttp =new ActiveXObject("Msxml2.XMLHTTP");

   > IE5.5以更早版本的IE：var xmlHttp = newActiveXObject("Microsoft.XMLHTTP");

 

  * 编写创建XMLHttpRequest对象的函数

// 创建异步对象
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
		} catch (e) {
			try {
				return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本	
			} catch (e) {
				alert("哥们儿，您用的是什么浏览器啊？");
				throw e;
			}
		}
	}
}

 

2. 第二步（打开与服务器的连接）

  *xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：

   > 请求方式：可以是GET或POST

   > 请求的URL：指定服务器端资源，例如；/day23_1/AServlet

   > 请求是否为异步：如果为true表示发送异步请求，否则同步请求！

  *xmlHttp.open("GET", "/day23_1/AServlet", true);

 

3. 第三步（发送请求）

  *xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！

   > 参数：就是请求体内容！如果是GET请求，必须给出null。

 

4. 第四步（注册监听获取响应数据）

  * 在xmlHttp对象的一个事件上注册监听器：onreadystatechange

  *xmlHttp对象一共有5个状态：

   > 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

  * 得到服务器响应的内容1

   > var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容

   > var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！

 

 xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法

     if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断：判断是否为4状态，而且还要判断是否为200

         // 获取服务器的响应内容

         var text = xmlHttp.responseText;

     }

  };

AJAX执行顺序图

 

JS代码

window.onload = function() {//文档加载完毕后执行
	var btn = document.getElementById("btn");
	btn.onclick = function() {//给按钮的点击事件注册监听
		/*
		ajax四步操作，得到服务器的响应
		把响应结果显示到h1元素中
		*/
		/*
		1. 得到异步对象 
		*/
		var xmlHttp = createXMLHttpRequest();
		/*
		2. 打开与服务器的连接
		  * 指定请求方式
		  * 指定请求的URL
		  * 指定是否为异步请求
		*/
		xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
		/*
		3. 发送请求
		*/
		xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
		/*
		4. 给异步对象的onreadystatechange事件注册监听器
		*/
		xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
			// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				// 获取服务器的响应结束
				var text = xmlHttp.responseText;
				// 获取h1元素
				var h1 = document.getElementById("h1");
				h1.innerHTML = text;
			}
		};
	};
};

==========================================

==========================================

 

第二例：发送POST请求(如果发送请求时需要带有参数，一般都用POST请求)

 

* open：xmlHttp.open("POST" ....);

* 添加一步：设置Content-Type请求头：

 > xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

* send：xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体\

 JS代码

window.onload = function() {//文档加载完毕后执行
	var btn = document.getElementById("btn");
	btn.onclick = function() {//给按钮的点击事件注册监听
		/*
		ajax四步操作，得到服务器的响应
		把响应结果显示到h1元素中
		*/
		/*
		1. 得到异步对象 
		*/
		var xmlHttp = createXMLHttpRequest();
		/*
		2. 打开与服务器的连接
		  * 指定请求方式
		  * 指定请求的URL
		  * 指定是否为异步请求
		*/
		/************修改open方法，指定请求方式为POST**************/
		xmlHttp.open("POSt", "<c:url value='/AServlet'/>", true);
		/************设置请求头：Content-Type************/
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		/*
		3. 发送请求
		*/
		/**********发送时指定请求体***********/
		xmlHttp.send("username=张三&password=123");//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
		/*
		4. 给异步对象的onreadystatechange事件注册监听器
		*/
		xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
			// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				// 获取服务器的响应结束
				var text = xmlHttp.responseText;
				// 获取h1元素
				var h1 = document.getElementById("h1");
				h1.innerHTML = text;
			}
		};
	};
};

 

==========================================

==========================================

 

第三例：注册表单之校验用户是否注册！

 

1. 编写页面：

  *ajax3.jsp

   > 给出注册表单页面

   > 给用户名文本框添加onblur事件的监听

    > 获取文本框的内容，通过ajax4步发送给服务器，得到响应结果

     * 如果为1：在文本框后显示“用户名已被注册”

     * 如果为0：什么都不做！

 

2. 编写Servlet

  *ValidateUsernameServlet

   > 获取客户端传递的用户名参数

   > 判断是否为itcast

     * 是：返回1

     * 否：返回0

 

JS代码

同POST略

==========================================

==========================================

 第四例：响应内容为xml数据

响应内容为xml数据

 

  * 服务器端：

   > 设置响应头：ContentType，其值为：text/xml;charset=utf-8

  * 客户端：

   > var doc = xmlHttp.responseXML;//得到的是Document对象！

 

=====================

 JS代码(包含插入内容处理浏览器差异)

window.onload = function() {//文档加载完毕后执行
	var btn = document.getElementById("btn");
	btn.onclick = function() {//给按钮的点击事件注册监听
		/*
		ajax四步操作，得到服务器的响应
		把响应结果显示到h1元素中
		*/
		/*
		1. 得到异步对象 
		*/
		var xmlHttp = createXMLHttpRequest();
		/*
		2. 打开与服务器的连接
		  * 指定请求方式
		  * 指定请求的URL
		  * 指定是否为异步请求
		*/
		xmlHttp.open("GET", "<c:url value='/BServlet'/>", true);
		/*
		3. 发送请求
		*/
		xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
		/*
		4. 给异步对象的onreadystatechange事件注册监听器
		*/
		xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
			// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				// 获取服务器的响应结果（xml）
				var doc = xmlHttp.responseXML;
				// 查询文档下名为student的所有元素，得到数组，再取下标0元素
				var ele = doc.getElementsByTagName("student")[0];
				var number = ele.getAttribute("number");//获取元素名为number的属性值
				var name;
				var age;
				var sex;
				
				// 处理浏览器的差异
				if(window.addEventListener) {
					name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器
				} else {
					name = ele.getElementsByTagName("name")[0].text;//IE支持
				}
				if(window.addEventListener) {
					age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器
				} else {
					age = ele.getElementsByTagName("age")[0].text;//IE支持
				}
				if(window.addEventListener) {
					sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器
				} else {
					sex = ele.getElementsByTagName("sex")[0].text;//IE支持
				}

				var text = number + ", " + name + ", " + age + ", " + sex;
				document.getElementById("h1").innerHTML = text;
			}
		};
	};
};

 

==========================================

==========================================

 

第五例：省市联动

 xml版

1. 页面

 <select name="province">

   <option>===请选择省份===</option>

 </select>

 <select name="city">

   <option>===请选择城市===</option> 

 </select>

 

2. ProvinceServlet

  *ProvinceServlet：当页面加载完毕后马上请求这个Servlet！

   > 它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端！

 

3. 页面的工作

  * 获取这个字符串，使用逗号分隔，得到数组

  * 循环遍历每个字符串（省份的名称），使用每个字符串创建一个<option>元素添加到<selectname="province">这个元素中

 

4. CityServlet

  *CityServlet：当页面选择某个省时，发送请求！

  * 得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象！，把这个元素转换成xml字符串，发送给客户端

 

5. 页面的工作

  * 把<selectname="city">中的所有子元素删除，但不要删除<option>===请选择城市===</option>

  * 得到服务器的响应结果：doc！！！

  * 获取所有的<city>子元素，循环遍历，得到<city>的内容

  * 使用每个<city>的内容创建一个<option>元素，添加到<selectname="city">

 JS代码

/*
 * 1. 在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province"/>中
 * 2. 在选择了新的省份时，发送请求（参数为省名称），得到xml文档，即<province>元素
 *   解析xml文档，得到其中所有的<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city">元素中
 */

window.onload = function() {
	/*
	ajax四步，请求ProvinceServlet，得到所有省份名称
	使用每个省份名称创建一个<option>元素，添加到<select name="province">中
	*/
	var xmlHttp = createXMLHttpRequest();
	xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>", true);
	xmlHttp.send(null);
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			// 获取服务器的响应
			var text = xmlHttp.responseText;
			// 使用逗号分隔它，得到数组
			var arr = text.split(",");
			// 循环遍历每个省份名称，每个名称生成一个option对象，添加到<select>中
			for(var i = 0; i < arr.length; i++) {
				var op = document.createElement("option");//创建一个指名名称元素
				op.value = arr[i];//设置op的实际值为当前的省份名称
				var textNode = document.createTextNode(arr[i]);//创建文本节点
				op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
				
				document.getElementById("p").appendChild(op);
			}
		}
	};
	
	
	/*
	第二件事情：给<select name="province">添加改变监听
	使用选择的省份名称请求CityServlet，得到<province>元素(xml元素)！！！
	获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称
	使用每个市名称创建<option>元素添加到<select name="city">
	*/
	var proSelect = document.getElementById("p");
	proSelect.onchange = function() {
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器！
		xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				/*
				把select中的所有option移除（除了请选择）
				*/
				var citySelect = document.getElementById("c");
				// 获取其所有子元素
				var optionEleList = citySelect.getElementsByTagName("option");
				// 循环遍历每个option元素，然后在citySelect中移除
				while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！
					citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！
				}
				
				
				var doc = xmlHttp.responseXML;
				// 得到所有名为city的元素
				var cityEleList = doc.getElementsByTagName("city");
				// 循环遍历每个city元素
				for(var i = 0; i < cityEleList.length; i++) {
					var cityEle = cityEleList[i];//得到每个city元素
					var cityName;
					// 获取市名称
					if(window.addEventListener) {//处理浏览器的差异
						cityName = cityEle.textContent;//支持FireFox等浏览器
					} else {
						cityName = cityEle.text;//支持IE
					}
					
					// 使用市名称创建option元素，添加到<select name="city">中
					var op = document.createElement("option");
					op.value = cityName;
					// 创建文本节点
					var textNode = document.createTextNode(cityName);
					op.appendChild(textNode);//把文本节点追加到op元素中
					
					//把op添加到<select>元素中
					citySelect.appendChild(op);
				}
			}
		};		
	};
};
</script>
  </head>
  
  <body>
<h1>省市联动</h1>
<select name="province" id="p">
  <option>===请选择省===</option>
</select>
　　　
<select name="city" id="c">
  <option>===请选择市===</option>
</select>
  </body>

servlet代码

province

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		/*
		 * 响应所有省份名称，使用逗号分隔！
		 */
		/*
		 * 1. Document对象
		 *   * 创建解析器对象
		 *   * 调用解析器的读方法，传递一个流对象，得到Document
		 */
		try {
			SAXReader reader = new SAXReader();
			InputStream input = this.getClass().getResourceAsStream("/china.xml");
			Document doc = reader.read(input);
			
			/*
			 * 查询所有province的name属性，得到一堆的属性对象
			 * 循环遍历，把所有的属性值连接成一个字符串，发送给客户端
			 */
			List<Attribute> arrList = doc.selectNodes("//province/@name");
			StringBuilder sb = new StringBuilder();
			for(int i = 0; i < arrList.size(); i++) {
				sb.append(arrList.get(i).getValue());//把每个属性的值存放到sb中。
				if(i < arrList.size() - 1) {
					sb.append(",");
				}
			}
			response.getWriter().print(sb);
		} catch(Exception e) {
			throw new RuntimeException(e);
		}
	}
}

city

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/xml;charset=utf-8");//注意：发送xml这里要修改！！！
		
		/*
		 * 获取省份名称，加载该省对应的<province>元素！
		 * 把元素转换成字符串发送给客户端
		 */
		/*
		 * 1. 获取省份的名称
		 * 2. 使用省份名称查找到对应的<province>元素
		 * 3. 把<province>元素转换成字符串，发送！
		 */
		try {
			/*
			 * 得到Document
			 */
			SAXReader reader = new SAXReader();
			InputStream input = this.getClass().getResourceAsStream("/china.xml");
			Document doc = reader.read(input);
			
			/*
			 * 获取参数
			 */
			String pname = request.getParameter("pname");//获取省份名称
			Element proEle = (Element) doc.selectSingleNode("//province[@name='" + pname + "']");
			String xmlStr = proEle.asXML();//把元素转换成字符串
			response.getWriter().print(xmlStr);
		} catch(Exception e) {
			throw new RuntimeException(e);
		}
	}

==========================================

JSON版

1. dao：提供两个方法，
  * 一个是查询所有省
  * 通过省名称查询指定的市


2. servlet：两个方法
  * 一个把所有省转换成json，发送给客户端
  * 通过获取省名称这个参数，然后查询该省下的所有市，转换成json，发送给客户端


3. ajax1.jsp
  * 页面加载完成后：访问servlet，得到所有省，然后显示在<select id="province">
  * 页面加载完成后：给<select id="province">添加onchange事件监听，获取选择的省名称，访问servlet，得到所有市，显示在<select id="city">中




===========================


一行记录对应多个对象时，需要使用Map来生成多个对象

==========================================

 

XStream

 

1. 什么作用

  * 可以把JavaBean转换为（序列化为）xml

 

2. XStream的jar包

  * 核心JAR包：xstream-1.4.7.jar；

  * 必须依赖包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）；

 

3. 使用步骤

  *XStream xstream = new XStream();

  *String xmlStr = xstream.toXML(javabean);

 

4. 使用细节

  * 别名：把类型对应的元素名修改了

   > xstream.alias("china", List.class)：让List类型生成的元素名为china

   > xstream.alias("province", Province.class)：让Province类型生成的元素名为province

  * 使用为属性：默认类的成员，生成的是元素的子元素！我们希望让类的成员生成元素的属性

   > xstream.useAttributeFor(Province.class, "name")：把Province类的名为name成员，生成<province>元素的name属性

  * 去除Collection类型的成名：我们只需要Collection的内容，而不希望Collection本身也生成一个元素

   > xstream.addImplicitCollection(Province.class, "cities")：让Province类的名为cities(它是List类型的，它的内容还会生成元素)的成名不

生成元素

  * 去除类的指定成名，让其不生成xml元素

   > xstream.omitField(City.class, "description")：在生成的xml中不会出现City类的名为description的对应的元素！

代码演示

 city/province类结构

city
	private String name;//市名
	private String description;//描述

province
	private String name;// 省名
	private List<City> cities = new ArrayList<City>();
public void addCity(City city) {
		cities.add(city);
	}

/**
 * 演示XStream
 * @author cxf
 *
 */
public class Demo1 {
	// 返回javabean集合
	public List<Province> getProinvceList() {
		Province p1 = new Province();
		p1.setName("北京");
		p1.addCity(new City("东城区", "DongChengQu"));
		p1.addCity(new City("昌平区", "ChangPingQu"));
		
		Province p2 = new Province();
		p2.setName("辽宁");
		p2.addCity(new City("沈阳", "shenYang"));
		p2.addCity(new City("葫芦岛", "huLuDao"));
		
		List<Province> provinceList = new ArrayList<Province>();
		provinceList.add(p1);
		provinceList.add(p2);
		
		return provinceList;
	}
	
	/**
<list> --> List类型显示list
  <cn.itcast.demo1.Province> --> javabean的类型为Province，它元素的名称为类的完整名
    <name>北京</name> --> javabean的属性名
    <cities> --> javabean的属性名
      <cn.itcast.demo1.City> --> 类名
        <name>东城区</name> --> 属性名
        <description>DongChengQu</description> --> 属性名
      </cn.itcast.demo1.City>
      <cn.itcast.demo1.City>
        <name>昌平区</name>
        <description>ChangPingQu</description>
      </cn.itcast.demo1.City>
    </cities>
  </cn.itcast.demo1.Province>
  <cn.itcast.demo1.Province>
    <name>辽宁</name>
    <cities>
      <cn.itcast.demo1.City>
        <name>沈阳</name>
        <description>shenYang</description>
      </cn.itcast.demo1.City>
      <cn.itcast.demo1.City>
        <name>葫芦岛</name>
        <description>huLuDao</description>
      </cn.itcast.demo1.City>
    </cities>
  </cn.itcast.demo1.Province>
</list>
	 */
	@Test
	public void fun1() {
		List<Province> proList = getProinvceList();
		/*
		 * 创建XStream对象
		 * 调用toXML把集合转换成xml字符串
		 */
		XStream xstream = new XStream();
		String s = xstream.toXML(proList);
		System.out.println(s);
	}
	
	/*
	 * 别名(alias)
	 * 希望：
	 * * 默认List类型对应<list>元素，希望让List类型对应<china>元素
	 * * 默认Province类型对应<cn.itcast.demo1.Province>，希望让它对应<province>
	 * * 默认City类型对应<cn.itcast.demo1.City>，希望它对应<city>元素
	 */
	/*
<china>
  <province>
    <name>北京</name>
    <cities>
      <city>
        <name>东城区</name>
        <description>DongChengQu</description>
      </city>
      <city>
        <name>昌平区</name>
        <description>ChangPingQu</description>
      </city>
    </cities>
  </province>
  <province>
    <name>辽宁</name>
    <cities>
      <city>
        <name>沈阳</name>
        <description>shenYang</description>
      </city>
      <city>
        <name>葫芦岛</name>
        <description>huLuDao</description>
      </city>
    </cities>
  </province>
</china>
	 */
	@Test
	public void fun2() {
		List<Province> proList = getProinvceList();
		XStream xstream = new XStream();
		/*
		 * 给指定的类型指定别名
		 */
		xstream.alias("china", List.class);//给List类型指定别名为china
		xstream.alias("province", Province.class);//给Province指定别名为province
		xstream.alias("city", City.class);//给City类型指定别名为city
		
		
		String s = xstream.toXML(proList);
		System.out.println(s);
	}
	
	/*
	 * 默认javabean的属性都会生成子元素，而现在希望生成元素的属性
	 */
/*
<china>
  <province name="北京">
    <cities>
      <city>
        <name>东城区</name>
        <description>DongChengQu</description>
      </city>
      <city>
        <name>昌平区</name>
        <description>ChangPingQu</description>
      </city>
    </cities>
  </province>
  <province name="辽宁">
    <cities>
      <city>
        <name>沈阳</name>
        <description>shenYang</description>
      </city>
      <city>
        <name>葫芦岛</name>
        <description>huLuDao</description>
      </city>
    </cities>
  </province>
 */
	@Test
	public void fun3() {
		List<Province> proList = getProinvceList();
		XStream xstream = new XStream();
		xstream.alias("china", List.class);//给List类型指定别名为china
		xstream.alias("province", Province.class);//给Province指定别名为province
		xstream.alias("city", City.class);//给City类型指定别名为city
		
		
		/*
		 * 把Province类型的name属性，生成<province>元素的属性
		 */
		xstream.useAttributeFor(Province.class, "name");
		
		
		String s = xstream.toXML(proList);
		System.out.println(s);		
	}

	
	/*
	 * 去除List类型的属性，只把list中的元素生成xml元素
	 */
/*
<china>
  <province name="北京">
    <city>
      <name>东城区</name>
      <description>DongChengQu</description>
    </city>
    <city>
      <name>昌平区</name>
      <description>ChangPingQu</description>
    </city>
  </province>
  <province name="辽宁">
    <city>
      <name>沈阳</name>
      <description>shenYang</description>
    </city>
    <city>
      <name>葫芦岛</name>
      <description>huLuDao</description>
    </city>
  </province>
</china>
 */
	@Test
	public void fun4() {
		List<Province> proList = getProinvceList();
		XStream xstream = new XStream();
		xstream.alias("china", List.class);//给List类型指定别名为china
		xstream.alias("province", Province.class);//给Province指定别名为province
		xstream.alias("city", City.class);//给City类型指定别名为city
		xstream.useAttributeFor(Province.class, "name");//把Province类型的name属性，生成<province>元素的属性
		
		
		/*
		 * 去除<cities>这样的Collection类型的属性
		 * 去除Provice类的名为cities的List类型的属性！
		 */
		xstream.addImplicitCollection(Province.class, "cities");
		
		
		String s = xstream.toXML(proList);
		System.out.println(s);		
	}
	
	/**
	 * 去除不想要的javabean属性
	 * 就是让某引起javabean属性，不生成对应的xml元素！
	 */
/*
<china>
  <province name="北京">
    <city>
      <name>东城区</name>
    </city>
    <city>
      <name>昌平区</name>
    </city>
  </province>
  <province name="辽宁">
    <city>
      <name>沈阳</name>
    </city>
    <city>
      <name>葫芦岛</name>
    </city>
  </province>
</china>
 */
	@Test
	public void fun5() {
		List<Province> proList = getProinvceList();
		XStream xstream = new XStream();
		xstream.alias("china", List.class);//给List类型指定别名为china
		xstream.alias("province", Province.class);//给Province指定别名为province
		xstream.alias("city", City.class);//给City类型指定别名为city
		xstream.useAttributeFor(Province.class, "name");//把Province类型的name属性，生成<province>元素的属性
		xstream.addImplicitCollection(Province.class, "cities");//去除Provice类的名为cities的List类型的属性！
		
		
		/*
		 * 让City类的，名为description属性不生成对应的xml元素
		 */
		xstream.omitField(City.class, "description");
		
		
		String s = xstream.toXML(proList);
		System.out.println(s);		
	}
}

==========================================

==========================================

 

JSON

 

1. json是什么

  * 它是js提供的一种数据交换格式！

 

2. json的语法

  *{}：是对象！

   > 属性名必须使用双引号括起来！单引不行！！！

   > 属性值：

     * null

     * 数值

     * 字符串

     * 数组：使用[]括起来

     * boolean值：true和false

 

3. 应用json

  *var person = {"name":"zhangSan", "age":18,"sex":"male"};

 

4. json与xml比较

* 可读性：XML胜出

* 解析难度：JSON本身就是JS对象（主场作战），所以简单很多

* 流行度：XML已经流行好多年，但在AJAX领域，JSON更受欢迎。

  

-----------------------------------

 

json-lib

 

1. 是什么？

  * 它可以把javabean转换成json串

 

2. jar包

  * 略

 

3. 核心类

  *JSONObject --> Map

   > toString();

   > JSONObject map = JSONObject.fromObject(person)：把对象转换成JSONObject对象

  *JSONArray --> List

   > toString()

   > JSONArray jsonArray = JSONArray.fromObject(list)：把list转换成JSONArray对象

演示代码

/**
 * 演示JSON-LIB小工具　
 * @author cxf
 *
 */
public class Demo1 {
	/*
	 * 当map来用
	 */
	@Test
	public void fun1() {
		JSONObject map = new JSONObject();
		map.put("name", "zhangSan");
		map.put("age", 23);
		map.put("sex", "male");
		
		String s = map.toString();
		System.out.println(s);
	}
	
	/*
	 * 当你已经有一个Person对象时，可以把Person转换成JSONObject对象
	 */
	@Test
	public void fun2() {
		Person p = new Person("liSi", 32, "female");
		// 把对象转换成JSONObject类型
		JSONObject map = JSONObject.fromObject(p);
		System.out.println(map.toString());
	}
	
	/**
	 * JSONArray
	 */
	@Test
	public void fun3() {
		Person p1 = new Person("zhangSan", 23, "male");
		Person p2 = new Person("liSi", 32, "female");
		
		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", 23, "male");
		Person p2 = new Person("liSi", 32, "female");
		List<Person> list = new ArrayList<Person>();
		list.add(p1);
		list.add(p2);
		
		
		System.out.println(JSONArray.fromObject(list).toString());
	}
}

 

 

AJAX小工具

 封装代码

// 创建request对象
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
		} catch (e) {
			try {
				return ActvieXObject("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) {//双重判断
			var data;
			// 获取服务器的响应数据，进行转换！
			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);
		}
	};
};