前端面試基礎題：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題，完整總結！