Ajax 進階（一）

技術基礎：

HTML+CSS：略懂
JS：熟練※

開發工具：

IDEA

測試：

僞造Ajax,使用iframe 測試，感覺效果

a)新建模塊，導入web支持
b)編寫一個html文件，使用iframe測試，瀏覽器運行
![image.png](/img/bVbMqm7)
![image.png](/img/bVbMqnQ)

開發

基礎知識：

1. 使用ajax技術的網頁，經過在後臺服務器進行少許的數據交換，就能夠實現異步局部更新。
2. 使用Ajax，用戶能夠建立接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。

Ajax的核心是XMLHttpRequest對象(XHR)。XHR爲向服務器發送請求和解析服務器響應提供了接口。可以以異步方式從服務器獲取新數據。

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

4.經過 jQuery AJAX 方法，可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON – 同時可以把這些外部數據直接載入網頁的被選元素中。

5.jquery.ajax 使用到的部分參數：

url：請求地址

type：請求方式，GET、POST

data：要發送的數據（重要！！！！）

success：成功以後執行的回調函數(全局)
error：失敗以後執行的回調函數(全局)

測試應用場景：

註冊時，輸入用戶名自動檢測用戶是否已經存在。

登錄時，提示用戶名密碼錯誤

刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪 除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。

一、使用最原始的HttpServletResponse處理
（1）配置web.xml和springmvc的配置文件

（2）編寫一個AjaxController

（3）index.jsp中導入jquery ， 能夠使用在線的CDN ， 也能夠下載導入（cdn我沒有訪問到，直接百度下載包放入web>static>js目錄下）

（4）編寫index.jsp測試

（5）啓動tomcat測試！打開瀏覽器的控制檯，當咱們鼠標離開輸入框的時候，能夠看到發出了一個ajax的請求！是後臺返回給咱們的結果！測試成功！

**參數不匹配時：**
![image.png](/img/bVbMqBq)
**參數匹配時：**
![image.png](/img/bVbMqBP)

Tip：業務流程：

Controller接受前端發送的username參數 與data裏面的值相匹配
過程當中出現的錯誤：
（1）缺乏lib包
    緣由：構建Maven項目時打包方式沒選war
    解決方法：右上角項目構建，新建一個lib文件夾，手動導入lib包。
（2）運行到瀏覽器時，報錯jQuery找不到 
    緣由：
    ①：一開始我是使用的在線CDN直接導的jQuery，網站進不去因此沒訪問到，後面直接手動下載包導入的。
    ②：手動導入後仍是報錯，檢查代碼後發現applicationContest中靜態資源過濾器沒有配置。
    解決方法：在文件中配置

<mvc:default-servlet-handler />
  <mvc:annotation-driven />

知識內化：