程序博客网 > 公司销售数据统计报表

java web开发：ajax技术（二）—— 小数据传递的桥梁JSON

来源：互联网 发布：公司销售数据统计报表 编辑：程序博客网 时间：2024/05/16 02:54

一 什么是JSON

JSON：JavaScript Object Notation——JavaScript对象标识，是一种轻量级的数据交换格式，非常实用与服务器和客户端之间的数据交换

二 为什么要使用JSON

相对于传统的数据XML格式的数据交换而言，JSON数据更加简洁

XML数据交换需要使用大量的标签指定具体数据的格式或者含义，在大量数据网络传输中，比较浪费我们服务器和带宽的资源

JSON数据交换中，使用简单的格式替代了XML中的标签，以非常少的元字符和比较容易理解的字符串格式展现出了普通变量、数组甚至对象。现在也是大部分公司web项目开发中最常用到的数据交换格式，所以，JSON才是我们学习的重点；对于想我一样的初学者，请记住一句话：一个人的精力有限，要把有限的精力投入到最有价值的东西上。

三 JSON怎么表示数据

JSON中的数据分类，主要有以下三种

标量（scalar）：一个单独的的字符串或者数字；

序列（sequence）：多个相关的数据按照一定的顺序排列到一起；还有一个名字叫——数组

映射（mapping）：一个[键-值]对


上面的专业术语，可能理解起来比较费解，那么，我们在JavaScritp代码中使用它们来做几个例子，你会发现，原来JSON是如此的简单而且易于理解

不论标量、序列或者映射，都是JavaScript用来表示数据的一种方式，对于数据的操作，无非就是增、删、改、查四种操作

（1）标量——在index.html页面的<head></head>标签中添加如下内容，在浏览器中测试

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

<script type="text/javascript">
            // 标量：其实就是存放字符串或者数字或者其他基本数据的变量
            var scalarStr = "abc";
            var scalarNum = 12.00;
            // 输出标量的值
            alert(scalarStr);
            alert(scalarNum);

</script>

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（2）序列——在index.html页面的<head></head>标签中添加如下内容，在浏览器中测试

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

<script type="text/javascript">
           // 序列：其实就是数组
            var seqStr = ["a" , "b" , "c"];
            var seqNum = [1, 3 , 4];
            var seq = [false , "a" , 12];
            // 输出序列中指定索引位置的值，索引从0开始
            alert("序列--" +seqStr[0]);
            // 输出序列
            alert("序列--" +seqNum);
            // 输出混合序列
            alert("序列--" +seq);

</script>

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（3）映射——在index.html页面的<head></head>标签中添加如下内容，在浏览器中测试

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

<script type="text/javascript">
          // 映射
            var mapping1 = {"a" : "A" , "b" : "B"};
            var mapping2 = {"a" : 65 , "b" : 66};
            var mapping3 = {"a":23, "b":{"a":12,"b":12}};
            // 输出映射中指定的值
            alert("映射--" + mapping1.a);
            // 输出映射中指定的值
            alert("映射--" + mapping2.a + "-" + mapping2.b);
            // 输出映射中指定的值
            alert(mapping3.b.a);

</script>

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

用面向对象的思想，当一个语言中有了变量、数组、映射，就可以表示一切对象了，everything is object

四 Ajax中使用JSON


通过上面的列子，我们可以看到，JSON对象的使用非常简单并且容易理解，那么，我们在Ajax中怎么使用Json来从服务器向客户端传递数据呢

下面我们通过一个简单的hello json来展示服务器和客户端之间的数据交换

（1）控制器——HelloServlet

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

package com.phome.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.security.auth.message.callback.PrivateKeyCallback.Request;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // 设置编码过滤
        req.setCharacterEncoding("GB18030");
        resp.setContentType("text/html;charset=gb18030");
        // 获取输出流
        PrintWriter out = resp.getWriter();
        // 向响应中输出数据
        out.write("Hello Wolrd!");
        // 刷新并关闭输出流
        out.flush();
        out.close();
    }
    
}


~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（2）web.xml配置

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>ajax_helloworld</display-name>
 
  <servlet>
      <servlet-name>helloajax</servlet-name>
      <servlet-class>com.phome.servlet.HelloServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>helloajax</servlet-name>
      <url-pattern>/helloajax</url-pattern>
  </servlet-mapping>
 
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（3）页面配置

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
        function getMsg() {
            // 1. 创建XMLHttpRequest对象
            var xmlHttp;
            try {
                xmlHttp = new XMLHttpRequest;    
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");    
                } catch (e) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
                    } catch (e) {
                        alert("不支持Ajax");
                    }
                }
            }
            // 2. 定义处理响应的代码
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var result = xmlHttp.responseText;
                    alert(xmlHttp);
                    alert(result);
                    document.getElementById("text").value = result;
                }
                
            };
            // 3. 打开服务器连接
            xmlHttp.open("post", "helloajax", true);
            // 4. 发送请求
            xmlHttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
            xmlHttp.send(null);
        }
    </script>
  </head>
 
  <body>
    <input type="text" id="text" /><br />
    <input type="button" value="get" onclick="getMsg()"/>
  </body>
</html>

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（4）测试

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

点击按钮，文本输入框中会出现从服务器返回的HelloWorld字样

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~


我们发现，在简单的数据传输中，JSON的引入，让服务器和客户端的交互，开始变的eary，但是使用JSON传递简单的字符串（标量）基本没有任何问题，如果传递的是我们Java类的实力对象呢？这样JSON字符串的拼写就会变的异常困难，可以参考 [java web开发：ajax技术（一）]文章中最后一个使用JSON传递数据的示例。


那么如此好用的JSON就因为JSON字符串的拼写比较困难就放弃吗？当然不是，程序猿一般都是比较懒但是有原则的人，我们遇到的困难，已经在某些框架中被解决掉了。

接下来我们看看怎么样通过简单的方式实现Java对象和JSON字符串之间的转换的。

五 Java解析JSON

java解析json并完成java对象和json之间的转换，需要用到json-lib提供的jar包

最新的jar包是json-lib-2.4-jdk15.jar，可以转入当前空间中找到并且下载它以及它以来的jar包


java解析json需要用到的jar包如下：

json-lib-2.4-jdk15.jar

ezmorph-1.0.6.jar

commons-logging-1.1.1.jar

commons-lang-2.4.jar

commons-collections-3.2.1.jar

commons-beanutils-1.7.0.jar


实例：Java对象和JSON之间的转换——JSONObject/JSONArray的使用

创建一个普通的Java项目

（1）创建一个用户地址实体类——Address.java

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

public class Address {
    private int id;
    private String pro;
    private String city;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getPro() {
        return pro;
    }

    public void setPro(String pro) {
        this.pro = pro;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public Address(int id, String pro, String city) {
        super();
        this.id = id;
        this.pro = pro;
        this.city = city;
    }

    public Address() {
        super();
        // TODO Auto-generated constructor stub
    }

}

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（2）创建一个用户实例——User.java

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

public class User {
    private int id;
    private String username;
    private String password;
    private int age;
    private String gender;
    private Address addr;

    
    public Address getAddr() {
        return addr;
    }

    public void setAddr(Address addr) {
        this.addr = addr;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getAge() {
        return age;
    }

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

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public User(int id, String username, String password, int age, String gender, Address addr) {
        super();
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.gender = gender;
        this.addr = addr;
    }
}

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（3）测试程序——Test.java

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

package jsontest;

import net.sf.json.JSONArray;

public class Test {
    public static void main(String[] args) {
        Address addr = new Address(1, "甘肃省" , "西安市");
        // 创建一个用户实例对象
        User user = new User(1, "admin", "123", 23, "男",addr);
        // 将用户实例对象转换成json
        JSONArray json = JSONArray.fromObject(user);
        // 输出json格式的字符
        System.out.println(json.toString());
    }
}

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

（4）运行测试——java对象转换json，运行测试程序，得到结果

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~

[{"addr":{"city":"西安市","id":1,"pro":"甘肃省"},"age":23,"gender":"男","id":1,"password":"123","username":"admin"}]

~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~



好了，我们在项目中需要的将数据从服务器使用JSON格式传递到客户端的编码过程完成，后续的开发，就需要读者能参考前一节中怎么使用Ajax熟悉操作具体的业务流程了。


待续——JSON在服务器和浏览器之间的数据交互

0 0
公司销售数据统计报表 公司销售数据统计报表
原创粉丝点击
热门IT博客
查看ftp使用的端口查看ftp使用的端口
在国外怎么注册淘宝在国外怎么注册淘宝
两年程序员转行做什么
阿里云备案文件
adobe dw软件序列号
金蝶软件最新版本
seo不好干
淘宝助理打印没反应
华为海洋网络 面试
量子恒道和数据魔方
蒋中挺和肖秀荣 知乎
软件检测报告模板
qq飞车t3神谕天尊数据
算法基础第5版书怎么样
模块数据出现异常
java web服务开发 pdf
买假条 淘宝怎么搜索
期货从业软件
鹰眼软件定位下载
淘宝市场行情标准版
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 排毒流瑜伽 初级流瑜伽 什么叫流瑜伽 流瑜伽书籍 流瑜伽 哈达瑜伽 流瑜伽拜日式 哈达瑜伽 流瑜伽 流瑜伽好处 流瑜伽呼吸 流瑜伽 体式 流璃美人煞 硫璃瓦多少钱一平方 东风电动物流车6万元 手机流畅度排名 上海流畅度护肤品 2018安卓系统流畅度排名 糟糠之妻做皇后 承流 眼晴流眼泪是什么原因 马眼流脓怎么回事 眼晴老是流眼泪是什么原因 嘴歪眼斜流口水 流眼泪的图片 眼睛总是流眼泪怎么回事 流眼泪图片 感冒流眼泪怎么回事 有许多时候眼泪就要流 情歌流眼泪 眼睛老流眼泪怎么回事 眼睛疼流眼泪 婴儿流眼泪 宝宝流眼泪怎么回事 睡觉流眼泪 快速流眼泪摁穴位 鼻子酸流眼泪 宝宝眼睛流眼泪 眼睛痛流眼泪 眼泪不再为你而流 眼泪为你流 经常流眼泪 怎样10秒快速流眼泪 为什么感冒会流眼泪

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里