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