Spring mvc AJAX技術(shù)實現(xiàn)原理解析

更新時間：2020年03月19日 12:06:47 作者：黃大姐の老公

這篇文章主要介紹了Spring mvc AJAX技術(shù)實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下

簡介

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

AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

Ajax 不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強的Web應(yīng)用程序的技術(shù)。

在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。Google Suggest能夠自動幫你完成搜索單詞。
Google Suggest 使用 AJAX 創(chuàng)造出動態(tài)性極強的 web 界面：當您在谷歌的搜索框輸入關(guān)鍵字時，JavaScript 會把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會返回一個搜索建議的列表。

傳統(tǒng)的網(wǎng)頁(即不用ajax技術(shù)的網(wǎng)頁)，想要更新內(nèi)容或者提交一個表單，都需要重新加載整個網(wǎng)頁。

使用ajax技術(shù)的網(wǎng)頁，通過在后臺服務(wù)器進行少量的數(shù)據(jù)交換，就可以實現(xiàn)異步局部更新。

使用Ajax，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動態(tài)的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可以做：

注冊時，輸入用戶名自動檢測用戶是否已經(jīng)存在。
登陸時，提示用戶名密碼錯誤
刪除數(shù)據(jù)行時，將行ID發(fā)送到后臺，后臺在數(shù)據(jù)庫中刪除，數(shù)據(jù)庫刪除成功后，在頁面DOM中將數(shù)據(jù)行也刪除。

....等等

jQuery.ajax

Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了接口。能夠以異步方式從服務(wù)器獲取新數(shù)據(jù)。

jQuery 提供多個與 AJAX 有關(guān)的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務(wù)器上請求文本、HTML、XML 或 JSON – 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。

jQuery 不是生產(chǎn)者，而是大自然搬運工。
jQuery Ajax本質(zhì)就是 XMLHttpRequest，對他進行了封裝，方便調(diào)用！
jQuery.ajax(...)

部分參數(shù)：

url：請求地址
type：請求方式，GET、POST（1.9.0之后用method）
headers：請求頭
data：要發(fā)送的數(shù)據(jù)
contentType：即將發(fā)送信息至服務(wù)器的內(nèi)容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否異步
timeout：設(shè)置請求超時時間（毫秒）
beforeSend：發(fā)送請求前執(zhí)行的函數(shù)(全局)
complete：完成之后執(zhí)行的回調(diào)函數(shù)(全局)
success：成功之后執(zhí)行的回調(diào)函數(shù)(全局)
error：失敗之后執(zhí)行的回調(diào)函數(shù)(全局)
accepts：通過請求頭發(fā)送給服務(wù)器，告訴服務(wù)器當前客戶端課接受的數(shù)據(jù)類型
dataType：將服務(wù)器端返回的數(shù)據(jù)轉(zhuǎn)換成指定類型
"xml": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成xml格式
"text": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式
"html": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式，在插入DOM中時，如果包含JavaScript標簽，則會嘗試去執(zhí)行。
"script": 嘗試將返回值當作JavaScript去執(zhí)行，然后再將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式
"json": 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成相應(yīng)的JavaScript對象
"jsonp": JSONP 格式使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)

簡單的測試，使用最原始的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");
    }
  }

}

導(dǎo)入jquery ，可以使用在線的CDN ，也可以下載導(dǎo)入

<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：失去焦點觸發(fā)事件--%>
 用戶名:<input type="text" id="txtName" onblur="a1()"/>
 </body>
</html>

啟動tomcat測試！打開瀏覽器的控制臺，當我們鼠標離開輸入框的時候，可以看到發(fā)出了一個ajax的請求！是后臺返回給我們的結(jié)果！測試成功！

SpringMVC實現(xiàn)

實體類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("黃小姐",25,"女"));、
  return list; //由于@RestController注解，將list轉(zhuǎn)成json格式返回
}

前端頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="獲取數(shù)據(jù)"/>
<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>

成功實現(xiàn)了數(shù)據(jù)回顯！

注冊提示效果

寫一個Controller

@RequestMapping("/a3")
public String ajax3(String name,String pwd){
  String msg = "";
  //模擬數(shù)據(jù)庫中存在數(shù)據(jù)
  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轉(zhuǎn)成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函數(shù) (分析接口、數(shù)據(jù))
    function demo(data){
      var Ul = document.getElementById('ul');
      var html = '';
      // 如果搜索數(shù)據(jù)存在 把內(nèi)容添加進去
      if (data.s.length) {
        // 隱藏掉的ul顯示出來
        Ul.style.display = 'block';
        // 搜索到的數(shù)據(jù)循環(huán)追加到li里
        for(var i = 0;i<data.s.length;i++){
          html += '<li>'+data.s[i]+'</li>';
        }
        // 循環(huán)的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重點☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
          // 創(chuàng)建標簽
          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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: