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

(4)编程步骤

step1. 获得ajax对象    比如   var xhr = getXhr();step2. 调用ajax对象的方法，发送请求    方式一 get请求    xhr.open('get','check.do?adminCode=king',true);    xhr.onreadystatechange = f1;    xhr.send(null);    注:        true: 异步 (浏览器不会销毁当前页面，用户仍然可以                对当前页面做其它操作)        false:同步 (浏览器不会销毁当前页面,但是会锁定当前                页面，用户不能够对当前页面做任何操作)。    方式二 post请求    xhr.open('post','check.do',true);    xhr.setRequestHeader('content-type',        'application/x-www-form-urlencoded');    xhr.onreadystatechange = f1;        xhr.send('adminCode=king');    注(了解)：        按照http协议要求，如果发送的是post请求，应该包含有        content-type消息头，但是，ajax默认不会带这个消息头，        所以，需要调用setRequestHeader方法来添加这个消息头。step3. 编写服务器端的程序    注：不需要返回完整的页面，只需要返回部分数据。step4. 编写事件处理函数    if(xhr.readyState == 4 &&         xhr.status == 200){        //ajax对象已经获得了服务器返回的所有数据，        //而且服务器处理正确。        var txt = xhr.responseText;        页面更新...    }

1. 编码问题

(1)get请求

1)为什么会有乱码?ie浏览器提供的ajax对象，在发送get请求时，会对中文参数值使用"gbk"来编码，其它浏览器会使用"utf-8"来编码。服务器端默认会使用"iso-8859-1"来解码。所以会有乱码。2)如何解决?    step1. 服务器端，统一使用"utf-8"来解码。    可以修改        <Connector URIEncoding="utf-8" />    step2.客户端，使用encodeURI函数对中文参数值进行编码。    注：        encodeURI函数是javascript内置的函数，会使用"utf-8"        来编码。

(2)post请求

1)为什么会有乱码?浏览器提供的ajax对象在发送post请求时，对中文参数值会使用"utf-8"来编码，而服务器端会使用"iso-8859-1"来解码。2)如何解决?    request.setCharacterEncoding("utf-8")

2. 缓存问题

(1)什么是缓存问题?

如果使用ie浏览器提供的ajax对象发送get请求，会比较请求地址是否访问过，如果访问过，则不再发送新的请求，而是将第一次访问的结果显示出来（也就是说，第一次访问时，会将服务器返回的结果缓存下来了）。

(2)如何解决?

在请求地址后面添加一个随机数。

3. json (javascript object notation)

(1)json是什么?

是一种轻量级的数据交换格式。注：json借鉴了javascript的部分语法    注：    数据交换:指的是将要交换的数据转换成一种与平台无关的        数据格式（比如xml）,然后发送给接收方来处理。    轻量级：json相对于xml而言，文档更小，解析速度更快。

(2)语法

1)表示一个对象{属性名：属性值,属性值:属性值...}    注意：    a.属性名必须使用双引号括起来。    b.属性值可以string,number,true/false,null,object。    c.属性值如果是string,必须使用双引号括起来。2)表示对象组成的数组[{},{},{}...]

(3)使用json

1)java对象如何转换成json字符串?    使用jackson提供的api(ObjectMapper)。2)将json字符串转换成javascript对象?    使用javascript内置对象JSON提供的parse()函数。

---

示例代码：

src/main/java

bean

Stock.java

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;    }}

json

JsonTest.java

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();    }}

web

ActionServlet.java

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);        }    }}

webapp

json.html

<!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>

random.jsp

<%@ 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>

stock.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>

WEB-INF

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_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>

pom

<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>