2. 程式人生 > 程式設計 >Spring mvc AJAX技術實現原理解析

Spring mvc AJAX技術實現原理解析

阿新 • • 發佈：2020-03-20

簡介

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。

AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

Ajax 不是一種新的程式語言，而是一種用於建立更好更快以及互動性更強的Web應用程式的技術。

在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。Google Suggest能夠自動幫你完成搜尋單詞。
Google Suggest 使用 AJAX 創造出動態性極強的 web 介面：當您在谷歌的搜尋框輸入關鍵字時，JavaScript 會把這些字元傳送到伺服器，然後伺服器會返回一個搜尋建議的列表。

傳統的網頁(即不用ajax技術的網頁)，想要更新內容或者提交一個表單，都需要重新載入整個網頁。

使用ajax技術的網頁，通過在後臺伺服器進行少量的資料交換，就可以實現非同步區域性更新。

使用Ajax，使用者可以建立接近本地桌面應用的直接、高可用、更豐富、更動態的Web使用者介面。

偽造Ajax

我們可以使用前端的一個標籤來偽造一個ajax的樣子。 iframe標籤

編寫一個 ajax-frame.html 使用 iframe 測試

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>xiaohua</title>
</head>
<body>

<script type="text/javascript">
window.onload = function(){
 var myDate = new Date();
 document.getElementById('currentTime').innerText = myDate.getTime();
};

function LoadPage(){
 var targetUrl = document.getElementById('url').value;
 console.log(targetUrl);
 document.getElementById("iframePosition").src = targetUrl;
}

</script>

<div>
<p>請輸入要載入的地址：<span id="currentTime"></span></p>
<p>
 <input id="url" type="text" value="https://www.baidu.com/"/>
 <input type="button" value="提交" onclick="LoadPage()">
</p>
</div>

<div>
<h3>載入頁面位置：</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>

使用IDEA開瀏覽器測試一下！

利用AJAX可以做：

  • 註冊時，輸入使用者名稱自動檢測使用者是否已經存在。
  • 登陸時，提示使用者名稱密碼錯誤
  • 刪除資料行時，將行ID傳送到後臺，後臺在資料庫中刪除，資料庫刪除成功後，在頁面DOM中將資料行也刪除。

....等等

jQuery.ajax

Ajax的核心是XMLHttpRequest物件(XHR)。XHR為向伺服器傳送請求和解析伺服器響應提供了介面。能夠以非同步方式從伺服器獲取新資料。

jQuery 提供多個與 AJAX 有關的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON – 同時您能夠把這些外部資料直接載入網頁的被選元素中。

  • jQuery 不是生產者，而是大自然搬運工。
  • jQuery Ajax本質就是 XMLHttpRequest，對他進行了封裝，方便呼叫！
  • jQuery.ajax(...)

部分引數：

url：請求地址
type：請求方式，GET、POST（1.9.0之後用method）
headers：請求頭
data：要傳送的資料
contentType：即將傳送資訊至伺服器的內容編碼型別(預設: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否非同步
timeout：設定請求超時時間（毫秒）
beforeSend：傳送請求前執行的函式(全域性)
complete：完成之後執行的回撥函式(全域性)
success：成功之後執行的回撥函式(全域性)
error：失敗之後執行的回撥函式(全域性)
accepts：通過請求頭髮送給伺服器，告訴伺服器當前客戶端課接受的資料型別
dataType：將伺服器端返回的資料轉換成指定型別
"xml": 將伺服器端返回的內容轉換成xml格式
"text": 將伺服器端返回的內容轉換成普通文字格式
"html": 將伺服器端返回的內容轉換成普通文字格式，在插入DOM中時，如果包含JavaScript標籤，則會嘗試去執行。
"script": 嘗試將返回值當作JavaScript去執行，然後再將伺服器端返回的內容轉換成普通文字格式
"json": 將伺服器端返回的內容轉換成相應的JavaScript物件
"jsonp": JSONP 格式使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式

簡單的測試，使用最原始的HttpServletResponse處理

配置web.xml 和 springmvc的配置檔案

<?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
    https://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/mvc
    https://www.springframework.org/schema/mvc/spring-mvc.xsd">

  <!-- 自動掃描指定的包，下面所有註解類交給IOC容器管理 -->
  <context:component-scan base-package="com.xiaohua.controller"/>
  <mvc:default-servlet-handler />
  <mvc:annotation-driven />

  <!-- 檢視解析器 -->
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
     id="internalResourceViewResolver">
    <!-- 字首 -->
    <property name="prefix" value="/WEB-INF/jsp/" />
    <!-- 字尾 -->
    <property name="suffix" value=".jsp" />
  </bean>

</beans>

編寫一個AjaxController

@Controller
public class AjaxController {

  @RequestMapping("/a1")
  public void ajax1(String name,HttpServletResponse response) throws IOException {
    if ("admin".equals(name)){
      response.getWriter().print("true");
    }else{
      response.getWriter().print("false");
    }
  }

}

匯入jquery ， 可以使用線上的CDN ， 也可以下載匯入

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

編寫index.jsp測試

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
  <title>$Title$</title>
  <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
  <script>
    function a1(){
      $.post({
        url:"${pageContext.request.contextPath}/a1",data:{'name':$("#txtName").val()},success:function (data,status) {
          alert(data);
          alert(status);
        }
      });
    }
  </script>
 </head>
 <body>

 <%--onblur：失去焦點觸發事件--%>
 使用者名稱:<input type="text" id="txtName" onblur="a1()"/>
 </body>
</html>

啟動tomcat測試！ 開啟瀏覽器的控制檯，當我們滑鼠離開輸入框的時候，可以看到發出了一個ajax的請求！是後臺返回給我們的結果！測試成功！

SpringMVC實現

實體類user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
  private String name;
  private int age;
  private String sex;

}

我們來獲取一個集合物件，展示到前端頁面

@RequestMapping("/a2")
public List<User> ajax2(){
  List<User> list = new ArrayList<User>();
  list.add(new User("黃大姐",25,"女"));
  list.add(new User("黃小姐","女"));、
  return list; //由於@RestController註解，將list轉成json格式返回
}

前端頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="獲取資料"/>
<table width="80%" align="center">
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tbody id="content">
  </tbody>
</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>

  $(function () {
    $("#btn").click(function () {
      $.post("${pageContext.request.contextPath}/a2",function (data) {
        console.log(data)
        var html="";
        for (var i = 0; i <data.length ; i++) {
          html+= "<tr>" +
            "<td>" + data[i].name + "</td>" +
            "<td>" + data[i].age + "</td>" +
            "<td>" + data[i].sex + "</td>" +
            "</tr>"
        }
        $("#content").html(html);
      });
    })
  })
</script>
</body>
</html>

成功實現了資料回顯！

註冊提示效果

寫一個Controller

@RequestMapping("/a3")
public String ajax3(String name,String pwd){
  String msg = "";
  //模擬資料庫中存在資料
  if (name!=null){
    if ("admin".equals(name)){
      msg = "OK";
    }else {
      msg = "使用者名稱輸入錯誤";
    }
  }
  if (pwd!=null){
    if ("123456".equals(pwd)){
      msg = "OK";
    }else {
      msg = "密碼輸入有誤";
    }
  }
  return msg; //由於@RestController註解，將msg轉成json格式返回
}

前端頁面 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>ajax</title>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
  <script>

    function a1(){
      $.post({
        url:"${pageContext.request.contextPath}/a3",data:{'name':$("#name").val()},success:function (data) {
          if (data.toString()=='OK'){
            $("#userInfo").css("color","green");
          }else {
            $("#userInfo").css("color","red");
          }
          $("#userInfo").html(data);
        }
      });
    }
    function a2(){
      $.post({
        url:"${pageContext.request.contextPath}/a3",data:{'pwd':$("#pwd").val()},success:function (data) {
          if (data.toString()=='OK'){
            $("#pwdInfo").css("color","green");
          }else {
            $("#pwdInfo").css("color","red");
          }
          $("#pwdInfo").html(data);
        }
      });
    }

  </script>
</head>
<body>
<p>
  使用者名稱:<input type="text" id="name" onblur="a1()"/>
  <span id="userInfo"></span>
</p>
<p>
  密碼:<input type="text" id="pwd" onblur="a2()"/>
  <span id="pwdInfo"></span>
</p>
</body>
</html>

【記得處理json亂碼問題】

獲取baidu介面Demo

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JSONP百度搜索</title>
  <style>
    #q{
      width: 500px;
      height: 30px;
      border:1px solid #ddd;
      line-height: 30px;
      display: block;
      margin: 0 auto;
      padding: 0 10px;
      font-size: 14px;
    }
    #ul{
      width: 520px;
      list-style: none;
      margin: 0 auto;
      padding: 0;
      border:1px solid #ddd;
      margin-top: -1px;
      display: none;
    }
    #ul li{
      line-height: 30px;
      padding: 0 10px;
    }
    #ul li:hover{
      background-color: #f60;
      color: #fff;
    }
  </style>
  <script>

    // 2.步驟二
    // 定義demo函式 (分析介面、資料)
    function demo(data){
      var Ul = document.getElementById('ul');
      var html = '';
      // 如果搜尋資料存在 把內容新增進去
      if (data.s.length) {
        // 隱藏掉的ul顯示出來
        Ul.style.display = 'block';
        // 搜尋到的資料迴圈追加到li裡
        for(var i = 0;i<data.s.length;i++){
          html += '<li>'+data.s[i]+'</li>';
        }
        // 迴圈的li寫入ul
        Ul.innerHTML = html;
      }
    }

    // 1.步驟一
    window.onload = function(){
      // 獲取輸入框和ul
      var Q = document.getElementById('q');
      var Ul = document.getElementById('ul');

      // 事件滑鼠抬起時候
      Q.onkeyup = function(){
        // 如果輸入框不等於空
        if (this.value != '') {
          // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重點☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
          // 建立標籤
          var script = document.createElement('script');
          //給定要跨域的地址 賦值給src
          //這裡是要請求的跨域的地址 我寫的是百度搜索的跨域地址
          script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
          // 將組合好的帶src的script標籤追加到body裡
          document.body.appendChild(script);
        }
      }
    }
  </script>
</head>

<body>
<input type="text" id="q" />
<ul id="ul">

</ul>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

Spring mvc AJAX技術實現原理解析

簡介 AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。 AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

Spring mvc攔截器實現原理解析

概述 SpringMVC的處理器攔截器類似於Servlet開發中的過濾器Filter,用於對處理器進行預處理和後處理。開發者可以自己定義一些攔截器來實現特定的功能。

Spring mvc Controller和RestFul原理解析

控制器Controller 控制器複雜提供訪問應用程式的行為，通常通過介面定義或註解定義兩種方法實現。

Spring IOC和DI實現原理及例項解析

什麼是Spring Spring是一個以IoC和AOP為核心的框架。 IoC（Inversion of Control ，控制反轉）是Spring的基礎。

Spring Boot日誌技術logback原理及配置解析

一、logback日誌技術介紹 Spring Boot中使用的日誌技術為logback。其與Log4J都出自同一人，效能要優於Log4J，是Log4J的替代者。

ASP.NET Core MVC 修改檢視的預設路徑及其實現原理解析

本章將和大家分享如何在ASP.NET Core MVC中修改檢視的預設路徑，以及它的實現原理。

SpringBoot 系列-內嵌 Tomcat 的實現原理解析

原文連結：SpringBoot 中內嵌 Tomcat 的實現原理解析 對於一個 SpringBoot web 工程來說，一個主要的依賴標誌就是有 spring-boot-starter-web 這個 starter ，spring-boot-starter-web 模組在 spring boot 中其實並

Java方法覆蓋重寫實現原理解析

這篇文章主要介紹了Java方法覆蓋重寫實現原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Java時區轉換及Date類實現原理解析

這篇文章主要介紹了Java時區轉換及Date類實現原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JAVA序列化和反序列化的底層實現原理解析

一、基本概念 1、什麼是序列化和反序列化 　（1）Java序列化是指把Java物件轉換為位元組序列的過程，而Java反序列化是指把位元組序列恢復為Java物件的過程；

Spring CGLlB動態代理實現過程解析

JDK 動態代理使用起來非常簡單，但是它也有一定的侷限性，這是因為 JDK 動態代理必須要實現一個或多個介面，如果不希望實現介面，則可以使用 CGLIB 代理。

spring cloud Ribbon用法及原理解析

這篇文章主要介紹了spring cloud Ribbon用法及原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

python執行緒定時器Timer實現原理解析

這篇文章主要介紹了python執行緒定時器Timer實現原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Spring Bean例項化實現過程解析

這篇文章主要介紹了Spring Bean例項化實現過程解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JS前端廣告攔截實現原理解析

這篇文章主要介紹了JS前端廣告攔截實現原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Java Arrays.sort和Collections.sort排序實現原理解析

1、使用 排序 2、原理 事實上Collections.sort方法底層就是呼叫的array.sort方法，而且不論是Collections.sort或者是Arrays.sort方法，

Spring Cache擴充套件功能實現過程解析

*:first-child { margin-top: 0 !important;}body>*:last-child { margin-bottom: 0 !important;}/* BLOCKS=============================================================================*/p,pre { margin: 15px

Python3 assert斷言實現原理解析

語法格式如下： assert expression 等價於： if not expression: raise AssertionError assert 後面也可以緊跟引數:

SpringSecurity許可權控制實現原理解析

選單控制： 可以用來判斷這個使用者是不是有這些角色，沒有的話就不展示 資料控制：

Java web資料視覺化實現原理解析

這周用java web製作了全國各個省份的疫情資料的視覺化，做的是最基礎的柱狀圖。