一、Ajax简介:
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)是与服务器交换数据的技术。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
常用方法:
$.ajax({
url:'http://www.test.com',
type:'POST', //GET
async:true, //或false,是否异步
data:{
name:'huang',age:23
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log('成功')
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
当然还有 .get(), .post()等等方法。
具体的可以参考w3c
二、demo实现
纸上谈来终觉浅,说了概念,还是要具体做才行。
该demo很简单,使用SpringMVC+Ajax完成简单的根据输出的id可以点击查询显示相应信息,注意并不会刷新页面。
该项目是基于Maven的。
1.首先是pom.xml文件:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>SpringMVC_AJAX</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>SpringMVC_AJAX Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.0</version>
</dependency>
<dependency>
<groupId>cglib</groupId>
<artifactId>cglib</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>asm</groupId>
<artifactId>asm</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<finalName>SpringMVC_AJAX</finalName>
</build>
</project>
2.实体类:
public class User {
private long id;
private String username;
private String pswd;
public User() {
}
public User(long id, String username, String pswd) {
super();
this.id = id;
this.username = username;
this.pswd = pswd;
}
public long getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPswd() {
return pswd;
}
public void setPswd(String pswd) {
this.pswd = pswd;
}
@Override
public String toString() {
return "User [id=" + id + ", username=" + username + ", pswd=" + pswd
+ "]";
}
}
3.userDao
public interface UserDao {
public User addUser(User user);
public long deleteUser(Long id);
public User queryOneUser(Long id);
public User changeUser(User user);
public List<User> getUserList();
}
4.userDaoImpl
@Repository("userDao")
public class UserDaoImpl implements UserDao {
private static List<User> users;
//为了方便,这里直接构建需要的数据
{
users = new ArrayList<User>();
users.add(new User(101, "Mike", "123"));
users.add(new User(102, "Huang", "4235"));
users.add(new User(103, "Mao", "657567"));
}
public User addUser(User User) {
//User.setId(System.currentTimeMillis());
users.add(User);
return User;
}
public long deleteUser(Long id) {
for (User User : users) {
if (User.getId() == id){
users.remove(User);
return id;
}
}
return id;
}
public User queryOneUser(Long id) {
User user = new User();
for (User user2 : users) {
if (user2.getId() == id){
return user2;
}
}
return user;
}
public User changeUser(User User) {
for (User s : users) {
if (s.getId() == User.getId()){
return User;
}
}
return null;
}
public List<User> getUserList() {
return users;
}
}
5.controller
@EnableWebMvc
@Controller
public class UserMVC {
@Autowired
private UserDao userDao;
@RequestMapping(value="jsp/getUser.do")
public ModelAndView index(){
return new ModelAndView("getUser");
}
//根据id查询返回相应结果
@RequestMapping(value="jsp/getUser/{id}")
@ResponseBody
public User getUser(@PathVariable("id") long id){
User user = userDao.queryOneUser(id);
return user;
}
//查询所有信息,但是前端没做实现,可以自己试试
@RequestMapping(value="jsp/getUserList.json")
@ResponseBody
public List<User> getUserList(){
List<User> list = userDao.getUserList();
return list;
}
}
6.SpringMVC配置文件springmvc-servlet.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:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
<!-- 启用spring mvc 注解 -->
<context:annotation-config />
<!-- scan the package and the sub package -->
<context:component-scan base-package="com.example"/>
<!-- don't handle the static resource -->
<mvc:default-servlet-handler />
<!-- if you use annotation you must configure following setting -->
<mvc:annotation-driven />
<!-- 完成请求和注解POJO的映射 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- configure the InternalResourceViewResolver 一种试图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
id="internalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix" value="" />
<!-- 后缀 -->
<property name="suffix" value=".jsp" />
</bean>
</beans>
7.web配置文件web.xml
<web-app>
<display-name>SpringMVC</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/springmvc-servlet.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
8.实现查询的js文件——ajax.js
$(document).ready(function() {
$("#searchByUserIdBtn").prop("disabled",false);
$("#searchByUserIdBtn").on("click", function() {
getUserById();
});
});
function getUserById() {
var userId = $("#userId").val();
$.ajax({
type : "post",
url : "getUser/" + userId,
data : {
"id" : userId,
},
//为了防止重复点击
beforeSend: function() {
enableButton(true);
},
//成功
success : function(data) {
console.log("Success:-->>" + data);
display(data);
},
//错误情况
error : function(error) {
console.log("Error:-->>" + error);
display("Error:Can't get message");
},
//请求完成后回调函数 (请求成功或失败之后均调用)。
complete: function(message) {
console.log("Complete:-->>" + message);
enableButton(false);
}
});
function enableButton(flag) {
$("#searchByUserIdBtn").prop("disabled",flag);
}
//这里的JSON.stringify可以将json对象转换为字符串
function display(data) {
var userJson = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 4) + "</pre>";
$("#userList").html(userJson);
}
}
9.首页index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<a href="getUser.do">click to enter</a><br>
</body>
</html>
10.查询界面getUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<div id="userList">
</div>
<form>
UserId:<input id="userId" type="text" ><br>
<input id="searchByUserIdBtn" type="button" value="SearchByUserId">
</form>
</div>
</body>
</html>
11.最终结果展示:
通过输入id,点击查询相应用户信息,再在前端做显示
当然这只是一个简单的入门demo,具体使用还是需要结合业务。