内容:

1.访问javaScript对象的属性

2.访问Javacript对象数组

3.JSON字符串转换成JavaScript对象

4 .Java对象转换成JSON字符串

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

6 .热卖商品动态显示

1 访问JavaScript对象的属性

1.1 问题

访问JavaScript对象的属性

1.2 方案

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

1.3 步骤

步骤一: 新建json01.html文件

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

步骤二: 运行查看结果

步骤三: 添加复杂对象

步骤四: 运行查看结果

1.4 完整代码

json01.html文件代码如下:

  1. <html>
  2. <head>
  3. <title>json01.html</title>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript">
  6. function f1(){
  7. var obj = {'name':'Luffy','age':17};
  8. alert(obj.name + " " + obj.age);
  9. }
  10. function f2(){
  11. var obj = {'name':'Luffy',
  12. 'address':{
  13. 'city':'Beijing',
  14. 'street':'dzs',
  15. 'room':17
  16. }};
  17. alert(obj.name + " " + obj.address+" "+obj.address.city );
  18. }
  19. </script>
  20. </head>
  21.  
  22. <body>
  23. <!—- 创建JavaScript对象并查看属性 -->
  24. <a href="javascript:;" onclick="f1();">查看对象属性1</a>
  25. </br>
  26. <a href="javascript:;" onclick="f2();">查看对象属性2</a>
  27. </body>
  28. </html>

2 访问Javacript对象数组

2.1 问题

访问JavaScript对象数组中的元素

2.2 方案

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

2.3 步骤

步骤一: 新建json02.html文件,在文件中添加链接进行方法调用的测试。添加第一个方法f3()。

步骤二: 运行查看结果

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

步骤四: 运行查看结果

2.4 完整代码

json02.html文件代码如下:

  1. <html>
  2. <head>
  3. <title>json02.html</title>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript">
  6. function f3(){
  7. var arr = [ {'name':'Luffy','age':17},
  8. {'name':'Zoro','age':19}];
  9. alert(arr[1].name);
  10. }
  11. function f4(){
  12. var obj = {'name':'Luffy',
  13. 'friends':[{'name':'Zoro','age':19},
  14. {'name':'Nami','age':18}]
  15. };
  16. alert(obj.name + " " + obj.friends[1].name);
  17. }
  18. </script>
  19. </head>
  20.  
  21. <body>
  22. <!— 访问JavaScript对象数组 -->
  23. <a href="javascript:;" onclick="f3();">查看数组中的对象属性1</a>
  24. </br>
  25. <a href="javascript:;" onclick="f4();">查看数组中的对象属性2</a>
  26. </body>
  27. </html>

3.JSON字符串转换成JavaScript对象

3.1 问题

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

3.2 方案

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

3.3 步骤

步骤一: 新建json03.html文件

在文件中添加脚本代码,f5()方法为字符串到对象的转变过程。JSON这个原生对象提供了字符串和对象之间转换的方法,如果浏览器无法得到想要的输出结果,是因为版本太低不支持这个原生对象。

步骤二:运行查看结果

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

步骤四:运行查看结果

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

步骤六: 运行查看结果

3.4 完整代码

  1. <html>
  2. <head>
  3. <title>json03.html</title>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.  
  6. <script type="text/javascript" src="js/json.js"></script>
  7. <script type="text/javascript">
  8.  
  9. /*JSON字符串转JSON对象*/
  10. function f5(){
  11. var str = '{"name":"Luffy","age":17}';
  12.  
  13. //第1种方式(不需要任何js文件)
  14. //var obj = eval("("+str+")");
  15.  
  16. 2种方式(不需要json.js文件)
  17. //var obj = JSON.parse(str);
  18.  
  19. //第3种方式(需要json.js文件)
  20. //var obj = str.parseJSON();
  21.  
  22. alert(obj.name);
  23. }
  24.  
  25. /*JSON字符串转JSON数组*/
  26. function f6(){
  27. var str = '[{"name":"Luffy","age":17},' +
  28. '{"name":"Zoro","age":19}]';
  29.  
  30. //第1种方式(不需要json.js文件)
  31. var arr = eval("("+str+")");
  32.  
  33. //第2种方式(需要json.js文件)
  34. //var arr = str.parseJSON();
  35.  
  36. alert(arr[1].name);
  37. }
  38.  
  39. /*JSON对象转JSON字符串*/
  40. function f7(){
  41. var obj = {"name":"Luffy","age":17};
  42.  
  43. //第1种方式(需要json.js文件)
  44. //var str = obj.toJSONString();
  45.  
  46. //第2种方式(不需要json.js文件)
  47. var str = JSON.stringify(obj);
  48. alert(str);
  49. }
  50. </script>
  51. </head>
  52. <body>
  53. <!-- 使用JSON表示数组 -->
  54. <a href="javascript:;" onclick="f5();">JSON字符串-->JSON对象</a><br/><br/><br/>
  55. <a href="javascript:;" onclick="f6();">JSON字符串-->JSON数组</a><br/><br/><br/>
  56. <a href="javascript:;" onclick="f7();">JSON对象-->JSON字符串</a><br/><br/><br/>
  57. </body>
  58. </html>

4 .Java对象转换成JSON字符串

Java对象转换为JSON字符串;

Java数组转换为JSON字符串;

JSON字符串转换为Java对象;

JSON字符串转换为Java数组。

4.1 问题

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

4.2 方案

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

4.3 步骤

步骤一: 新建实体类 Friend

  1. package com.souvc.json;
  2.  
  3. public class Friend {
  4. private String name;
  5. private int age;
  6.  
  7. public String getName() {
  8. return name;
  9. }
  10.  
  11. public void setName(String name) {
  12. this.name = name;
  13. }
  14.  
  15. public int getAge() {
  16. return age;
  17. }
  18.  
  19. public void setAge(int age) {
  20. this.age = age;
  21. }
  22.  
  23. public String toString() {
  24. return this.name + " " + this.age;
  25. }
  26. }

步骤二: 新建JSONTest类

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

步骤三: 引入jar文件

在添加jar文件的时候,需要导入6个jar文件,缺一不可。

网盘jar包下载地址:http://yunpan.cn/cQyHfiAYWHmhg  访问密码 ab8f

  1. 或是到官方下载最新的json-lib工具包
  2.  
  3. 下载地址:http://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.4/
  4.  
  5. json-lib还需要以下依赖包:
  6.  
  7. jakarta commons-lang 2.5
    jakarta commons-beanutils 1.8.0
    jakarta commons-collections 3.2.1
    jakarta commons-logging 1.1.1
    ezmorph 1.0.6

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

  1. /**
  2. * Java对象转换为JSON字符串
  3. */
  4. public static void test1() {
  5. Friend f = new Friend();
  6. f.setName("Zoro");
  7. f.setAge(19);
  8. JSONObject jsonObj = JSONObject.fromObject(f);
  9. String jsonStr = jsonObj.toString();
  10. System.out.println(jsonStr);
  11. }

步骤五:运行结果

  1. {"age":19,"name":"Zoro"}

步骤六: Java数组(集合)转换为JSON字符串

  1. /**
  2. * JSON字符串转换为Java数组
  3. */
  4. public static void test4() {
  5. String jsonStr = "[{\"name\":\"Luffy\",\"age\":17},"
  6. + " {\"name\":\"Zoro\",\"age\":19}]";
  7. JSONArray jsonArr = JSONArray.fromObject(jsonStr);
  8. List<Friend> friends = (List<Friend>) JSONArray.toCollection(jsonArr,
  9. Friend.class);
  10. for (Friend f : friends) {
  11. System.out.println(f);
  12. }
  13. }

运行结果:

  1. [{"age":19,"name":"Zoro1"},{"age":20,"name":"Zoro2"},{"age":21,"name":"Zoro3"}]

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

  1. /**
  2. * JSON字符串转换为Java对象
  3. */
  4. public static void test3() {
  5. String jsonStr = "{\"name\":\"Luffy\",\"age\":17}";
  6. JSONObject jsonObj = JSONObject.fromObject(jsonStr);
  7. Friend friend = (Friend) JSONObject.toBean(jsonObj, Friend.class);
  8. System.out.println(friend);
  9. }

运行结果:

  1. Luffy 17

步骤八: JSON字符串转换为Java数组(集合)

  1. /**
  2. * JSON字符串转换为Java数组
  3. */
  4. public static void test4() {
  5. String jsonStr = "[{\"name\":\"Luffy\",\"age\":17},"
  6. + " {\"name\":\"Zoro\",\"age\":19}]";
  7. JSONArray jsonArr = JSONArray.fromObject(jsonStr);
  8. List<Friend> friends = (List<Friend>) JSONArray.toCollection(jsonArr,
  9. Friend.class);
  10. for (Friend f : friends) {
  11. System.out.println(f);
  12. }
  13. }

运行结果:

  1. Luffy 17
  2. Zoro 19

4.4 完整代码

Friend.java文件代码如下:

  1. package com.souvc.json;
  2.  
  3. public class Friend {
  4. private String name;
  5. private int age;
  6.  
  7. public String getName() {
  8. return name;
  9. }
  10.  
  11. public void setName(String name) {
  12. this.name = name;
  13. }
  14.  
  15. public int getAge() {
  16. return age;
  17. }
  18.  
  19. public void setAge(int age) {
  20. this.age = age;
  21. }
  22.  
  23. public String toString() {
  24. return this.name + " " + this.age;
  25. }
  26. }

JSONTest 代码:

  1. package com.souvc.json;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.List;
  5.  
  6. import net.sf.json.JSONArray;
  7. import net.sf.json.JSONObject;
  8.  
  9. public class JSONTest {
  10. /**
  11. * Java对象转换为JSON字符串
  12. */
  13. public static void test1() {
  14. Friend f = new Friend();
  15. f.setName("Zoro");
  16. f.setAge(19);
  17. JSONObject jsonObj = JSONObject.fromObject(f);
  18. String jsonStr = jsonObj.toString();
  19. System.out.println(jsonStr);
  20. }
  21.  
  22. /**
  23. * Java数组转换为JSON字符串
  24. */
  25. public static void test2() {
  26. List<Friend> fs = new ArrayList<Friend>();
  27. for (int i = 0; i < 3; i++) {
  28. Friend f = new Friend();
  29. f.setName("Zoro" + (i + 1));
  30. f.setAge(19 + i);
  31. fs.add(f);
  32. }
  33. JSONArray jsonArr = JSONArray.fromObject(fs);
  34. String jsonStr = jsonArr.toString();
  35. System.out.println(jsonStr);
  36. }
  37.  
  38. /**
  39. * JSON字符串转换为Java对象
  40. */
  41. public static void test3() {
  42. String jsonStr = "{\"name\":\"Luffy\",\"age\":17}";
  43. JSONObject jsonObj = JSONObject.fromObject(jsonStr);
  44. Friend friend = (Friend) JSONObject.toBean(jsonObj, Friend.class);
  45. System.out.println(friend);
  46. }
  47.  
  48. /**
  49. * JSON字符串转换为Java数组
  50. */
  51. public static void test4() {
  52. String jsonStr = "[{\"name\":\"Luffy\",\"age\":17},"
  53. + " {\"name\":\"Zoro\",\"age\":19}]";
  54. JSONArray jsonArr = JSONArray.fromObject(jsonStr);
  55. List<Friend> friends = (List<Friend>) JSONArray.toCollection(jsonArr,
  56. Friend.class);
  57. for (Friend f : friends) {
  58. System.out.println(f);
  59. }
  60. }
  61.  
  62. public static void main(String[] args) {
  63. test1();
  64. test2();
  65. test3();
  66. test4();
  67. }
  68.  
  69. }

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

5.1 问题

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

5.2 方案

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

5.3 步骤

步骤一: 新建实体类City

  1. package com.souvc.json;
  2.  
  3. public class City {
  4. private String cityName;
  5. private String cityValue;
  6.  
  7. public City() {
  8. super();
  9. }
  10.  
  11. public City(String cityName, String cityValue) {
  12. super();
  13. this.cityName = cityName;
  14. this.cityValue = cityValue;
  15. }
  16.  
  17. public String getCityName() {
  18. return cityName;
  19. }
  20.  
  21. public void setCityName(String cityName) {
  22. this.cityName = cityName;
  23. }
  24.  
  25. public String getCityValue() {
  26. return cityValue;
  27. }
  28.  
  29. public void setCityValue(String cityValue) {
  30. this.cityValue = cityValue;
  31. }
  32. }

步骤二: 新建ActionServlet

  1. package com.souvc.json;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import net.sf.json.JSONArray;
  14.  
  15. public class ActionServlet extends HttpServlet {
  16. public void service(HttpServletRequest request, HttpServletResponse response)
  17. throws ServletException, IOException {
  18.  
  19. request.setCharacterEncoding("UTF-8");
  20. response.setContentType("text/html;charset=UTF-8");
  21.  
  22. PrintWriter out = response.getWriter();
  23.  
  24. //获得请求路径
  25. String uri = request.getRequestURI();
  26. //截取请求路径
  27. String action = uri.substring(uri.lastIndexOf("/"), uri
  28. .lastIndexOf("."));
  29.  
  30. if (action.equals("/city")) {
  31. String name = request.getParameter("name");
  32. if (name.equals("bj")) {
  33. City c1 = new City("海淀", "hd");
  34. City c2 = new City("东城", "dc");
  35. City c3 = new City("西城", "xc");
  36. List<City> cs = new ArrayList<City>();
  37. cs.add(c1);
  38. cs.add(c2);
  39. cs.add(c3);
  40. JSONArray obj = JSONArray.fromObject(cs);
  41. String str = obj.toString();
  42. out.println(str);
  43.  
  44. } else if (name.equals("sh")) {
  45. City c1 = new City("徐汇", "xh");
  46. City c2 = new City("静安", "ja");
  47. City c3 = new City("黄浦", "hp");
  48. List<City> cs = new ArrayList<City>();
  49. cs.add(c1);
  50. cs.add(c2);
  51. cs.add(c3);
  52. JSONArray obj = JSONArray.fromObject(cs);
  53. String str = obj.toString();
  54. out.println(str);
  55. }
  56.  
  57. }
  58. out.close();
  59. }
  60. }

步骤三: 新建city.html文件

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>city.html</title>
  5.  
  6. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7. <meta http-equiv="description" content="this is my page">
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10. <script type="text/javascript" src="js/json2.js"></script>
  11. <script type="text/javascript">
  12. function getXmlHttpRequest(){
  13. var xhr = null;
  14. if((typeof XMLHttpRequest)!='undefined'){
  15. xhr = new XMLHttpRequest();
  16. }else {
  17. xhr = new ActiveXObject('Microsoft.XMLHttp');
  18. }
  19. return xhr;
  20. }
  21. function change(v1){
  22. var xhr = getXmlHttpRequest();
  23. xhr.open('post','city.do',true);
  24. xhr.setRequestHeader("Content-Type",
  25. "application/x-www-form-urlencoded");
  26. xhr.onreadystatechange=function(){
  27. if(xhr.readyState == 4){
  28. var txt = xhr.responseText;
  29. var citys = txt.parseJSON();
  30. document.getElementById('s2').innerHTML = '';
  31. for(i=0;i<citys.length;i++){
  32. var op =
  33. new Option(citys[i].cityName,
  34. citys[i].cityValue);
  35. document.getElementById('s2').options[i] = op;
  36. }
  37. }
  38. };
  39. xhr.send('name=' + v1);
  40. }
  41. </script>
  42. </head>
  43.  
  44. <body>
  45. <select id="s1" style="width: 120px;" onchange="change(this.value);">
  46. <option value="sh">
  47. 上海
  48. </option>
  49. <option value="bj">
  50. 北京
  51. </option>
  52. </select>
  53. <select id="s2" style="width: 120px;">
  54. </select>
  55. </body>
  56. </html>

步骤四: 运行查看结果

5.4 完整代码

如上。

6 热卖商品动态显示

6.1 问题

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

6.2 方案

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

6.3 步骤

步骤一: 新建Sale类

  1. package com.souvc.json;
  2.  
  3. public class Sale {
  4. private int id;
  5. private String prodName;
  6. private int qty;
  7.  
  8. public Sale() {
  9. super();
  10. }
  11.  
  12. public Sale(int id, String prodName, int qty) {
  13. super();
  14. this.id = id;
  15. this.prodName = prodName;
  16. this.qty = qty;
  17. }
  18.  
  19. public int getId() {
  20. return id;
  21. }
  22.  
  23. public void setId(int id) {
  24. this.id = id;
  25. }
  26.  
  27. public String getProdName() {
  28. return prodName;
  29. }
  30.  
  31. public void setProdName(String prodName) {
  32. this.prodName = prodName;
  33. }
  34.  
  35. public int getQty() {
  36. return qty;
  37. }
  38.  
  39. public void setQty(int qty) {
  40. this.qty = qty;
  41. }
  42. }

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

DBUtil.java文件:

  1. package com.souvc.json;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.DriverManager;
  5. import java.sql.SQLException;
  6.  
  7. /**
  8. * JDBC管理连接的工具类,可以获取连接和关闭连接
  9. */
  10. public class DBUtil {
  11. /**
  12. * 获取连接对象
  13. */
  14. public static Connection getConnection() throws Exception {
  15. Connection conn = null;
  16. try {
  17. Class.forName("com.mysql.jdbc.Driver");
  18. conn = DriverManager.getConnection(
  19. "jdbc:mysql://localhost:3306/csdn", "root", "123456");
  20. } catch (Exception e) {
  21. e.printStackTrace();
  22. throw e;
  23. }
  24. return conn;
  25. }
  26.  
  27. /**
  28. * 关闭连接对象
  29. */
  30. public static void close(Connection conn) throws Exception {
  31. if (conn != null) {
  32. try {
  33. conn.close();
  34. } catch (SQLException e) {
  35. e.printStackTrace();
  36. throw e;
  37. }
  38. }
  39. }
  40. }

执行如下sql语句:

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

  1. package com.souvc.json;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.util.ArrayList;
  7. import java.util.List;
  8.  
  9. public class SaleDAO {
  10. public List<Sale> findAll() throws Exception {
  11. List<Sale> sales = new ArrayList<Sale>();
  12. Connection conn = null;
  13. PreparedStatement stmt = null;
  14. ResultSet rs = null;
  15. try {
  16. conn = DBUtil.getConnection();
  17. stmt = conn.prepareStatement("select * from (select rownum r,"
  18. + "a.* from (select * from t_sale order by qty desc) a) "
  19. + "c where c.r < 4");
  20. rs = stmt.executeQuery();
  21. while (rs.next()) {
  22. Sale s = new Sale(rs.getInt("id"), rs.getString("prodname"), rs
  23. .getInt("qty"));
  24. sales.add(s);
  25. }
  26. } catch (Exception e) {
  27. e.printStackTrace();
  28. throw e;
  29. } finally {
  30. DBUtil.close(conn);
  31. }
  32. return sales;
  33. }
  34. }

步骤三: 新建ActionServlet类

  1. package com.souvc.json;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import net.sf.json.JSONArray;
  14.  
  15. public class ActionServlet extends HttpServlet {
  16. public void service(HttpServletRequest request, HttpServletResponse response)
  17. throws ServletException, IOException {
  18.  
  19. request.setCharacterEncoding("UTF-8");
  20. response.setContentType("text/html;charset=UTF-8");
  21.  
  22. PrintWriter out = response.getWriter();
  23.  
  24. // 获得请求路径
  25. String uri = request.getRequestURI();
  26. // 截取请求路径
  27. String action = uri.substring(uri.lastIndexOf("/"), uri
  28. .lastIndexOf("."));
  29.  
  30. if (action.equals("/city")) {
  31. String name = request.getParameter("name");
  32. if (name.equals("bj")) {
  33. City c1 = new City("海淀", "hd");
  34. City c2 = new City("东城", "dc");
  35. City c3 = new City("西城", "xc");
  36. List<City> cs = new ArrayList<City>();
  37. cs.add(c1);
  38. cs.add(c2);
  39. cs.add(c3);
  40. JSONArray obj = JSONArray.fromObject(cs);
  41. String str = obj.toString();
  42. out.println(str);
  43.  
  44. } else if (name.equals("sh")) {
  45. City c1 = new City("徐汇", "xh");
  46. City c2 = new City("静安", "ja");
  47. City c3 = new City("黄浦", "hp");
  48. List<City> cs = new ArrayList<City>();
  49. cs.add(c1);
  50. cs.add(c2);
  51. cs.add(c3);
  52. JSONArray obj = JSONArray.fromObject(cs);
  53. String str = obj.toString();
  54. out.println(str);
  55. }
  56.  
  57. } else if (action.equals("/sale")) {
  58. SaleDAO dao = new SaleDAO();
  59. try {
  60. List<Sale> all = dao.findAll();
  61. JSONArray arry = JSONArray.fromObject(all);
  62. out.println(arry.toString());
  63. } catch (Exception e) {
  64. e.printStackTrace();
  65. throw new ServletException(e);
  66. }
  67. }
  68. out.close();
  69. }
  70. }

步骤四: 新建sales.html文件

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>sales.html</title>
  5.  
  6. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7. <meta http-equiv="description" content="this is my page">
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9. <style>
  10. #d1 {
  11. width: 500px;
  12. height: 180px;
  13. background-color: #fff8dc;
  14. border: 1px solid red;
  15. margin-left: 350px;
  16. margin-top: 50px;
  17. }
  18. </style>
  19.  
  20. <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
  21. <script type="text/javascript">
  22. function getXmlHttpRequest(){
  23. var xhr = null;
  24. if((typeof XMLHttpRequest)!='undefined'){
  25. xhr = new XMLHttpRequest();
  26. }else {
  27. xhr = new ActiveXObject('Microsoft.XMLHttp');
  28. }
  29. return xhr;
  30. }
  31. function f1(){
  32. setInterval(f2,5000);
  33. }
  34. function f2(){
  35. var xhr = getXmlHttpRequest();
  36. xhr.open('post','sale.do',true);
  37. xhr.setRequestHeader("Content-Type",
  38. "application/x-www-form-urlencoded");
  39. xhr.onreadystatechange=function(){
  40. if(xhr.readyState == 4){
  41. var txt = xhr.responseText;
  42. var sales = txt.evalJSON();
  43. var saleInfo = '当前销量最好的商品是:<br/>';
  44. for(i=0;i<sales.length;i++){
  45. saleInfo += '商品名称:'
  46. + sales[i].prodName + ' 销量:' +
  47. sales[i].qty + '<br/>';
  48. }
  49. $('d1').innerHTML = saleInfo;
  50. }
  51. };
  52. xhr.send(null);
  53. }
  54. </script>
  55. </head>
  56.  
  57. <body onload="f1();">
  58. <div id="d1"></div>
  59. </body>
  60. </html>

步骤五:运行查看结果

6.4 完整代码

源码:  http://yunpan.cn/cQyrTefxWuHfK  访问密码 7b77

JSON实战案例--使用JSON进行数据交换实例的更多相关文章

  1. javascript之JSON小案例,实现添加数据与清楚数据

    对json应用给出一个小案例,加深一些理解: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...

  2. Android之使用json进行网络数据交换

    JSON作为一种轻量级的数据交换格式,凭借其易于阅读和编写.易于解析.传输速度快等优点流行了起来.最近正好在学习Android端从服务端端取数据,Json便派上了用场.好,下面开始切入主题. 1.准备 ...

  3. 数据交换格式Json与XML

    什么是数据交换格式: 主流的有Json.XML.HTML. 数据交换格式的应用场景: 移动端(安卓,IOS)通讯方式采用http协议+Json格式的restful风格. 很多互联网公司都是用Http协 ...

  4. JSON——IT技术人员都必须要了解的一种数据交换格式

    JSON作为目前Web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式.尤其是在Ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选! 今天大家就和猪哥一起 ...

  5. 两种常用的数据交换格式:XML和JSON

    不同编程语言之间的数据传输,需要一种通用的数据交换格式,它需要简洁.易于数据储存.快速读取,且独立于各种编程语言.我们往往传输的是文本文件,比如我们都知道的csv(comma seperated va ...

  6. 数据交换格式 JSON

    1. 什么是 JSON 概念 : JSON 的英文全称是 JavaScript ObjEct Notation, 即 "JavaScript 对象表示法" . 简单来讲 : JSO ...

  7. JSON之Asp.net MVC C#对象转JSON,DataTable转JSON,List转JSON,JSON转List,JSON转C#对象

    一.JSON解析与字符串化 JSON.stringify() 序列化对象.数组或原始值 语法:JSON.stringify(o,filter,indent) o,要转换成JSON的对象.数组或原始值 ...

  8. javascript中字符串格式json如何转化成json对象

    什么是JSON JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法.JSON也是一种轻量级数据交换格式.JSON非常易于人阅读与编写,同时利于 ...

  9. json解包与json封包

    首先,对两个名词进行简单的说明: 1.NSData 用来存储二进制的数据类型.NSData类提供了一种简单的方式,它用来设置缓冲区.将文件的内容读入缓冲区,或将缓冲区的内容写到一个文件.不变缓冲区(N ...

随机推荐

  1. mysql中如何把字符串转换成日期类型

    select date_format('2013-03-09','%Y-%m-%d'); select date_format('2013-03-09','%y-%m-%d'); select STR ...

  2. BootStrap栅格系统原理 笔记

    1.内容居中:效果 关键代码: <div class="container"> .........之前上面添加在body标签下的代码 </div>添加cla ...

  3. C#文件和文件夹输入输出流代码

    1.建立一个文本文件 public class FileClass { public static void Main() { WriteToFile(); } static void WriteTo ...

  4. 1. windows环境安装Node.js

    1. 下载 地址: https://nodejs.org/en/ 2. 下载最新版本v6.1.0 Currrent

  5. IBATIS动态SQL(转)

    直接使用JDBC一个非常普遍的问题就是动态SQL.使用参数值.参数本身和数据列都是动态SQL,通常是非常困难的.典型的解决办法就是用上一堆的IF-ELSE条件语句和一连串的字符串连接.对于这个问题,I ...

  6. C语言回滚(一)

    //用循环计算输入的字符数 #include<stdio.h> #include<string.h> #include<stdlib.h> int main(){ ...

  7. 依赖于spring 4.x的spring组件

    1.Spring Data MongoDB 1.6.x开始依赖于spring 4.x: 2.@Conditional注解: 3.spring-data-redis 1.4.x开始依赖于spring 4 ...

  8. C++ Static(静态成员)的作用总结

    Static是C++中一个常见的关键字,它被用来控制变量的存储方式和可见性. 在类定义中,它的成员(包括数据成员和成员函数)可以用关键字static申明为静态成员.静态成员的特性是不管这个类创建了多少 ...

  9. Javascript的一种代码结构方式——插件式

    上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重.拓展.修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤 ...

  10. compass制作sprite雪碧图

    1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myp ...