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