首先前端常聽到的有ajax,axios,fetch來與服務器交換數據。我們來了解一下這些都是什么？

目錄

第一部分：什么是AJAX？

第二部分：什么是axios？

第三部分 什么是fetch？

第四部分 ajax,axios,fetch的區(qū)別

第五部分 細節(jié)拓展

第一部分：什么是AJAX？

AJAX：官方釋意:Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），針對MVC的編程。

怎么去簡單理解AJAX技術：異步的JavaScript和XML

• 異步：比如有兩個請求，A() 如果A請求數據沒結束，沒得到響應,B()在A()等待服務器響應時也可以執(zhí)行，這就是異步。
• XML：是在任何應用程序中讀寫數據的語言。
• JavaScript：是一種前端常用web開發(fā)語言，其中會使用瀏覽器XMLHttpRequest的對象讀取數據。

簡單理解AJAX：就是可以在請求沒有結束的同時，仍可以繼續(xù)多次發(fā)送請求，進行數據的讀取的操作的一種技術。（重點：不是新的編程語言，而是一種使用現有標準的新方法??！）

AJAX技術 特性

• Ajax 是一種用于創(chuàng)建快速動態(tài)網頁的技術。
• Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
• 通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
• 傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。

AJAX技術 應用

• 在jQuery中對AJAX技術進行了封裝，可以使用$ajax()來使用，改方法要引入整個JQuery，且針對于MVC框架來使用;

• vue和react中常用的axios(),針對MVVM框架;

• 運用 XHTML+CSS 來表達資訊；

• 運用 JavaScript 操作 DOM（Document Object Model）來執(zhí)行動態(tài)效果；

• 運用 XML 和 XSLT 操作資料;

• 運用 XMLHttpRequest 或新的 Fetch API 與網頁服務器進行異步資料交換；

第二部分：什么是axios？

axios:是一個基于promise 的 HTTP 庫，可以用在瀏覽器和 node.js中。? axios本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規(guī)范。對ajax技術的二次封裝。

axios?特性

• 為MVVM框架而生 (vue react)
• 用于瀏覽器和node.js的基于Promise的HTTP客戶端。
• 從瀏覽器制作XMLHttpRequests
• 讓HTTP從node.js的請求
• 支持Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換為JSON數據
• 客戶端支持防止XSRF
• 支持并發(fā)請求,?從 node.js 創(chuàng)建 http 請求 支持 Promise API 客戶端支持防止CSRF。

第三部分 什么是fetch？

fetch是和XMLHttpRequest同級的，XHR(XMLHttpRequests)?和?fetch API是兩種最常見的方法，用于從 Web 服務器獲取數據。XHR(XMLHttpRequests)?是一種傳統的數據請求方式，而?fetch API則代表了現代 Web 開發(fā)的新興標準。

你知道 XHR 和 Fetch 的區(qū)別嗎？ - 掘金 (juejin.cn)

fetch的特點

1、當接收到一個代表錯誤的 HTTP 狀態(tài)碼時，從 fetch() 返回的 Promise 不會被標記為 reject， 即使響應的 HTTP 狀態(tài)碼是 404 或 500。

2、fetch() 可以接受跨域 cookies。
3、fetch 不會發(fā)送 cookies，除非使用了credentials 的初始化選項。

第四部分 ajax,axios,fetch的區(qū)別

總結：

• ajax是一種技術；
• jquey中使用$.ajax()封裝了ajax技術，使用時必須引入juqery，針對的MVC框架;?
• axios也是封裝的ajax技術，可以在vue和react中使用,針對于MVVM框架；
• XHR(XMLHttpRequests)?和?fetch API是兩種最常見的方法，用于從 Web 服務器獲取數據。

第五部分 細節(jié)拓展

• 異步和同步的概念

同步：同步是指一個進程在執(zhí)行某個請求的時候，如果該請求需要一段時間才能返回信息，那么這個進程會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去。
異步：異步是指進程不需要一直等待下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進程的狀態(tài)，當有信息返回的時候會通知進程進行處理，這樣就可以提高執(zhí)行的效率了，即異步是我們發(fā)出的一個請求，該請求會在后臺自動發(fā)出并獲取數據，然后對數據進行處理，在此過程中，我們可以繼續(xù)做其他操作，不管它怎么發(fā)出請求，不關心它怎么處理數據。

• jquery.ajax()官網和?axios()的官網

jquery.ajax()官網jQuery.ajax（） |jQuery API 文檔https://api.jquery.com/Jquery.ajax/

?axios()的官網

起步 | Axios中文文檔 | Axios中文網 (axios-http.cn)https://www.axios-http.cn/docs/intro

• CSRF

CSRF（Cross-site request forgery）跨站請求偽造（縮寫為XSRF/CSRF），舉例：攻擊者盜用了你的身份，以你的名義發(fā)送惡意請求，CSRF能夠做的事情包括：以你名義發(fā)送郵件，發(fā)消息，盜取你的賬號，甚至于購買商品，虛擬貨幣轉賬…造成的問題包括：個人隱私泄露以及財產安全。

CSRF攻擊是源于WEB的隱式身份驗證機制！WEB的身份驗證機制雖然可以保證一個請求是來自于某個用戶的瀏覽器，但卻無法保證該請求是用戶批準發(fā)送的！

CSRF的防御

CSRF的防御可以從服務端和客戶端兩方面著手，防御效果是從服務端著手效果比較好，現在一般的CSRF防御也都在服務端進行。

服務端進行CSRF防御

服務端的CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數。一般使用都是在請求中添加Token,CSRF不能獲取到請求頭中的token，只能使用瀏覽器的cookie，所以就不能進行CSRF攻擊了。

總結：CSRF是惡意網站，通過用戶的點擊，使用用戶的Cookie,來去訪問第三方網站，解決方法，請求時加上隨機數Token,在訪問惡意網站時，是不會帶上這些token的，所以惡意網站就無法盜用身份去請求第三方網站，舉例：你去朋友家做客，朋友給你一把鑰匙，你放門墊下面，小偷看到了，也可以用這把鑰匙，后來朋友家做了升級，鑰匙上加了人臉識別，把你的臉錄入門鎖，每次只有你的臉才可以開門，小偷拿不到你的臉，只要鑰匙，就沒法進去了。人臉信息就相當于token。鑰匙就相當于cookie。小偷相當于惡意網站，朋友相當于第三方網站。

• MVC框架和MVVM框架

MVVM是Model-View-ViewModel的簡寫。 它本質上就是MVC 的改進版，整體和mvc差不多，最大的區(qū)別就是?mvc是單向的，而mvvm是雙向的，并且是自動的，也就是數據發(fā)生變化自動同步視圖，視圖發(fā)生變化自動同步數據 ，同時解決了 mvc 中大量的 DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗

MVC框架：MVC框架即Model View Controller，是模型Model-視圖View-控制器Controller的縮寫。

• Model：模型，是應用程序中用于處理數據邏輯的部分，通常模型對象負責在數據庫中存取數據。
• View：視圖，用戶界面顯示，通常視圖是根據模型數據創(chuàng)建的。
• controller：控制器，數據模型和視圖之間通信的橋梁?？刂破髫撠煆囊晥D讀取數據，控制用戶輸入，并向模型發(fā)送數據。

MVC思想：Controller負責將Model的數據用View顯示出來。

MVC優(yōu)點：耦合度低（運用MVC的應用程序的三個部件是相互獨立的，改變其中一個不會影響其他兩個）；重用性高（多個視圖可以使用同一個模型，生命周期成本低部署快（業(yè)務分工明確）可維護性高

缺點：不適合小型項目開發(fā)，視圖與控制器聯系過于緊密，妨礙了它們的獨立重用

MVVM框架：由Model，View，ViewModel三部分構成。

• M(Model)：數據模型（Vue的data）
• V(View)：視圖，即UI，用來展示數據（Vue的el）
• ViewModel：是一個對象，用來同步視圖View和模型Model

MVVM思想：雙向綁定，View和Model之間沒有直接聯系，通過ViewModel進行交互（即雙向數據綁定），View的變化可以引起Model的變化，Model的變化也可以引起View變化（類似于淺拷貝）。通過雙向數據綁定，View 和 Model 之間的同步工作完全是自動的，因此開發(fā)過程中不需要關注數據狀態(tài)的同步問題，復雜的數據狀態(tài)維護完全由 MVVM 來統一管理。

可以實現雙向綁定的標簽：Input，textarea，select標簽等（可以輸入或改變標簽內容的標簽）

MVVM優(yōu)點：低耦合，可重用性，雙向數據綁定，它實現了View和Model的自動同步，Vue就是使用的MVVM框架。

MVVM與MVC的區(qū)別：MVVM和MVC都是一種設計思想。MVVM與MVC最大的區(qū)別就是：它實現了View和Model的自動同步（當Model屬性改變時，不用手動操作Dom元素去改變View的顯示。而是改變屬性后，該屬性對應View的顯示會自動改變）。

本文有不足的地方，歡迎反應和提醒，會持續(xù)更新優(yōu)化該文章文章來源地址http://www.zghlxwxcb.cn/news/detail-791125.html

到了這里，關于AJAX-基本了解和掌握(前端必掌握在后臺與服務器交換數據)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！