大话Ajax，详解~
Ajax
本节源码 kt5zXMLHttpRequest对象
XMLHttpRequest 是浏览器接口对象，该对象的 API 可被JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为Ajax编程的核心对象。
Ajax的使用步骤
创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
给定请求方式以及请求地址
xhr.open("get","http://www.baidu.com");
发送请求
xhr.send();
获取服务器端给客户端的响应数据
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 2000){
document.getElementById("span").innerHTML = xhr.readyState;
alert(xhr.readyState);
}
}
好了，我们先来用实际代码来感受一下Ajax
先编写一个Servlet
@WebServlet("/alvin/MyServlet")
public class MyServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter writer = response.getWriter();
writer.println("hello Ajax");
writer.flush();
writer.close();
}
}
Jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>title>
JSON
JSON(JavaScriptObjectNotation) 是一种基于字符串的轻量级的数据交换格式。易于人阅 读和编写，同时也易于机器解析和生成。JSON是 JavaScript数据类型的子集。
在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。
JSON的语法规则
JSON是按照特定的语法规则所生成的字符串结构。
大括号表示JSON 的字符串对象。{}
属性和值用冒号分割。{"属性":"value"}
属性和属性之间用逗号分割。{"属性":"value","属性":"value",...}
中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]
Json
{“userid”:1,“username”:“admin”,“sex”:“male”}
数组
[{“userid”:1,“username”:“admin”},{“userid”:2,“username”:“oldlu”}]
Josn六种数据类型
string：字符串，必须要用双引号引起来。
number：数值，与JavaScript的number 一致。
object：JavaScript的对象形式，{key:value}表示方式，可嵌套。
array：数组，JavaScript的Array表示方式[value]，可嵌套。
true/false：布尔类型，JavaScript 的boolean 类型。
null：空值，JavaScript的null。
Jackson的使用
在JDK中并没有内置操作,JSON格式数据的API,因此使用处理JSON格式的数据需要借助第三方类库
几个常用的类库
Gson: 谷歌开发的 JSON 库，功能十分全面。
FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
Jackson: 社区十分活跃且更新速度很快。被称为“最好的Json 解析器”
Jeson下载地址
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotationshttps://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
在响应中使用 Jackson处理 JSON格式数据的步骤：
添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
通过 jacksonAPI将 Java对象转换 JSON格式
修改响应头，响应类型为application/json
将结果基于字符输出流推回客户端浏览器
在页面的中通过JavaScript的JSON.parse()函数将JSON格式的数据转换为JavaScript对象
通过Json格式在响应中传递单个对象
我们先建一个User实体类,用于后面的操作
public class User {
private int userid;
private String username;
}
//get set那些就不在文章里面写了
@WebServlet("/alvin/Single")
public class SingleObjectServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//创建User对象
User user = new User();
user.setUserid(1);
user.setUsername("alvin");
//使用Jackson的APL将User对象转化为JSON格式的字符串对象
ObjectMapper objectMapper = new ObjectMapper();
//将User对象转换为JSON格式对象
String string = objectMapper.writeValueAsString(user);
//设置相应类型为application/json
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.println(string);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>JSON格式的单个对象响应</title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
function but() {
var xhr = new XMLHttpRequest();
xhr.open("post","alvin/Single");
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.response);
//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
var parse = JSON.parse(xhr.responseText);
alert(parse.userid + " " + parse.username);
document.getElementById("span").innerHTML = parse.userid + "
" + parse.username;
}
}
}
</script>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
如果是多个对象呢?用List试试吧~
@WebServlet("/alvin/MoreObjectServlet")
public class MoreObjectServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//创建第一个对象
User user1 = new User(1,"张三");
//创建第二个对象
User user2 = new User(2,"alvin");
//将多个对象放入到集合中
List<User>list = new ArrayList<User>();
list.add(user1); list.add(user2);
//通过jackson将List转换为JSON格式的字符串对象
ObjectMapper objectMapper = new ObjectMapper();
String string = objectMapper.writeValueAsString(list);
System.out.println(string);
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.print(string);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>JSON格式的多个对象响应</title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
function but() {
var xhr = new XMLHttpRequest();
xhr.open("post","alvin/MoreObjectServlet");
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.response);
//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
var parse = JSON.parse(xhr.responseText);
var temp = "";
for(var i = 0; i < parse.length; i++){
alert(parse[i].userid + " " + parse[i].username);
temp += parse.userid + "
" + parse.username;;
}
document.getElementById("span").innerHTML = temp;
}
}
}
</script>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
Ajax在JSON中通过Map传递数据
@WebServlet("/alvin/MapModelServlet")
public class MapModelServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String,Object> map = new HashMap<String, Object>();
map.put("userid",1);
map.put("username","alvin");
ObjectMapper objectMapper = new ObjectMapper();
String string = objectMapper.writeValueAsString(map);
System.out.println(string);
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.print(string);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title></title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
function but() {
var xhr = new XMLHttpRequest();
xhr.open("post","alvin/MapModelServlet");
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
var parse = JSON.parse(xhr.responseText);
alert(parse.userid + " " + parse.username);
document.getElementById("span").innerHTML = parse.userid + "
" + parse.username;
}
}
}
</script>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
在 JSON 格式中可以直接使用 Map 作为传递数据的模型。因为 Map 结构本身就是 key与value的结构与JSON 格式对象模型完全匹配，所以我们可以直接将一个Map 对象转换为JSON 格式的字符串对象。这对于我们来说是一件非常方便的事情，如果我们返回的数据并没有对应的模型来存放数据，那么我们可以通过Map 来解决。
在请求中通过JSON格式传递数据
我们除了可以在响应中通过 JSON 格式来传递数据以外，在请求中也可以使用 JSON 格式传递数据。如果在请求中使用 JSON 格式传递数据，那么提交方式需要使用 POST 方式，通过 JavaScript 中的 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式数据。通过 send方法将参数传递到 Servlet中，在 Servlet 中通过字符输入流获取 JSON格式数据。
@WebServlet("/alvin/RequestJosnServlet")
public class RequestJosnServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//通过字符输入流从请求体中获取提交的JSON格式的数据
String string = request.getReader().readLine();
//使用Jackson将JSON格式的字符串对象转换成Java对象
ObjectMapper objectMapper = new ObjectMapper();
User user = objectMapper.readValue(string,User.class);
System.out.println(user.getUserid() + " " + user.getUsername());
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.print(user);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>JSON格式的单个对象响应</title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
function but() {
var id = document.getElementById("userid").value;
var name = document.getElementById("username").value;
var obj = {
userid:id,username:name};
var content = JSON.stringify(obj);
var xhr = new XMLHttpRequest();
xhr.open("post","alvin/Single");
//发送
xhr.send(content);
alert(content);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.response);
//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象
var parse = JSON.parse(xhr.responseText);
alert(parse.userid + " " + parse.username);
document.getElementById("span").innerHTML = parse.userid + "
" + parse.username;
}
}
}
</script>
ID<input name="userid" id="userid"/><br/>
姓名<input name="username" id="username"/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
Jackson的常用注解
@JsonProperty
此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把username属性序列化为name，@JsonProperty("name")。
@JsonIgnore
此注解用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和 方法对应的属性，返回的json数据即不包含该属性。
@JsonFormat
此注解用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date类型属性的值直接转化为我们想要的样式。如：@JsonFormat(pattern="yyyy-MM-ddhh:mm:ss")
Jackson工具类
package com.alvin.util;
import java.util.List;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* JSON转换工具类
*/
public class JsonUtils {
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
/**
* 将对象转换成json字符串。
* Title: pojoToJson
* Description:
* @param data
* @return
*/
public static String objectToJson(Object data) {
try {
String string = MAPPER.writeValueAsString(data);
return string;
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
/**
* 将json结果集转化为对象
*
* @param jsonData json数据
* @param clazz 对象中的object类型
* @return
*/
public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
try {
T t = MAPPER.readValue(jsonData, beanType);
return t;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 将json数据转换成pojo对象list
* Title: jsonToList
* Description:
* @param jsonData
* @param beanType
* @return
*/
public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
try {
List<T> list = MAPPER.readValue(jsonData, javaType);
return list;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
Jquery的$ajax方法的使用
$.ajax()使用
在JQuery 中提供了对Ajax 的封装，让我们在使用Ajax技术时变得更加容易。在 JQuery中提供了很多的基于Ajax发送异步请求的方法,如：$.ajax()、$.get()、$.post()、$.getJSON()。
@WebServlet("/alvin/jqueryAjaxServlet")
public class jqueryAjaxServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter writer = response.getWriter();
writer.print("hello Jquery Ajax");
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
$.ajax({
type:"post",
url:"alvin/jqueryAjaxServlet",
success:function (result) {
$("#span").html(result);
}
});
}
</script>
</head>
<body>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
$.ajax()中提交数据
在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在Servlet 中都是通过request.getParameter 方法根据 name获取 value的。
@WebServlet("/alvin/DataServlet")
public class DataServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userId = request.getParameter("id");
String userName = request.getParameter("name");
PrintWriter writer = response.getWriter();
writer.print(userId + " " + userName);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var userid = $("#userid").val();
var username = $("#username").val();
$.ajax({
type:"post",
url:"alvin/DataServlet",
data:"id=" + userid + "&name=" + username,
success:function (result) {
$("#span").html(result);
}
});
}
</script>
</head>
<body>
ID:<input type="text" id="userid"/><br/>
姓名:<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
提交JSON格式数据
在$.ajax()中提交 JSON格式的数据需要使用 post方式提交，通过 JSON.stringify()函数将JavaScript对象转换成JSON 格式的字符串。在Servlet 中通过字符输入获取提交的 JSON格式的数据。
@WebServlet("/alvin/JSONServlet")
public class JSONServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String string = request.getReader().readLine();
PrintWriter writer = response.getWriter();
writer.print(string);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var userid = $("#userid").val();
var username = $("#username").val();
$.ajax({
type:"post",
url:"alvin/JSONServlet",
data:JSON.stringify({
id:userid,
name:username
}),
success:function (result) {
$("#span").html(result);
}
});
}
</script>
</head>
<body>
ID:<input type="text" id="userid"/><br/>
姓名:<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
$.ajax()处理响应中的JSON格式数据
$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是 一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是JSON字符串转换完的 JavaScript对象。不需要在使用JSON.parse()做格式的转换处理。
@WebServlet("/alvin/JSONConnverServlet")
public class JSONConnverServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
String string = request.getReader().readLine();
PrintWriter writer = response.getWriter();
writer.print(string);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var userid = $("#userid").val();
var username = $("#username").val();
$.ajax({
type:"post",
url:"alvin/JSONConnverServlet",
dataType:"json",
data:JSON.stringify({
id:userid,
name:username
}),
success:function (result) {
alert(result.id + " " + result.name);
$("#span").html(result.id + " " + result.name);
}
});
}
</script>
</head>
<body>
ID:<input type="text" id="userid"/><br/>
姓名:<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
$.get()的使用
$.get()方法是$.ajax()方法基于 get方式发送异步请求的简化版。
语法结构
$.get(url,function(result))
$.get(url,data,function(result))
通过标准格式指定提交数据
$.get(url,”name=value&name=value”,function(result))
通过JavaScript对象指定提交数据
$.get(url,{userid:1,username:”oldlu”,......},function(result))
这里面使用的的还是DataServlet,前面写过了
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var userid = $("#userid").val();
var username = $("#username").val();
$.get("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {
$("#span").html(result);
})
}
</script>
</head>
<body>
ID:<input type="text" id="userid"/><br/>
姓名:<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
$.post()的使用
$.post()方法是$.ajax()方法基于 post方式发送异步请求的简化版。
语法结构
$.post(url,function(result))
$.post(url,data,function(result))
通过标准格式指定提交数据
$.post(url,”name=value&name=value”,function(result))
通过JavaScript对象指定提交数据
$.post(url,{userid:1,username:”oldlu”,......},function(result))
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var userid = $("#userid").val();
var username = $("#username").val();
$.post("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {
$("#span").html(result);
})
}
</script>
</head>
<body>
ID:<input type="text" id="userid"/><br/>
姓名:<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
$.getJSON()的使用
$.getJSON()方法是$.ajax()方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON()方法和resp.setContentType(“application/json”)是一起使用的。
语法结构
$.getJSON(url,function(result))
$.getJSON(url,data,function(result))
通过标准格式指定提交数据
$.getJSON(url,”name=value&name=value”,function(result))
要求返回的数据格式必须是 JSON格式。
通过JavaScript对象指定提交数据
$.getJSON(url,{userid:1,username:”oldlu”,......},function(result))
要求返回的数据格式必须是 JSON格式。
@WebServlet("/alvin/GetJSONServlet")
public class GetJSONServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userId = request.getParameter("id");
String userName = request.getParameter("name");
Map<String,String> map = new HashMap<String, String>();
map.put("userid",userId);
map.put("username",userName);
//使用前面写的工具类
String string = JsonUtils.objectToJson(map);
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.print(string);
writer.flush();
writer.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var userid = $("#userid").val();
var username = $("#username").val();
$.getJSON("alvin/GetJSONServlet","id=" + userid + "&name=" + username,function (result) {
//根据map的键
alert(result.userid + " " + result.username)
$("#span").html(result.userid + " " + result.username);
})
}
</script>
</head>
<body>
ID:<input type="text" id="userid"/><br/>
姓名:<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
serialize()方法的使用
将form表单中的数据自动拼接成 name=value&name=value结构。
语法结构
varparam=$(“form”).serialize();
param的值为：name=value&name=value
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function but() {
var param = $("#form").serialize();
$.ajax({
type:"post",
url:"alvin/DataServlet",
data:param,
success:function (result) {
$("#span").html(result);
}
});
}
</script>
</head>
<body>
<form id="form">
ID:<input type="text" name="id" id="userid"/><br/>
姓名:<input type="text" name="name" id="username"/><br/>
</form>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>