Top

JAVA AJAXJQUERY DAY02

访问JavaScript对象的属性
访问Javacript对象数组
JSON字符串转换成JavaScript对象
Java对象转换成JSON字符串
使用JSON完成级联下拉列表
热卖商品动态显示

1 访问JavaScript对象的属性

1.1 问题

访问JavaScript对象的属性

1.2 方案

使用初始化的方式创建JavaScript对象,并访问对象的属性.

1.3 步骤

步骤一：新建json01.html文件

添加链接的单击动作，调用方法。

图-1

步骤二：运行查看结果

图- 2

步骤三：添加复杂对象

图– 3

步骤四：运行查看结果

图-4

1.4 完整代码

json01.html文件代码如下：

<html>
<head>
<title>json01.html</title>	
<meta http-equiv="content-type" 
	content="text/html; charset=UTF-8">
<script type="text/javascript">
	function f1(){
		var obj = {'name':'Luffy','age':17};
		alert(obj.name + "  " + obj.age);
	}
	function f2(){
		var obj = {'name':'Luffy',
				'address':{
							'city':'Beijing',
							'street':'dzs',
							'room':17    				
						  }};
		alert(obj.name + "  " + obj.address.city);
	}
</script>
</head>

<body>
	<!—- 创建JavaScript对象并查看属性 -->
<a href="javascript:;" onclick="f2();">查看对象属性</a>
</body>
</html>

2 访问Javacript对象数组

2.1 问题

访问JavaScript对象数组中的元素

2.2 方案

遵循数组的格式要求，使用方括号开头和结尾。

2.3 步骤

步骤一：新建json02.html文件

在文件中添加链接进行方法调用的测试。添加第一个方法f3()。如图-5所示。

图- 5

步骤二：运行查看结果

图- 6

步骤三：添加下一个方法f4()

图 - 7

步骤四：运行查看结果

图- 8

2.4 完整代码

json02.html文件代码如下：

<html>
<head>
<title>json02.html</title>	
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	function f3(){
		var arr = [ {'name':'Luffy','age':17},
						{'name':'Zoro','age':19}];
			alert(arr[1].name);
	}
	function f4(){
		var obj = {'name':'Luffy',
				'friends':[{'name':'Zoro','age':19},
						   {'name':'Nami','age':18}]
				   };
		alert(obj.name + "  " + obj.friends[1].name);
	}
</script>
</head>

<body>
	<!— 访问JavaScript对象数组 -->
<a href="javascript:;" onclick="f4();">查看数组中的对象属性</a>
</body>
</html>

3 JSON字符串转换成JavaScript对象

3.1 问题

将符合JSON格式要求的字符串，转换为JavaScript对象。

3.2 方案

借助于原生的eval方法或者原生对象JSON.parse(str)方法。

3.3 步骤

步骤一：新建json03.html文件

在文件中添加脚本代码，f5（）方法为字符串到对象的转变过程。

JSON这个原生对象提供了字符串和对象之间转换的方法，如果浏览器无法得到想要的输出结果，是因为版本太低不支持这个原生对象。

图 - 9

步骤二：运行查看结果

图- 10

步骤三：添加方法f6(),实现数组的转换

图- 11

步骤四：运行查看结果

图- 12

步骤五：添加f7()方法，实现对象到字符串的转换

图- 13

步骤六：运行查看结果

图- 14

3.4 完整代码

<html>
<head>
<title>json03.html</title>	
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">

	/*JSON字符串转JSON对象*/
	function f5(){
		var str = '{"name":"Luffy","age":17}';    
				
		//第1种方式(不需要任何js文件)
			//var obj = eval("("+str+")");
			
			//第2种方式(不需要json.js文件)
			//var obj = JSON.parse(str);
			
			//第3种方式(需要json.js文件)
			var obj = str.parseJSON();
						
			alert(obj.name);
	}
	
	/*JSON字符串转JSON数组*/
	function f6(){
		var str = '[{"name":"Luffy","age":17},' + 
					  '{"name":"Zoro","age":19}]';		
			//第1种方式
			//var arr = eval("("+str+")");
			
			//第2种方式
			var arr = str.parseJSON();
			
			alert(arr[1].name);
	}
	
	/*JSON对象转JSON字符串*/
	function f7(){
		var obj = {"name":"Luffy","age":17};
		//第1种方式
			//var str = obj.toJSONString();
			//第2种方式
			var str = JSON.stringify(obj);
			alert(str);
	}
</script>
</head>
<body>
	<!-- 使用JSON表示数组 -->
<a href="javascript:;" onclick="f5();">JSON字符串-->JSON对象</a><br/><br/><br/>
<a href="javascript:;" onclick="f6();">JSON字符串-->JSON数组</a><br/><br/><br/>
<a href="javascript:;" onclick="f7();">JSON对象-->JSON字符串</a><br/><br/><br/>
</body>
</html>

4 Java对象转换成JSON字符串

4.1 问题

将Java对象转换成符合JSON格式的字符串，并测试。

4.2 方案

使用与json-lib.jar相关的jar文件完成类型的转换。

4.3 步骤

步骤一：新建实体类Friend

图- 15

步骤二：新建JSONTest类

在该类中添加四个方法，分别用于测试Java对象转换为JSON字符串，Java数组转换为JSON字符串，JSON字符串转换为Java对象，JSON字符串转换为Java数组。

步骤三：引入jar文件

在添加jar文件的时候，需要导入6个jar文件，缺一不可。如图-16所示。

图- 16

步骤四：添加具体的转换方法：Java对象转换为JSON字符串

图- 17

步骤五：运行结果

图– 18

步骤六：Java数组（集合）转换为JSON字符串

图– 19

运行结果：

图- 20

步骤七：JSON字符串转换为Java对象

图– 21

运行结果：

图- 22

步骤八：JSON字符串转换为Java数组（集合）

图– 23

运行结果：

图- 24

4.4 完整代码

Friend.java文件代码如下：

package bean;

public class Friend {
	private String name;
	private int age;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public String toString() {
		return this.name + "   " + this.age;
	}
}

JSONTest.java文件代码如下：

package json;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import bean.Friend;

public class JSONTest {
	/**
	 * Java对象转换为JSON字符串
	 */
	public static void test1() {
		Friend f = new Friend();
		f.setName("Zoro");
		f.setAge(19);
		JSONObject jsonObj = JSONObject.fromObject(f);
		String jsonStr = jsonObj.toString();
		System.out.println(jsonStr);
	}

	/**
	 * Java数组转换为JSON字符串
	 */
	public static void test2() {
		List<Friend> fs = new ArrayList<Friend>();
		for (int i = 0; i < 3; i++) {
			Friend f = new Friend();
			f.setName("Zoro" + (i + 1));
			f.setAge(19 + i);
			fs.add(f);
		}
		JSONArray jsonArr = JSONArray.fromObject(fs);
		String jsonStr = jsonArr.toString();
		System.out.println(jsonStr);
	}
	/**
	 * JSON字符串转换为Java对象
	 */
	public static void test3(){
		String jsonStr = "{\"name\":\"Luffy\",\"age\":17}";
		JSONObject jsonObj = JSONObject.fromObject(jsonStr);
		Friend friend = (Friend)JSONObject.
					toBean(jsonObj, Friend.class);
		System.out.println(friend);
	}
	
	/**
	 * JSON字符串转换为Java数组
	 */
	public static void test4(){
		String jsonStr = "[{\"name\":\"Luffy\",\"age\":17}," +
				"		{\"name\":\"Zoro\",\"age\":19}]";
		JSONArray jsonArr = JSONArray.fromObject(jsonStr);
		List<Friend> friends = (List<Friend>)JSONArray.
					toCollection(jsonArr, Friend.class);
		for(Friend f :friends){
			System.out.println(f);
		}
	}

	public static void main(String[] args) {
		 //test1();
		//test2();
		//test3();
		test4();
	}

}

5 使用JSON完成级联下拉列表

5.1 问题

结合异步请求，实现城市的级联下拉列表。

5.2 方案

分别编写客户端脚本和服务器端处理程序。服务器端要实现将Java对象转换为传输的JSON字符串。客户端在收到这个字符串以后进行转换，变成JavaScript对象，使用对象的各个属性构造下拉框的Option选项后添加到select下面。

5.3 步骤

步骤一：新建实体类City

图- 25

步骤二：新建ActionServlet

图- 26

步骤三：新建city.html文件

图– 27

图 - 28

步骤四：运行查看结果

图- 29

5.4 完整代码

City.java文件代码如下：

package bean;

public class City {
	private String cityName;
	private String cityValue;	
	
	public City() {
		super();
	}
	public City(String cityName, String cityValue) {
		super();
		this.cityName = cityName;
		this.cityValue = cityValue;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	public String getCityValue() {
		return cityValue;
	}
	public void setCityValue(String cityValue) {
		this.cityValue = cityValue;
	}
}

ActionServlet.java文件代码如下：

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.SaleDAO;

import json.DateProcessor;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import bean.City;
import bean.Sale;
import bean.User;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/")
				,uri.lastIndexOf("."));
		if (action.equals("/city")) {
			String name = request.getParameter("name");
			if (name.equals("bj")) {
				City c1 = new City("海淀", "hd");
				City c2 = new City("东城", "dc");
				City c3 = new City("西城", "xc");
				List<City> cs = new ArrayList<City>();
				cs.add(c1);
				cs.add(c2);
				cs.add(c3);
				JSONArray obj = JSONArray.fromObject(cs);
				String str = obj.toString();
				out.println(str);
			} else if (name.equals("sh")) {
				City c1 = new City("徐汇", "xh");
				City c2 = new City("静安", "ja");
				City c3 = new City("黄浦", "hp");
				List<City> cs = new ArrayList<City>();
				cs.add(c1);
				cs.add(c2);
				cs.add(c3);
				JSONArray obj = JSONArray.fromObject(cs);
				String str = obj.toString();
				out.println(str);
			}
		}
		out.close();
	}

}

web.xml文件代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>	
</web-app>

city.html文件代码如下：

<html>
<head>
	<title></title>	
	<script type="text/javascript" src="js/json.js"></script>
	<script type="text/javascript">
		function getXmlHttpRequest(){
			var xhr = null;
		if((typeof XMLHttpRequest)!='undefined'){
		xhr = new XMLHttpRequest();
	}else {
		xhr = new ActiveXObject('Microsoft.XMLHttp');
	}
	return xhr;
		}

		function change(v1){
			var xhr = getXmlHttpRequest();
			xhr.open('post','city.do',true);
			xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
			xhr.onreadystatechange=function(){
				if(xhr.readyState == 4){
					var txt = xhr.responseText;
					var citys = txt.parseJSON();
					document.getElementById('s2').innerHTML = '';
					for(i=0;i<citys.length;i++){
						var op = 
						new Option(citys[i].cityName,
						citys[i].cityValue);
						document.getElementById('s2').options[i] = op;
					}
				}
			};
			xhr.send('name=' + v1);
		}
	</script>
</head>
<body>
	<select id="s1" style="width:120px;"
	onchange="change(this.value);">
		<option value="sh">上海</option>
		<option value="bj">北京</option>
	</select>
	<select id="s2" style="width:120px;">
	</select>
</body>
</html>

6 热卖商品动态显示

6.1 问题

每隔5秒钟，显示当前卖的最好的三件商品。

6.2 方案

每5秒钟发送一次Ajax请求，将返回的JSON数组数据显示到页面的div中。

6.3 步骤

步骤一：新建Sale类

图- 30

步骤二：新建dao包下面的DBUtil类和SaleDAO类

DBUtil.java文件参考前面项目中的代码。

执行如下sql语句：

图- 31

新建SaleDAO.java文件，编写用于查询销量前三的方法。

图- 32

步骤三：新建ActionServlet类

图 - 33

步骤四：新建sales.html文件

图- 34

步骤五：运行查看结果

图- 35

6.4 完整代码

Sale.java文件代码：

package bean;

public class Sale {
	private int id ;
    private String prodName;
    private int qty ;   

	public Sale() {
		super();
	}
	public Sale(int id, String prodName, int qty) {
		super();
		this.id = id;
		this.prodName = prodName;
		this.qty = qty;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getProdName() {
		return prodName;
	}
	public void setProdName(String prodName) {
		this.prodName = prodName;
	}
	public int getQty() {
		return qty;
	}
	public void setQty(int qty) {
		this.qty = qty;
	}
}

DBUtil.java文件代码:

package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

import org.apache.taglibs.standard.tag.common.core.OutSupport;

/**
 * JDBC管理连接的工具类，可以获取连接和关闭连接
 */
public class DBUtil {
	/**
	 * 获取连接对象
	 */
	public static Connection getConnection()throws Exception{
		Connection conn = null;
		try {
			Class.forName("oracle.jdbc.OracleDriver");
			conn = DriverManager.getConnection(
					"jdbc:oracle:thin:@localhost:1521:xe","xxx", "xxx");
		} catch (Exception e) {
			e.printStackTrace();
			throw e;
		}
		return conn;
	}
	/**
	 * 关闭连接对象
	 */
	public static void close(Connection conn) throws Exception{
		if(conn!=null){
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw e;
			}
		}
	}	
}

SaleDAO.java文件代码：

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import bean.Sale;

public class SaleDAO {
	public List<Sale> findAll() throws Exception{
		List<Sale> sales = new ArrayList<Sale>();
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;
		try{
			conn = DBUtil.getConnection();
			stmt = conn.prepareStatement("select * from (select rownum r," +
					"a.* from (select * from t_sale order by qty desc) a) " +
					"c where c.r < 4");
			rs = stmt.executeQuery();
			while(rs.next()){
				Sale s = new Sale(
						rs.getInt("id"),
						rs.getString("prodname"),
						rs.getInt("qty")
						);
				sales.add(s);
			}
		}catch(Exception e){
			e.printStackTrace();
			throw e;
		}finally{
			DBUtil.close(conn);
		}
		return sales;
	}
}

ActionServlet.java文件代码：

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.SaleDAO;

import json.DateProcessor;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import bean.City;
import bean.Sale;
import bean.User;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/")
				,uri.lastIndexOf("."));
		
if(action.equals("/sale")){
			SaleDAO dao = new SaleDAO();
			try {
				List<Sale> all = dao.findAll();
				JSONArray arry = JSONArray.fromObject(all);
				out.println(arry.toString());
			} catch (Exception e) {				
				e.printStackTrace();
				throw new ServletException(e);
			}
		}
		out.close();
	}
}

web.xml文件代码：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>	
</web-app>

sales.html文件代码：

<html>
<head>
	<title>Insert title here</title>
	<style>
		#d1{
			width:500px;
			height:180px;
			background-color:#fff8dc;
			border:1px solid red;
			margin-left:350px;
			margin-top:50px;
		}
	</style>
	<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
	<script type="text/javascript">
		function getXmlHttpRequest(){
			var xhr = null;
	if((typeof XMLHttpRequest)!='undefined'){
		xhr = new XMLHttpRequest();
		}else {
		xhr = new ActiveXObject('Microsoft.XMLHttp');
	 }
	return xhr;
		}
		function f1(){
			setInterval(f2,5000);
		}
		function f2(){
			var xhr = getXmlHttpRequest();
			xhr.open('post','sale.do',true);
			xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
			xhr.onreadystatechange=function(){
				if(xhr.readyState == 4){
					var txt = xhr.responseText;
					var sales = txt.evalJSON();
					var saleInfo = '当前销量最好的商品是:<br/>';
					for(i=0;i<sales.length;i++){
						saleInfo += '商品名称:'
						 + sales[i].prodName + ' 销量:' + 
						 sales[i].qty + '<br/>';
					}
					$('d1').innerHTML = saleInfo;
				}
			};
			xhr.send(null);
		}
	</script>
	
</head>
<body onload="f1();">
	<div id="d1"></div>
</body>
</html>