Unit02： JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持，编码问题

　　Unit02： JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持　　

1. 编码问题

(1)发送get请求

为什么会产生乱码?

ie浏览器提供的ajax对象，对中文会使用gbk来编码，非ie浏览器 会使用utf-8来编码。服务器端默认会使用"iso-8859-1"来解码， 所以会产生乱码。

如何解决?

step1. 在服务器端，统一使用"utf-8"来解码。
<Connector URIEncoding="utf-8"/>

step2. 浏览器端，使用encodeURI对中文进行编码。
注: encodeURI函数会使用utf-8来编码。

(2)发送post请求

为什么会产生乱码?

浏览器所提供的ajax对象都会使用utf-8对中文进行编码。
而服务器端会使用iso-8859-1来解码。

如何解决?

request.setCharacterEncoding("utf-8");

2. JSON (Javascript Object Notation)

(1)JSON是什么?

是一种轻量级的数据交换格式。

什么是数据交换?

将数据转换成一种与平台无关的数据格式（比如xml）,然后交给接收方
来处理。

轻量级

相对于xml，json文档更小，解析的速度更快。

(2)基本语法

表示一个对象

{属性名:属性值,属性名:属性值...}
注：
a. 属性名必须使用双引号括起来。
b. 属性的类型可以是string,number,true/false,null,object。
c. 属性值如果是string,必须使用双引号括起来。

表示由对象组成的数组

[{},{},{}...]

(3)使用json

(1)java对象如何转换成json字符串。

使用jackson工具提供的api。(ObjectMapper)

(2)json字符串如何转换成javascript对象。

使用javascript内置对象 JSON.parse()方法。

3. jQuery对ajax的支持

(1)$.ajax方法

用法: $.ajax({});

(2)load方法

向服务器发送异步请求，然后将服务器返回的数据直接添加到符合要求的 节点之上。

代码：

src/main/java

bean

package bean;

public class Stock {
    private String code;
    private String name;
    private int price;

    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }
}

Stock.java

json

package json;

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

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import bean.Stock;

public class JsonTest {
    /*
     * 将java对象转换成json字符串
     */
    public static void test1() throws JsonProcessingException{
        Stock s = new Stock();
        s.setCode("600877");
        s.setName("中国嘉陵");
        s.setPrice(10);
        //使用jackson提供的工具来转换
        ObjectMapper om =
                new ObjectMapper();
        String jsonStr =
                om.writeValueAsString(s);
        System.out.println(jsonStr);
    }

    public static void test2() throws JsonProcessingException{
        List<Stock> stocks =
                new ArrayList<Stock>();
        for(int i = 0; i < 3; i ++){
            Stock s = new Stock();
            s.setCode("60087" + i);
            s.setName("中国嘉陵" + i);
            s.setPrice(10 + i);
            stocks.add(s);
        }
        ObjectMapper om =
                new ObjectMapper();
        String jsonStr =
                om.writeValueAsString(stocks);
        System.out.println(jsonStr);
    }

    public static void main(String[] args)
            throws JsonProcessingException {
        test2();
    }

}

JsonTest.java

web

package web;

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

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

import com.fasterxml.jackson.databind.ObjectMapper;

import bean.Stock;

public class ActionServlet extends
HttpServlet{
    public void service(
            HttpServletRequest request,
            HttpServletResponse response)
    throws ServletException,IOException{
        response.setContentType(
                "text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri =
                request.getRequestURI();
        String action =
            uri.substring(
                    uri.lastIndexOf("/"),
                    uri.lastIndexOf("."));
        System.out.println("action:" + action);
        if("/quoto".equals(action)){
            //返回几只股票的信息给客户端
            List<Stock> stocks =
                new ArrayList<Stock>();
            Random r = new Random();
            for(int i = 0; i < 8; i ++){
                Stock s = new Stock();
                s.setCode("60087"
                + r.nextInt(10));
                s.setName("中国嘉陵" + r.nextInt(10));
                s.setPrice(r.nextInt(1000));
                stocks.add(s);
            }
            ObjectMapper om =
                    new ObjectMapper();
            String jsonStr =
                    om.writeValueAsString(stocks);
            System.out.println(jsonStr);
            out.println(jsonStr);
        }else if("/getNumber".equals(action)){
            //返回一个随机整数
            Random r = new Random();
            int number = r.nextInt(1000);
            System.out.println(number);
            out.println(number);
        }
    }
}

ActionServlet.java

webapp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    /*
        使用json语法表示对象
    */
    function f1(){
        var obj =
            {"code":"600877","name":"中国嘉陵",
                "price":10};
        alert(obj.name);
    }
    function f2(){
        var obj = {"company":"达内科技",
                "address":{
                    "city":"北京",
                    "street":"北三环西路",
                    "room":2046
                }
        };
        alert(obj.address.street);
    }

    function f3(){
        var arr = [{"name":"Sally","age":22},
                   {"name":"Eric","age":32}];
        alert(arr[1].name);
    }

    //将json字符串转换成javascript对象
    function f4(){
        var str = '{"name":"Sally","age":22}';
        //调用javascript内置对象JSON提供的方法
        //来做转换。
        var obj = JSON.parse(str);
        alert(obj.name);
    }
    function f5(){
        var str = '[{"name":"Sally","age":22},'
                    + '{"name":"Eric","age":32}]';
        //转换完后，得到的是一个数组。
        var arr = JSON.parse(str);
        alert(arr[1].name);
    }
</script>
</head>
<body style="font-size:30px;">
    <a href="javascript:f5();">ClickMe</a>

</body>
</html>

json.html

<%@ page
 contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
    <script type="text/javascript"
        src="js/jquery-1.4.3.js">
    </script>
    <script type="text/javascript">
        $(function(){
            $('#a1').click(f2);
        });
        function f1(){
            $('#d1').load('getNumber.do');
        }
        function f2(){
            $.ajax({
                "url":"getNumber.do",
                "type":"get",
                "dataType":"text",
                "success":function(obj){
                    $('#d1').html(obj);
                }
            });
        }
    </script>

</head>
<body style="font-size:30px;">
    <a id="a1" href="javascript:;">点这儿显示一个随机整数</a><br/>
    <div id="d1"></div>
</body>
</html>

random.jsp

<%@ page
 contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
    <style>
        #d1{
            width:480px;
            height:350px;
            background-color:black;
            margin-left:350px;
            margin-top:20px;
        }
        #d2{
            color:yellow;
            background-color:red;
            height:32px;
        }
        table{
            color:white;
            font-style:italic;
            font-size:24px;
        }
    </style>
    <script type="text/javascript"
    src="js/jquery-1.4.3.js">
    </script>
    <script type="text/javascript">
        $(function(){
            //页面加载完成之后，
            //每隔一段时间执行quoto函数。
            setInterval(quoto,5000);
        });

        function quoto(){
            //利用jQuery提供的方法($.ajax)来
            //向服务器发送异步请求。
            $.ajax({
                "url":"quoto.do",
                "type":"get",
                "dataType":"json",
                "success":function(obj){
                    //处理服务器返回的数据
                    /*
                        obj是服务器返回的数据。
                        如果服务器返回的是json字符串，
                        会自动转换成对应的javascript对象。
                    */
                    //更新表格
                    $('#tb1').empty();
                    for(i = 0; i < obj.length; i ++){
                        var s = obj[i];
                        $('#tb1').append(
                        '<tr><td>' + s.code
                        + '</td><td> ' + s.name
                        + '</td><td>' + s.price
                        + '</td></tr>');
                    }
                },
                "error":function(){
                    //服务器出错，在这儿处理
                }

            });
        }

    </script>
</head>
<body style="font-size:30px;">
    <div id="d1">
        <div id="d2">实时行情</div>
        <div id="d3">
            <table width="100%">
                <thead>
                    <tr>
                        <td>代码</td>
                        <td>名称</td>
                        <td>价格</td>
                    </tr>
                </thead>
                <tbody id="tb1">
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

stock.jsp

WEB-INF

<?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_2_5.xsd" version="2.5">
  <servlet>
      <servlet-name>action</servlet-name>
      <servlet-class>web.ActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>action</servlet-name>
      <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

web.xml

  <dependencies>
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-annotations</artifactId>
          <version>2.2.3</version>
      </dependency>
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.2.3</version>
      </dependency>
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.2.3</version>
      </dependency>
  </dependencies>

pom.xml

扩展内容：

服务端编码：java.net.URLEncoder.encode()

服务端解码：java.net.URLDecoder.decode()

package com.util;

import java.io.UnsupportedEncodingException;
/**
 * url转码、解码
 *
 * @author lifq
 * @date 2015-3-17 下午04:09:35
 */
public class UrlUtil {
    private final static String ENCODE = "UTF-8";
    /**
     * URL 解码
     *
     * @return String
     * @author lifq
     * @date 2015-3-17 下午04:09:51
     */
    public static String getURLDecoderString(String str) {
        String result = "";
        if (null == str) {
            return "";
        }
        try {
            result = java.net.URLDecoder.decode(str, ENCODE);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return result;
    }
    /**
     * URL 转码
     *
     * @return String
     * @author lifq
     * @date 2015-3-17 下午04:10:28
     */
    public static String getURLEncoderString(String str) {
        String result = "";
        if (null == str) {
            return "";
        }
        try {
            result = java.net.URLEncoder.encode(str, ENCODE);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return result;
    }

    /**
     *
     * @return void
     * @author lifq
     * @date 2015-3-17 下午04:09:16
     */
    public static void main(String[] args) {
        String str = "唐胜伟";
        System.out.println(getURLEncoderString(str));
        System.out.println(getURLDecoderString(str));

    }

}

UrlUtil.java