Servlet处理（jQuery）Ajax请求
1. jQuery
jQuery是一个JavaScript函数库，极大的简化了JavaScript编程，很容易学习。jQuery是目前最流行的开源js框架，并且提供了大量的扩展。
2. Ajax
Ajax(Asynchronous JavaScript and XML，异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术，它并不是一项新的技术，其产生的目的是用于实现页面的局部刷新。通过Ajax技术可以使之前的应用程序在每次提交时不用进行页面的整体刷新，从而提升操作的性能。
3. GET和POST
两种最常用的 HTTP 方法是：GET 和 POST。
定义：GET是从指定的资源请求数据，POST是从指定的资源提交要被处理的数据。
数据内容：GET请求的数据附加在url之后，只允许ASCII字符（采用ASCII编码），请求的数据会暴露在地址栏中。POST请求会把请求的数据放在HTTP请求包的包体中，也允许二进制数据，不会把数据暴露在地址栏。
数据长度：GET有限制，在使用GET请求时，数据大小会受到url长度的限制（URL 的最大长度是 2048 个字符）。POST无限制。
安全性：GET 的安全性较差（与POST相比），因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
4. Jackson
Jackson是当前用的比较广泛的，用来序列化和反序列化json的Java开源框架。Jackson社区相对比较活跃，更新速度也比较快， 从Github中的统计来看，Jackson是最流行的json解析器之一，Spring MVC的默认json解析器便是Jackson。
5. Servlet处理（jQuery）Ajax请求（不发送数据/发送key/value数据/发送json数据）
开发环境：eclipse+jsp+jQuery+servlet+tomcat+ajax
5.1 Servlet处理（jQuery）Ajax请求（不发送数据，返回普通文本）
(1) 搭建环境：
在eclipse中新建Java web项目（会自动导入JRE System Library包），比如我把项目名字写为AjaxDemo1，并将项目部署到tomcat服务器上，下面是eclipse中项目的目录结构：
我们先不用管lib中的jar包。注意这里有一个jquery-3.2.1.min.js，这是jQuery的开发包，我们可以在网上下载，把这个js文件复制粘贴到WebContent目录下即可。下面我会一步一步分析。下面进行开发。
(2) 编写index.jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <title>I LOVE YOU</title> <link rel="stylesheet" type="text/css" href=""> <script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body> <button id="mybutton" value="异步请求服务器" onclick="fun1()" >（jquery）(jQuery)ajax请求（不发送数据）</button> <spand id="show" /> <br/> <hr/> <button id="mybutton1" value="异步请求服务器" onclick="fun2()" >发送数据格式为key/value的（jquery）ajax请求</button> <spand id="show1" /> <br/> <hr/> <button id="mybutton2" value="异步请求服务器" onclick="fun3()" >发送数据格式为json的(jquery)ajax请求</button> <spand id="show2" /><br/> </body>
这里我们实现了三个按钮，并且调用了对应的函数。我们先来看第一个按钮（id="mybutton"）。这个文件引入了2个js文件。一个是我们自己编写的index.js文件，另一个是我们使用jQuery框架开发时所用的js文件。我把index.jsp，index.js，jquery-3.2.1.min.js都放在了WebContent目录下（方便操作）。
(3) 编写index.js文件
/**
*
*/
//使用jquery提交ajax请求（不携带数据）
function fun1(){
$.ajax({
type:"POST", //发送方式
url:"AjaxServlet", //请求地址
data:"", //数据为空
success:function(data){ //成功后的回调函数
$("#show").html(data); //页面展示内容
}
});
}
//使用jquery提交key/value数据（ajax请求）
function fun2(){
$.ajax({
type:"POST",
url:"AjaxServlet1",
data:"username=wly&password=1314520", //key/value数据
success:function(data){
$("#show1").html(data);
}
});
}
//使用jquery提交json数据（ajax请求）
function fun3(){
var user={ //符合json数据格式规范的javascript对象
"username":"wly",
"password":"1314520"
};
$.ajax({
type:"POST",
url:"AjaxServlet2",
contentType:"application/json;charset=UTF-8", //发送数据到服务器时所使用的内容类型
data:JSON.stringify(user), //将javascript对象转化为json字符串
//预期的服务器响应的数据类型。服务器返回json字符串。jquery会自动把json转化为js对象
dataType:"json", //相当于调用JSON.parse（data）方法。此时我们省去即可。
success:function(data){
$("#show2").html(data.username+" "+data.password);
}
});
}
观察fun1()函数，data为空，很简单，代码都有注释，这里不做过多解释。体现出jQuery的风格，简单易用。
(4) 编写Srvlet文件
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("我想你了哈哈！");
out.close();
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
代码很简单，就返回一句话（普通文本）。没啥好说的。
(5) web.xml文件配置Servlet
<?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_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>AjaxDemo</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>AjaxServlet</servlet-name> <servlet-class>com.servlet.AjaxServlet</servlet-class> </servlet> <servlet> <servlet-name>AjaxServlet1</servlet-name> <servlet-class>com.servlet.AjaxServlet1</servlet-class> </servlet> <servlet> <servlet-name>AjaxServlet2</servlet-name> <servlet-class>com.servlet.AjaxServlet2</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>AjaxServlet1</servlet-name> <url-pattern>/AjaxServlet1</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>AjaxServlet2</servlet-name> <url-pattern>/AjaxServlet2</url-pattern> </servlet-mapping> </web-app>
配置很简单。这里不用多说。这篇相当于是ajax的进阶版。不懂的话可以看我第一篇博客：Servlet处理原生Ajax请求
(6) 运行程序
启动tomcat，在浏览器上输入地址，点击按钮，运行效果如下：
5.2 Servlet处理（jQuery）Ajax请求（发送key/value数据，返回普通文本）
(1)编写jsp文件
上面的index.jsp文件已经写好了，看第二个按钮就行了。
(2)编写js文件
上面index.js已经写好了，注意看fun2()函数，发送的是key/value类型数据。
(3)编写Servlet文件
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username + " " + password);
out.print("helloworld " + "username:" + username + " password:" + password);
out.close();
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
使用request.getParameter(String stringParam)接受客户端传来的数据。返回一个连接字符串。
(4)web.xml文件配置Servlet
上面已经配置好了，这里不多说。
(5)运行程序
5.3 Servlet处理（jQuery）Ajax请求（发送json数据，返回json数据）
（1）导入Jackson的jar包
[strong] [/strong] Jackson是用来解析json数据的第三方类库，通过上面项目目录我们发现，在lib下由三个Jaskson相关开发包。Jackson核心模块由这三部分组成：
1. jackson-core 核心包，提供基于”流模式”解析的相关 API，它包括 JsonPaser 和 JsonGenerator。Jackson 内部实现正是通过高性能的流模式 API 的 JsonGenerator 和 JsonParser 来生成和解析 json。
2. jackson-annotations 注解包，提供标准注解功能；
3. jackson-databind 数据绑定包，提供基于”对象绑定” 解析的相关 API（ ObjectMapper ）和”树模型” 解析的相关 API（JsonNode）；基于”对象绑定” 解析的 API 和”树模型”解析的 API 依赖基于”流模式”解析的 API。
有兴趣的话可以研究一下源码，这里就不多说了。这里我们发现使用Jackson导入的jar包比较少（相比于json-lib）。
（2）新建实体User类
package com.entity;
public class User {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User [username=" + username + ", password=" + password + "]";
}
}
简单易懂，不多说。
（3）编写jsp文件
上面已经写好，看第三个按钮就行了。
（4）编写js文件
看fun3()函数就可以了，代码有注释。注意这块由个contentType属性，发送数据到服务器所使用的内容类型，这里我们设置的是contentType:"application/json;charset=UTF-8"。指定发送数据格式为json格式，字符编码为UTF-8。还有一个dataType属性，我们设置为“json”，当服务器响应成功时，我们调用回调函数，相当于预期知道服务器响应的数据类型，就可以自动的把json字符串转化为javascript对象。相当于JSON.parse(data)方法。这里我们省略掉了这个方法，因为jQuery已经帮我们格式化好了。
（5）编写Servlet文件
第一步，先编写Jackson的工具类。
package com.util;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import javax.servlet.http.HttpServletRequest;
import com.entity.User;
import com.fasterxml.jackson.databind.ObjectMapper;
public class JsonReader {
public static User receivePost(HttpServletRequest request) throws UnsupportedEncodingException, IOException {
// 读取请求内容
BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));
String line = null;
StringBuilder sb = new StringBuilder();
while ((line = br.readLine()) != null) {
sb.append(line);
}
// 将json字符串转化为java对象
ObjectMapper json = new ObjectMapper();
User user = json.readValue(sb.toString(), User.class);
return user;
}
}
第二步，编写servlet
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.entity.User;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.util.JsonReader;
public class AjaxServlet2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// response.setContentType("text/html;charset=UTF-8");
response.setContentType("application/json;charset=UTF-8");
User user = JsonReader.receivePost(request);
System.out.println(user);
ObjectMapper mapper = new ObjectMapper();
// 将java对象转化为json字符串
String json = mapper.writeValueAsString(user);
System.out.println(json);
response.getWriter().print(json);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
我们注意到有个ObjectMapper类，ObjectMapper是JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现。它位于jackson-databind-2.0.0-jar里面。这里我们介绍ObjectMapper类下常用到的方法。 public <T> T readValue(JsonParser jp, Class<T> valueType)这个方法可以将json字符串转化为java对象。public String writeValueAsString(Object value)这个方法可以将java对象转化为json字符串。先介绍用到的这2个方法。其他的自己看看源码。
（6）web.xml文件配置Servlet
同理，上面已经配置好了。这里不多说。
（7）跑一下程序
5.4 Servlet处理（jQuery）Ajax请求（发送key/value数据，返回json数据）（补充）
（1）编写jsp文件
<button id="mybutton3" value="异步请求服务器" onclick="fun4()" >发送数据格式为key/value的（jquery）ajax请求（返回json）</button> <spand id="show3" />
（2）编写js文件
//使用jquery提交key/value数据（ajax请求）(返回json数据)
function fun4(){
$.ajax({
type:"POST",
url:"AjaxServlet3",
data:"username=wly&password=1314520", //key/value数据
success:function(data){
$("#show3").html("嘿嘿 "+data.username+" "+data.password);
}
});
}
（3）新建User实体类
上面已经写好，不多说，User类，属性username和password，并提供setter和gettter方法。
（4）编写Servlet类
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.entity.User;
import com.fasterxml.jackson.databind.ObjectMapper;
public class AjaxServlet3 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
User user = new User();
String username = request.getParameter("username");
String password = request.getParameter("password");
user.setUsername(username);
user.setPassword(password);
System.out.println(user);
ObjectMapper mapper = new ObjectMapper();
// 将java对象转化为json字符串
String json = mapper.writeValueAsString(user);
System.out.println(json);
response.getWriter().print(json);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
很简单，就是新建一个User对象，通过request.getparameter(String s)获取属性值，再将值设置到user对象当中，最后利用jackson把user对象转化为json字符串返回。
（5）web.xml配置Servlet
<servlet> <servlet-name>AjaxServlet3</servlet-name> <servlet-class>com.servlet.AjaxServlet3</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet3</servlet-name> <url-pattern>/AjaxServlet3</url-pattern> </servlet-mapping>
（6）运行程序
6. 总结
（1）使用jQuery使代码更加简洁，易懂易用（jQuery轻量级）。
（2）JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。Jquery的ajax操作比较完善。
（3）Jackson性能分析：
1. Jackson 所依赖的jar包较少，简单易用。
2.与其他 Java 的 json 的框架 Gson 等相比，Jackson 解析大的 json 文件速度比较快。
3. Jackson 运行时占用内存比较低，性能比较好
4. Jackson 有灵活的 API，可以很容易进行扩展和定制。
本篇博客源码链接：https://pan.baidu.com/s/1e8XqC01RVg9p8yKL7vtwfA 提取码：mbnt
- jQuery ajax get请求编码问题，jQuery ajax简化处理，jQuery ajax与Servlet交互
- Jquery 一次处理多个ajax请求的代码
- 甩掉ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
- jQuery中使用$.ajax跨域请求Servlet数据的实例
- jQuery:多个AJAX/JSON并行请求对应一个回调函数处理方法$.when
- ashx页面返回json字符串|jQuery 的ajax处理请求的纠结问题
- 通用Servlet Ajax请求 /do 处理所有请求，反射机制
- Servlet对Ajax中请求处理及Json串的解析
- Jquery：ajax跨域请求处理
- struts2：使用JQuery、JSON和AJAX处理请求
- 甩掉 ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
- 甩掉ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
- 甩掉 ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练（转）
- 使用jQuery处理AJAX请求的基础学习教程
- 一般处理程序ashx 处理JQuery的Ajax()请求
- 浅谈ajax在jquery中的请求和servlet中的响应
- 甩掉ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
- 处理jquery的ajax请求session过期跳转到登录页面
- 甩掉ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
- [转]甩掉 ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练