1. 程式人生 > >談談Ajax(一)

談談Ajax(一)

res 後退 vma 我只 應該 load 操作 為什麽 reload

技術分享圖片

解決辦法是:比如我是使用SSM框架(Spring+SpringMVC+MyBatis/MyBatis Plus)開發web應用,通常Controller的參數列表與ajax的data保持一致即可,少一個行,多一個也不行。必須要對應上,否則會報這個錯誤。

AJAX(異步的JavaScriptAndXML)

AJAX 是一種用於創建快速動態網頁的技術。

通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。

比如,之前我們團隊開發的第一個酒店後臺管理系統,用到的是jsp,基本沒有ajax,這樣基本是同步請求,比如每次添加或者刪除數據,都要跳轉頁面刷新整個網頁,看起來一點都不爽。如果是使用AJAX,每次對數據進行增加或者編輯、刪除等操作,看到的只是局部(某個div或者table發送變化)。

同步請求和異步請求的區別

先解釋一下同步和異步的概念:

同步是指:發送方發出數據後,等接收方發回響應以後才發下一個數據包的通訊方式。

異步是指:發送方發出數據後,不等接收方發回響應,接著發送下個數據包的通訊方式。

同步請求:

客戶端請求(等待)->服務端處理->響應->頁面載入 (缺少對象:XMLhttpRequest)
這時候如果有錯誤,只能再次發送請求,再次等待

異步請求:

簡單的說,與同步請求相比,我即可吃飯又可以玩手機,而不像同步請求我只能等吃完飯後再去玩手機。這個例子,舉的不是特別高明,但是我覺得可以比較好的說明同步和異步的區別。

為什麽要使用AJAX?

優點:

使用Ajax的最大優點,就是能在不更新整個頁面的前提下維護數據。
這使得Web應用程序更為迅捷地響應用戶動作,並避免了在網絡上發送那些沒有改變的html代碼信息。前面我舉了一個關於我們團隊開發的第一個項目為例。

1.減輕服務器負擔,按需要獲得數據。
2.無刷新更新頁面,減少用戶的實際和心理的等待時間。
3.更好的用戶體驗。
4.減輕寬帶的負擔。
5.主流瀏覽器支持

比如:用戶不可能訪問一個頁面等待一個多小時,還顯示不了內容吧,正常來說,用戶的心理預期應該在5秒內或者是3秒。對於現在而言,用戶就是財富。這也就是為什麽大數據為什麽這麽火的原因之一。

缺點:

1.AJAX的程序必須測試針對各個瀏覽器的兼容性。
2.AJAX更新頁面內容的時候並沒有刷新整個頁面,因此,網頁的後退功能是失效的;
3.對搜索引擎支持不好。

比如:2,比如我開發一個博客應用,文章列表展示,比如我現在新增了一篇文章,發現它並沒有在文章列表展示,於是我手動刷新下。又或者在新增後,我調用js的location.reload()函數重新加載。

技術分享圖片

這裏主要談談用jQuery+AJAX的三種實現方式:

第一種,$.ajax

$.ajax可支持POST、GET、PUT、DELETE等RestFul常用方式。

技術分享圖片

第二種,$.post

該方法主要用於post請求

技術分享圖片

第三種,$.get

該方法主要用於get請求

技術分享圖片

上述三種常見方式,我個人用的比較多的是$.ajax和$.post,$.get用的確實少,因為覺得,$.ajax可以搞定,就不需要$.get了。至於$.post是因為使用了layui的彈出層,該彈出層與$.post結合實現,比如退出功能或者是刪除功能等,比較好。因為可以提高用戶體驗。

作為公司的前後端開發人員,從前端的角度,盡可能最大程度上,提高用戶體驗。

談談Ajax(一)