Servlet處理（jQuery）Ajax請求

本文轉載自查看原文 2019-10-29 13:51 670 Servlet/ 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文件

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 
 3 <%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%>
 4 <%
 5     String path = request.getContextPath();
 6     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
 7             + path + "/";
 8 %>
 9 <!DOCTYPE html>
10 <html>
11 <head>
12 <base href="<%=basePath%>">
13 <title>I LOVE YOU</title>
14 <link rel="stylesheet" type="text/css" href="">
15 <script type="text/javascript" src="index.js"></script>
16 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
17 
18 
19 </head>
20 <body>
21 
22 
23 <button id="mybutton" value="異步請求服務器" onclick="fun1()" >（jquery）(jQuery)ajax請求（不發送數據）</button>
24 <spand id="show" />
25 
26 <br/>
27 <hr/>
28 
29 
30 <button id="mybutton1" value="異步請求服務器" onclick="fun2()" >發送數據格式為key/value的（jquery）ajax請求</button>
31 <spand id="show1" />
32 
33 <br/>
34 <hr/>
35 <button id="mybutton2" value="異步請求服務器" onclick="fun3()" >發送數據格式為json的(jquery)ajax請求</button>
36 <spand id="show2" /><br/>
37 
38 </body>

這里我們實現了三個按鈕，並且調用了對應的函數。我們先來看第一個按鈕（id="mybutton"）。這個文件引入了2個js文件。一個是我們自己編寫的index.js文件，另一個是我們使用jQuery框架開發時所用的js文件。我把index.jsp，index.js，jquery-3.2.1.min.js都放在了WebContent目錄下（方便操作）。

(3) 編寫index.js文件

 1 /**
 2  * 
 3  */
 4 //使用jquery提交ajax請求（不攜帶數據）
 5 function fun1(){
 6     
 7     $.ajax({
 8         
 9         type:"POST",                    //發送方式
10         url:"AjaxServlet",                //請求地址
11         data:"",                           //數據為空
12         success:function(data){             //成功后的回調函數
13             
14             $("#show").html(data);            //頁面展示內容
15             
16         }            
17     });
18 }
19 
20 
21 //使用jquery提交key/value數據（ajax請求）
22 
23 function fun2(){
24     
25     $.ajax({
26         
27         type:"POST",
28         url:"AjaxServlet1",
29         data:"username=wly&password=1314520",        //key/value數據
30         success:function(data){
31             
32             $("#show1").html(data);
33             
34         }            
35     });
36 
37 }
38 
39 
40 //使用jquery提交json數據（ajax請求）
41 
42 function fun3(){
43     
44     var user={                        //符合json數據格式規范的javascript對象
45             "username":"wly",
46             "password":"1314520"    
47     };    
48 $.ajax({
49         
50         type:"POST",
51         url:"AjaxServlet2",
52         contentType:"application/json;charset=UTF-8", //發送數據到服務器時所使用的內容類型
53         data:JSON.stringify(user),    //將javascript對象轉化為json字符串
54         
55         //預期的服務器響應的數據類型。服務器返回json字符串。jquery會自動把json轉化為js對象
56         dataType:"json",    //相當於調用JSON.parse（data）方法。此時我們省去即可。      
57         success:function(data){
58             
59             $("#show2").html(data.username+" "+data.password);
60             
61         }            
62     });
63 }

觀察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文件

 1 package com.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 public class AjaxServlet1 extends HttpServlet {
12 
13     protected void doGet(HttpServletRequest request, HttpServletResponse response)
14             throws ServletException, IOException {
15 
16         response.setContentType("text/html;charset=UTF-8");
17         PrintWriter out = response.getWriter();
18         String username = request.getParameter("username");
19         String password = request.getParameter("password");
20         System.out.println(username + " " + password);
21         out.print("helloworld " + "username:" + username + " password:" + password);
22         out.close();
23 
24     }
25 
26     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
27         this.doGet(req, resp);
28     }
29 }

使用request.getParameter(String stringParam)接受客戶端傳來的數據。返回一個連接字符串。

(4)web.xml文件配置Servlet

上面已經配置好了，這里不多說。

(5)運行程序

5.3 Servlet處理（jQuery）Ajax請求（發送json數據，返回json數據）

（1）導入Jackson的jar包

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類

 1 package com.entity;
 2 
 3 public class User {
 4 
 5     private String username;
 6 
 7     private String password;
 8 
 9     public String getUsername() {
10         return username;
11     }
12 
13     public void setUsername(String username) {
14         this.username = username;
15     }
16 
17     public String getPassword() {
18         return password;
19     }
20 
21     public void setPassword(String password) {
22         this.password = password;
23     }
24 
25     @Override
26     public String toString() {
27         return "User [username=" + username + ", password=" + password + "]";
28     }
29 
30 }

簡單易懂，不多說。

（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的工具類。

 1 package com.util;
 2 
 3 import java.io.BufferedReader;
 4 import java.io.IOException;
 5 import java.io.InputStreamReader;
 6 import java.io.UnsupportedEncodingException;
 7 
 8 import javax.servlet.http.HttpServletRequest;
 9 
10 import com.entity.User;
11 import com.fasterxml.jackson.databind.ObjectMapper;
12 
13 public class JsonReader {
14 
15     public static User receivePost(HttpServletRequest request) throws UnsupportedEncodingException, IOException {
16 
17         // 讀取請求內容
18         BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));
19 
20         String line = null;
21         StringBuilder sb = new StringBuilder();
22 
23         while ((line = br.readLine()) != null) {
24             sb.append(line);
25         }
26 
27         // 將json字符串轉化為java對象
28         ObjectMapper json = new ObjectMapper();
29         User user = json.readValue(sb.toString(), User.class);
30         return user;
31     }
32 
33 }

第二步，編寫servlet

 1 package com.servlet;
 2 
 3 import java.io.IOException;
 4 
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 import com.entity.User;
11 import com.fasterxml.jackson.databind.ObjectMapper;
12 import com.util.JsonReader;
13 
14 public class AjaxServlet2 extends HttpServlet {
15 
16     protected void doGet(HttpServletRequest request, HttpServletResponse response)
17             throws ServletException, IOException {
18 
19         // response.setContentType("text/html;charset=UTF-8");
20 
21         response.setContentType("application/json;charset=UTF-8");
22 
23         User user = JsonReader.receivePost(request);
24 
25         System.out.println(user);
26 
27         ObjectMapper mapper = new ObjectMapper();
28 
29         // 將java對象轉化為json字符串
30         String json = mapper.writeValueAsString(user);
31 
32         System.out.println(json);
33         response.getWriter().print(json);
34 
35     }
36 
37     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
38         this.doGet(req, resp);
39     }
40 }

我們注意到有個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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Servlet處理AJAX請求 Servlet處理原生Ajax請求 jquery請求servlet實現ajax異步請求 JQuery Ajax 請求參數 List 集合處理 Jquery：ajax跨域請求處理 jQuery Ajax請求 .net 一般處理程序 ajax jQuery+servlet ajax學習--請求servlet響應 Jquery 一次處理多個ajax請求的代碼（4）完結：jQuery——AJAX封裝post請求，以及細節處理