面試題 —— Ajax的基本原理總結

時間 2019-11-11

原文原文鏈接

Ajax 的全稱是Asynchronous JavaScript and XML（異步的JavaScript 和 XML），其中，Asynchronous 是異步的意思，它有別於傳統web開發中採用的同步的方式。javascript

關於同步和異步

異步傳輸是面向字符的傳輸，它的單位是字符；
而同步傳輸是面向比特的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。前端

同步的話，必須這個操做完了纔會執行下一步，在等待期間瀏覽器會掛起不能執行任何接下來的js代碼；異步則是【告訴】瀏覽器去作，【告訴】是一瞬間的事情，而後就繼續執行下一步了，等到結果返回來了，瀏覽器會通知js執行相應的回調。

java

ajax原理和XmlHttpRequest對象

Ajax至關於在用戶和服務器之間加了—箇中間層,使用戶操做與服務器響應異步化。並非全部的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。web

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發送異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。ajax

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。數據庫

首先，須要先了解XMLHttpRequest這個對象的屬性和方法：json

屬性：小程序

方法：後端

ajax的優勢

Ajax的給咱們帶來的好處你們基本上都深有體會，在這裏我只簡單的講幾點：api

<1>.無刷新更新數據。
AJAX最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據。這使得Web應用程序更爲迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減小用戶等待時間，帶來很是好的用戶體驗。

<2>.異步與服務器通訊。
AJAX使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。優化了Browser和Server之間的溝通，減小沒必要要的數據傳輸、時間及下降網絡上數據流量。

<3>.前端和後端負載平衡。
AJAX能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，AJAX的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔，提高站點性能。

<4>.基於標準被普遍支持。
AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。一樣，也出現了另外一種輔助程序設計的技術，爲那些不支持JavaScript的用戶提供替代功能。

<5>.界面與應用分離。
Ajax使WEB中的界面與應用分離（也能夠說是數據與呈現分離），有利於分工合做、減小非技術人員對頁面的修改形成的WEB應用程序錯誤、提升效率、也更加適用於如今的發佈系統。

AJAX的缺點

<1>.AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，由於瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差異很是微妙；用戶一般會但願單擊後退按鈕可以取消他們的前一次操做，可是在Ajax應用程序中，這將沒法實現。

<2>.AJAX的安全問題。
AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。Ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有Ajax也難以免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於Credentials的安全漏洞等等。

<3>.對搜索引擎支持較弱。
對搜索引擎的支持比較弱。若是使用不當，AJAX會增大網絡數據的流量，從而下降整個系統的性能。

<4>.破壞程序的異常處理機制。
至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制的。關於這個問題，曾在開發過程當中遇到過，可是查了一下網上幾乎沒有相關的介紹。後來作了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條數據……給咱們的調試帶來了很大的困難。

<5>.違背URL和資源定位的初衷。
例如，我給你一個URL地址，若是採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不一樣的。這個和資源定位的初衷是相背離的。

<6>.AJAX不能很好支持移動設備。
一些手持設備（如手機、PDA等）如今還不能很好的支持Ajax，好比說咱們在手機的瀏覽器上打開採用Ajax技術的網站時，它目前是不支持的。

<7>.客戶端過肥，太多客戶端代碼形成開發上的成本。
編寫複雜、容易出錯；冗餘代碼比較多（層層包含js文件是AJAX的通病，再加上以往的不少服務端代碼如今放到了客戶端）；破壞了Web的原有標準。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一、Ajax 是什麼? 如何建立一個Ajax？

Ajax並不算是一種新的技術，全稱是asychronous javascript and xml，能夠說是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，早期的瀏覽器並不能原生支持ajax，可使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持

使用ajax原生方式發送請求主要經過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通訊效果

基本步驟：

var xhr =null;//建立對象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(「方式」,」地址」,」標誌位」);//初始化請求

xhr.setRequestHeader(「」,」」);//設置http頭信息

xhr.onreadystatechange =function(){}//指定回調函數

xhr.send();//發送請求

js框架（jQuery/EXTJS等）提供的ajax API對原生的ajax進行了封裝，熟悉了基礎理論，再學習別的框架就會駕輕就熟，好多都是換湯不換藥的內容

二、同步和異步的區別?

同步：阻塞的

-張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩我的一塊去吃飯

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面

異步：非阻塞的

-張三叫李四去吃飯，李四在忙，張三說了一聲而後本身就去吃飯了，李四忙完後本身去吃

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器能夠自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新

三、如何解決跨域問題?

理解跨域的概念：協議、域名、端口都相同才同域，不然都是跨域

出於安全考慮，服務器不容許ajax跨域獲取數據，可是能夠跨域獲取文件內容，因此基於這一點，能夠動態建立script標籤，使用標籤的src屬性訪問js文件的形式獲取js腳本，而且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，爲了獲取這裏的參數數據，須要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案

四、頁面編碼和被請求的資源編碼若是不一致如何處理？

對於ajax請求傳遞的參數，若是是get請求方式，參數若是傳遞中文，在有些瀏覽器會亂碼，不一樣的瀏覽器對參數編碼的處理方式不一樣，因此對於get請求的參數須要使用 encodeURIComponent函數對參數進行編碼處理，後臺開發語言都有相應的解碼api。對於post請求不須要進行編碼

五、簡述ajax 的過程。

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新

六、闡述一下異步加載JS。

1. 異步加載的方案：動態插入 script 標籤

2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行

3. script 標籤上添加 defer 或者 async 屬性

4. 建立並插入 iframe，讓它異步執行 js

七、請解釋一下 JavaScript 的同源策略。‘’

同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

八、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符，有的瀏覽器是8000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制

在如下狀況中，請使用 POST 請求：

1. 沒法使用緩存文件（更新服務器上的文件或數據庫）

2. 向服務器發送大量數據（POST 沒有數據量限制）

3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

九、ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

1. 經過異步模式，提高了用戶體驗

2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

十、 Ajax的最大的特色是什麼。

Ajax能夠實現異步通訊效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；

十一、ajax的缺點

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

十二、ajax請求的時候get 和post方式的區別

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

1三、解釋jsonp的原理，以及爲何不是真正的ajax

Jsonp並非一種數據格式9，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是經過動態建立script標籤，而後經過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，須要事先在頁面定義好回調函數，本質上使用的並非ajax技術