Ajax && json在springmvc中的使用

ajax是什么？

是一种用来改善用户体验的技术。其本质是利用浏览器提供的一个特殊的对象（XMLHttpRequest,也可以称之为ajax对象）向服务器发送异步请求。服务器返回部分数据(通常不需要返回完整页面)，浏览器利用这些数据对当前页面做部分更新。整个过程，页面无刷新，不打断用户的操作。
注：异步请求：发送请求的同时，浏览器不会销毁当前页面，用户仍然可以对当前页面做前它操作。

如何获得Ajax对象？

要区分浏览器
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject
("Microsoft.XMLHttp");
}
return xhr;
}

Ajax对象的几个重要的属性

a.onreadystatechange:用来绑定一个事件处理函数，用来处理readystatechange事件。
注：当Ajax对象的readystate属性值发生任何改变（比如从0变成了1），就会产生readystatechange事件。
b.readyState:有五个值（0，1，2，3，4），表示Ajax对象与服务器通信的状态。其中，当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据。
c.responseText:获得服务器返回的文本数据。
d.responseXML:获取服务器返回的xml数据。
e.status:获取状态码。

编程步骤

step1.获得Ajax对象。
step2.发送请求。
get:
a.xhr.open('get'请求类型,'check_uname.do?uname=tom&age=22'页面、参数,true同步还是异步); true:异步；false:同步（浏览器在发送时会锁定当前页面，用户不能对当前页面做其他操作）。
b.xhr.onreadystatechange=f1;
c.xhr.send(null);
post:

a.xhr.open('post'请求类型,'check_uname.do'页面,true同步还是异步);

b.xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

注：按照http协议规范，如果发送post请求，在请求数据包中，应该有content-type消息头。默认情况下Ajax不带该消息头，所以需要调用setRequestHeader()，设置一个消息头

c.xhr.onreadystatechange=f1;

  xhr.send(‘name=tom’);

step3.编写服务器端的程序。
注：通常不用返回完整页面，只需要返回部分文本/数据。
step4.编写事件处理函数。
function f1(){ //先获得服务器返回的数据 if(xhr.readyState == 4 && xhr.status == 200){ var txt = xhr.responseText; } //利用这些数据更新页面 }

缓存问题

IE浏览器发送get请求，会检查浏览器是否访问过该地址，如果访问过，则不再发送新的请求，而是显示之前访问的结果。

解决：在请求后面发送随机数。

json在springmvc中的使用

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">
    <display-name>springmvc-json</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
        <param-name>contextConfigLocation</param-name><!-- 固定写法， -->
        <!-- 
            如果指定了要加载的文件,则会去加载相应的xml,而不会去加载/WEB-INF/下的applicationContext.xml。
             如果没有指定的话，默认会去/WEB-INF/下加载applicationContext.xml。
         -->
        <param-value>classpath:spring-*.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>
</web-app>

spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:jdbc="http://www.springframework.org/schema/jdbc"  
    xmlns:jee="http://www.springframework.org/schema/jee" 
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:aop="http://www.springframework.org/schema/aop" 
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:util="http://www.springframework.org/schema/util"
    xmlns:jpa="http://www.springframework.org/schema/data/jpa"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
        http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
        http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
        http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
    <!-- 启动注解驱动 -->
    <mvc:annotation-driven />
    <!-- 组件扫描 -->  
    <context:component-scan base-package="com.outlook.menbozg"></context:component-scan>
    
</beans>

User.java

package com.outlook.menbozg.entity;

public class User {
    private int id;
    private String name;
    private String age;

    public User() {
        super();
    }

    public User(int id, String name, String age) {
        super();
        this.id = id;
        this.name = name;
        this.age = age;
    }

    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 String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User [id=" + id + ", name=" + name + ", age=" + age + "]";
    }
 
}

Controller

package com.outlook.menbozg.controller;

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

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.outlook.menbozg.entity.User;

@Controller
public class JsonController {
    @RequestMapping("/json1")    //匹配请求
    @ResponseBody    //调用jackson
    public User loadUser() {
        User user = new User(1,"Jack","20");
        return user;
    }
    
    @RequestMapping("/json2")
    @ResponseBody
    public List<User> loadUsers(){
        List<User> list = new ArrayList<User>();
        User user1 = new User(2, "A", "10");
        User user2 = new User(3, "B", "20");
        list.add(user1);
        list.add(user2);
        return list;
    }
}