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