zoukankan html css js c++ java

13、JavaEE--Ajax

AJAX

AJAX是Asynchronous JavaScript And XML的缩写，指异步JavaScript和XML。

它是一种日渐流行的Web编程方式：

Better
Faster
User-Friendly

它不是一种语言，而是一种用于创建更好更快，以及交互性更强的Web应用程序的技术。是基于JavaScript、XML、HTML、CSS新用法。

运用HTML和CSS来实现页面，表达信息。
运用XHTMLHttpRequest和Web服务器进行数据的异步交换。
运用JavaScript操作DOM，实现动态局部刷新。

AJAX基础

传统的网页，要想更新内容或提交一个表单，就要重新载入页面；使用AjAX技术的页面，通过后台跟服务器进行少量的数据交换，网页就

可以实现异步局部更新。

同步和异步

传统Web交互方式-同步
Ajax Web交互方式-异步

XMLHttpRequest对象

XMLHttpRequest 对象用于在后台与服务器交换数据。它包含如下功能：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest的属性和方法

XMLHttpRequest对象包含如下属性：

属性	描述
readyState	表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open；1：open方法成功调用，但Sendf方法未调用；2：send方法已经调用，尚未开始接受数据；3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；4：完成，即响应数据接受完成。
Onreadystatechange	请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。
responseText	服务器响应的文本内容
responseXML	服务器响应的XML内容对应的DOM对象
Status	服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
statusText	服务器返回状态的文本信息。

XMLHttpRequest对象包含如下方法：

方法	描述
Open(string method,string url,boolean asynch,String username,string password)	指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；Method:表示http请求方法，一般使用"GET","POST".url：表示请求的服务器的地址；asynch：表示是否采用异步方法，true为异步，false为同步；后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
Send(content)	向服务器发出请求，如果采用异步方式，该方法会立即返回。content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
SetRequestHeader(String header,String Value)	设置HTTP请求中的指定头部header的值为value.此方法需在open方法以后调用，一般在post方式中使用。
getAllResponseHeaders()	返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
getResponseHeader(String header)	返回HTTP响应头中指定的键名header对应的值
Abort()	停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

xmlhttp = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

同时兼容新版本和老版本的写法：

var request;
if(window.XMLHttpRequest) {
    request = new XMLHttpRequest();// IE7+、Firefox、Chrome、Opera、Safari
}else {
    request = new ActiveXObject("Microsoft.XMLHTTP");// IE6、IE5
}

AJAX编码步骤

使用Ajax进行请求包含如下步骤：

1、创建XMLHttpRequest对象。
2、注册状态监控回调函数。
3、建立与服务器的异步连接。
4、发出异步请求

首先创建Servlet用于接收html发送的请求：

public class ServletDemo extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("Servlet执行啦！");
        response.getWriter().write("Hello Client!");
    }
}

配置web.xml中的映射，

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>ServletDemo</servlet-name>
        <servlet-class>com.legend.demo.ServletDemo</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ServletDemo</servlet-name>
        <url-pattern>/servlet/ServletDemo</url-pattern>
    </servlet-mapping>
</web-app>

然后创建ajaxdemo.html文件，用于向向后台异步请求数据:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>异步请求的编码步骤</title>
        <script type="text/javascript">
            // 点击button1发出异步请求ServletDemo1
            window.onload = function () {
                document.getElementById("button1").onclick = function () {
                    // 1、创建XMLHttpRequest对象
                    var request;
                    if(window.XMLHttpRequest) {
                        // IE7+、Firefox、Chrome、Opera、Safari
                        request = new XMLHttpRequest();
                    }else {
                        // IE6、IE5
                        request = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    // 2、注册状态事件监听器(响应结果)
                    request.onreadystatechange = function () {// 执行异步请求结束后的回调
                        if (request.readyState == 4 && request.status == 200) { // 异步请求执行成功，拿到请求结果。
                            alert("异步请求完毕！" + request.responseText);
                        }
                    }
                    // 3、建立与服务器的连接
                    request.open("GET", "/servlet/ServletDemo");
                    // 4、发出异步请求数据,GET方式没有请求正文
                    request.send(null);
                };
            }
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="异步请求"/>
    </body>
</html>

AJAX案例

用户登录检查

1、创建登录页面：login.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>检测用户名是否可用</title>
        <script type="text/javascript">
            window.onload = function () {
                // 当username失去焦点触发异步请求
                document.getElementById("username").onblur = function () {
                    var request;
                    if(window.XMLHttpRequest) {
                        request = new XMLHttpRequest();
                    }else {
                        request = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    // 执行异步请求结束后的回调
                    request.onreadystatechange = function () {
                        if (request.readyState == 4 && request.status == 200) {
                            var htmlText = request.responseText;
                            document.getElementById("msg").innerHTML = htmlText;
                        }
                    }
                    // GET请求方式
                   request.open("GET", "/servlet/LoginServlet?username="
                        + this.value + "&time=" + new Date().getTime());
                    request.send(null);
                }
            }
        </script>
    </head>
    <body>
        <!--可以：span显示绿色的提示；不可用：span显示红色的提示-->
        用户名：<input type="text" id="username" name="username"><span id="msg"></span>
    </body>
</html>

由于GET方式发中文数据需要进行URL编码，可以使用POST的方式提交数据，需要指明正文：

// Post请求方式
request.open("POST", "/servlet/LoginServlet");
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send("username=" + this.value);

2、编写LoginServlet处理登录的逻辑

public class LoginServlet extends HttpServlet {
    private List<String> names = new ArrayList<String>();
    @Override
    public void init() throws ServletException {
        names.add("legend");
        names.add("vincent");
        names.add("uding");
        names.add("kevin");
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        String username = request.getParameter("username");
        if (username.equals("") && username.length() <= 0) {
            return;
        }
        if (names.contains(username)) {
            writer.write("<font color='red'>用户名已存在</font>");
        }else {
            writer.write("<font color='green'>用户名可用</font>");
        }
    }
}

web.xml的配置如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>com.legend.demo.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/servlet/LoginServlet</url-pattern>
    </servlet-mapping>
</web-app>

显示商品信息

1、创建TableServlet处理类

public class TableServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        List<Product> products = ProductDB.findProducts();
        // 列表展示信息交给jsp处理
        request.setAttribute("products", products);
        request.getRequestDispatcher("/listProduct.jsp").forward(request, response);
    }
}

web.xml中的配置如下：

<servlet>
    <servlet-name>TableServlet</servlet-name>
    <servlet-class>com.legend.demo.TableServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>TableServlet</servlet-name>
    <url-pattern>/servlet/TableServlet</url-pattern>
</servlet-mapping>

2、创建产品类和DB类：Product.java、ProductDB.java

Product.java

public class Product {
    private int id;
    private String name;
    private float price;
    public Product(int id, String name, float price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }
}

ProductDB.java

public class ProductDB {
    private static List<Product> products = new ArrayList<Product>();
    static {
        products.add(new Product(1, "相机", 1200));
        products.add(new Product(2, "冰箱", 800));
        products.add(new Product(3, "洗衣机", 960));
        products.add(new Product(4, "空调", 2300));
    }
    public static List<Product> findProducts() {
        return products;
    }
}

3、由于服务端输出表格用打印的形式会非常麻烦，可以使用 JSTL技术来用JSP处理一个表格：listProduct.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<table border="1">
    <tr>
        <th>选择</th>
        <th>名称</th>
        <th>价格</th>
    </tr>
    <c:forEach items="${products}" var="person">
        <tr>
            <td><input type="checkbox" name="ids" value="${person.id}"></td>
            <td>${person.name}</td>
            <td>${person.price}</td>
        </tr>
    </c:forEach>
</table>

4、编写product.html，展示商品列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>显示商品信息</title>
        <script type="text/javascript">
            function showProducts() {
                var request;
                if(window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                }else {
                    request = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 执行异步请求结束后的回调
                request.onreadystatechange = function () {
                    if (request.readyState == 4 && request.status == 200) {
                        var htmlText = request.responseText;
                        document.getElementById("div").innerHTML = htmlText;
                    }
                }
                // GET请求方式
                request.open("GET", "/servlet/TableServlet?" + new Date().getTime());
                request.send(null);
            }
        </script>
    </head>
    <body>
        <h1><a href="javascript:showProducts();">商品列表</a></h1>
        <hr/>
        <div id="div"></div>
    </body>
</html>

输出结果：

XStream

Xstream是一个简单类库，用来转换java对象成为XML和转换XML成为Java对象的库。

在解析XML时需要用到如下库：

xpp3_min-1.1.4c（xml pull解析）

JavaBean -> XML

1、首先创建JavaBean类

public class Person {
    private String name;
    private String gender;
    public Person(String name, String gender) {
        this.name = name;
        this.gender = gender;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
}

2、然后编写测试方法：

public class XStreamDemo {
    // 使用XStream将javaBean转换成xml
    @Test
    public void test1() {
        Person person = new Person("legend", "男");
        XStream xstream = new XStream();
        // 由于根标签默认是全包名，这里可以自己指定
        xstream.alias("person", Person.class);
        String s = xstream.toXML(person);
        System.out.println(s);
    }
}

输出结果：

legend 男

除此之外，XStream还可以解析一些复杂的Bean类型，都非常简单。这里主要说下XStream中对JavaBean使用的几种注解：

@XStreamAlias：对类和变量设置别名。
@XstreamAsAttribute：设置变量生成属性。
@XStreamOmitField：设置变量不生成到XML。
@XStreamImplicit(itemFieldName = hobbies)：设置集合类型变量别名。

在XStream生成XML使用注解需要设置如下方法：

xStream.autodetectAnnotations(true)

范例：使用注解的方式生成XML

@XStreamAlias("person")
public class Person {
    @XStreamAsAttribute
    private String name;
    @XStreamOmitField
    private String gender;
    @XStreamImplicit(itemFieldName = "addr")
    private List<Address> addresses = new ArrayList<Address>();
    public Person(String name, String gender) {
        this.name = name;
        this.gender = gender;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public List<Address> getAddresses() {
        return addresses;
    }
    public void setAddresses(List<Address> addresses) {
        this.addresses = addresses;
    }
}

测试的方法：

@Test
public void test2() {
    Person person = new Person("legend", "男");
    person.getAddresses().add(new Address("广东", "深圳", "20000"));
    person.getAddresses().add(new Address("广西", "桂林", "30000"));
    XStream xstream = new XStream();
    xstream.autodetectAnnotations(true);
    String s = xstream.toXML(person);
    System.out.println(s);
}

输出结果：

<person name="legend">
  <addr>
    <province>广东</province>
    <city>深圳</city>
    <zipcode>20000</zipcode>
  </addr>
  <addr>
    <province>广西</province>
    <city>桂林</city>
    <zipcode>30000</zipcode>
  </addr>
</person>

省市联动案例

构造基础数据

1、创建bean实体：Province.java 和 City.java

Province.java

@XStreamAlias("province")
public class Province {
    @XStreamAsAttribute
    private String name;
    @XStreamAsAttribute
    private String prefix;
    private List<City> citys = new ArrayList<City>();
    public Province(String name, String prefix) {
        this.name = name;
        this.prefix = prefix;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPrefix() {
        return prefix;
    }
    public void setPrefix(String prefix) {
        this.prefix = prefix;
    }
    public List<City> getCitys() {
        return citys;
    }
    public void setCitys(List<City> citys) {
        this.citys = citys;
    }
}

City.java

@XStreamAlias("city")
public class City {
    @XStreamAsAttribute
    private String name;
    private String desc;
    public City(String name, String desc) {
        this.name = name;
        this.desc = desc;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
}

2、使用ProvinceDemo测试数据

public class ProvinceDemo {
    @Test
    public void test() {
        List<Province> provinces = new ArrayList<Province>();
        Province province1 = new Province("广东", "GD");
        Province province2 = new Province("湖南", "HN");
        province1.getCitys().add(new City("广州", "金融城市"));
        province1.getCitys().add(new City("深圳", "科技城市"));
        province1.getCitys().add(new City("佛山", "工业城市"));
        province2.getCitys().add(new City("长沙", "省会城市"));
        province2.getCitys().add(new City("株洲", "工业城市"));
        province2.getCitys().add(new City("湘潭", "槟榔城市"));
        provinces.add(province1);
        provinces.add(province2);
        XStream xStream = new XStream();
        xStream.autodetectAnnotations(true);
        xStream.alias("provinces", List.class);
        String str = xStream.toXML(provinces);
        System.out.println(str);
    }
}

输出结果：

<provinces>
  <province name="广东" prefix="GD">
    <citys>
      <city name="广州">
        <desc>金融城市</desc>
      </city>
      <city name="深圳">
        <desc>科技城市</desc>
      </city>
      <city name="佛山">
        <desc>工业城市</desc>
      </city>
    </citys>
  </province>
  <province name="湖南" prefix="HN">
    <citys>
      <city name="长沙">
        <desc>省会城市</desc>
      </city>
      <city name="株洲">
        <desc>工业城市</desc>
      </city>
      <city name="湘潭">
        <desc>槟榔城市</desc>
      </city>
    </citys>
  </province>
</provinces>

实现省市联动

1、创建ProvinceServlet.java类响应数据给页面

public class ProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        List<Province> provinces = new ArrayList<Province>();
        Province province1 = new Province("广东", "GD");
        Province province2 = new Province("湖南", "HN");
        province1.getCitys().add(new City("广州", "金融城市"));
        province1.getCitys().add(new City("深圳", "科技城市"));
        province1.getCitys().add(new City("佛山", "工业城市"));
        province2.getCitys().add(new City("长沙", "省会城市"));
        province2.getCitys().add(new City("株洲", "工业城市"));
        province2.getCitys().add(new City("湘潭", "槟榔城市"));
        provinces.add(province1);
        provinces.add(province2);
        XStream xStream = new XStream();
        xStream.autodetectAnnotations(true);
        xStream.alias("provinces", List.class);
        String str = xStream.toXML(provinces);
        // 解决XML中文乱码
        response.setContentType("text/xml;charset=UTF-8");
        response.getWriter().write(str);
    }
}

web.xml中的配置：

<servlet>
    <servlet-name>ProvinceServlet</servlet-name>
    <servlet-class>com.legend.demo.ProvinceServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ProvinceServlet</servlet-name>
    <url-pattern>/servlet/ProvinceServlet</url-pattern>
</servlet-mapping>

2、在HTML中使用Ajax获取响应的XML数据，然后通过JS解析，并添加到Select标签中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市二级联动</title>
        <script type="text/javascript">
            var xmlDoc;
            window.onload = function () {
                // 异步请求，得到xml文档，遍历省份的名称给第一个select加opition
                var request;
                if(window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                }else {
                    request = new ActiveXObject("Microsoft.XMLHTTP");
                }
                request.onreadystatechange = function () {
                    if (request.readyState == 4 && request.status == 200) {
                        xmlDoc = request.responseXML;
                        // DOM方式解析XML中的省份名称
                        var xmlProvincesTag = xmlDoc.getElementsByTagName("province");
                        for (var i = 0; i < xmlProvincesTag.length; i++) {
                            // 获取到省份名称，设置值给select标签
                            var provinceName = xmlProvincesTag[i].getAttribute("name");
                            var provincePrefix = xmlProvincesTag[i].getAttribute("prefix");
                            var opition = new Option(provinceName, provincePrefix);
                            document.getElementById("province").add(opition);
                        }
                    }
                }
                request.open("GET", "/servlet/ProvinceServlet?" + new Date().getTime());
                request.send(null);
            }
            // 解析城市数据
            function selectCity(provideSelect) {
                // 每次触发方法前清理数据
                document.getElementById("city").innerHTML = "";
                var prefixProvince = provideSelect.value;
                // 遍历xml文档，找到省份的元素
                var xmlProvinceTag = xmlDoc.getElementsByTagName("province");
                for (var i = 0; i < xmlProvinceTag.length; i++) {
                    // 判断选中的缩写名称等于遍历的缩写属性时
                    if (prefixProvince == xmlProvinceTag[i].getAttribute("prefix")) {
                        var xmlCityTag = xmlProvinceTag[i].getElementsByTagName("city");
                        for (var j = 0; j < xmlCityTag.length; j++) {
                            var option = new Option(xmlCityTag[j]
                                .getAttribute("name"), xmlCityTag[j].getAttribute("name"))
                            document.getElementById("city").add(option);
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <select id="province" name="province" onchange="selectCity(this)"></select>
        <select id="city" name="city"></select>
    </body>
</html>

这种解析方式比较复杂，后期会借助jQuery来进行操作就非常的方便。

JSON格式数据

在JavaScript中其实JSON格式的数据就是JavaScript中的对象。这里我们演示如何解析后台反馈的JSON数据。

public class JsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/plain;charset=UTF-8");
        Person person = new Person("legend", "男性");
        PrintWriter writer = response.getWriter();
        writer.write("{name:'" + person.getName() + "',gender:'" + person.getGender() + "'}");
    }
}

然后HTML中获取后台反馈的JSON文本，将其转换为JSON串并显示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>解析Json数据</title>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("button1").onclick = function () {
                    var request;
                    if(window.XMLHttpRequest) {
                        request = new XMLHttpRequest();
                    }else {
                        request = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    request.onreadystatechange = function () {
                        if (request.readyState == 4 && request.status == 200) {
                            // 获取到服务器反馈的Json数据
                            var jsonText = request.responseText;
                            //重点：JavaScript将文本转换为JSON
                            var person = eval("("+jsonText+")");
                            document.getElementById("div").innerHTML = person.name + ":" + person.gender;
                        }
                    }
                    request.open("GET", "/servlet/JsonServlet?" + new Date().getTime());
                    request.send(null);
                };
            }
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="获取数据"><br/>
        <div id="div"></div>
    </body>
</html>

上面服务端组织数据的方式非常的麻烦，我们可以通过Json_lib库来生成Json数据，需要引入如下Jar包：

commons-beanutils-1.8.3.jar
commons-collections-3.2.1.jar
commons-lang-2.6.jar
commons-logging-1.1.1.jar
ezmorph-1.0.6.jar
json-lib-2.4-jdk15.jar

数组 -> JSON

@Test
public void test() {
    String strs[] = {"aaa", "bbb", "ccc"};
    JSONArray jsonArray = JSONArray.fromObject(strs);
    System.out.println(jsonArray);
}

输出结果：

["aaa","bbb","ccc"]

注意：除数组外，List、Set都可以使用这种方式进行转换。

Map-> JSON

@Test
public void test() {
    Map<String, String> map = new HashMap<>();
    map.put("name", "legend");
    map.put("gender", "男");
    map.put("age", "28");
    JSONObject object = JSONObject.fromObject(map);
    System.out.println(object);
}

输出结果：

"gender":"男","name":"legend","age":"28"}

注意：除Map外，JavaBean也可以使用这种方式进行转换。

如果想过滤掉JavaBean中某个字段不包含在生成的JSON中可以使用JsonConfig对象来操作:

JsonConfig cfg = new JsonConfig();
cfg.setExcludes(new String[]{"gender"});
JSONObject object = JSONObject.fromObject(person, cfg);

查看全文

相关阅读:
codeforces_346A Alice and Bob(数学)
POJ_2533 Frogger 最小瓶颈路
 hdu1205_吃糖果
 POJ_2503 Babelfish 字典树
 在PC上登录多个微信账号
 查看百度云用户的分享文件
 QQ邮箱收不到ins发的验证码
 试用Fakeapp
为什么使用网易邮箱
 插入央视网站视频

原文地址：https://www.cnblogs.com/pengjingya/p/14992271.html