前端面試基礎題：Ajax原理

• Ajax 的原理簡單來說是在⽤戶和伺服器之間加了—個中間層( AJAX 引擎)，通過XmlHttpRequest 對象來向伺服器發非同步請求，從伺服器獲得數據，然後⽤ javascrip t 來操作 DOM ⽽更新⻚⾯。使⽤戶操作與伺服器響應非同步化。這其中最關鍵的⼀步就是從服 務器獲得請求數據

• Ajax 的過程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest是aja x的核⼼機制

/** 1. 創建連接 **/
var xhr = null;
xhr = new XMLHttpRequest()
/** 2. 連接伺服器 **/
xhr.open('get', url, true)
/** 3. 發送請求 **/
xhr.send(null);
/** 4. 接受請求 **/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText); } else {
/** false **/
fail && fail(xhr.status); } } }

ajax 有那些優缺點?

• 優點：

  • 通過非同步模式，提升了⽤戶體驗.
  • 優化了瀏覽器和伺服器之間的傳輸，減少不必要的數據往返，減少了帶寬占⽤
  • Ajax 在客戶端運⾏，承擔了⼀部分本來由伺服器承擔的⼯作，減少了⼤⽤戶量下的服 務器負載。
  • Ajax 可以實現動態不刷新（局部刷新）

• 缺點：

  • 安全問題 AJAX 暴露了與伺服器交互的細節。
  • 對搜索引擎的⽀持⽐較弱。
  • 不容易調試。

推薦：

• 2020前端面試基礎題293題，完整總結！