AJAX面試題都在這裏

AJAX常見面試題

什麼是AJAX，爲何要使用Ajax

AJAX是「Asynchronous JavaScript and XML」的縮寫。他是指一種建立交互式網頁應用的網頁開發技術。、

客戶端與服務器，能夠在【沒必要刷新整個瀏覽器】的狀況下，與服務器進行異步通信的技術

AJAX應用和傳統Web應用有什麼不一樣？

AJAX應用和傳統Web應用有什麼不一樣？

• 傳統的web前端與後端的交互中，瀏覽器直接訪問Tomcat的Servlet來獲取數據。Servlet經過轉發把數據發送給瀏覽器。
• 當咱們使用AJAX以後，瀏覽器是先把請求發送到XMLHttpRequest異步對象之中，異步對象對請求進行封裝，而後再與發送給服務器。服務器並非以轉發的方式響應，而是以流的方式把數據返回給瀏覽器
• XMLHttpRequest異步對象會不停監聽服務器狀態的變化，獲得服務器返回的數據，就寫到瀏覽器上【由於不是轉發的方式，因此是無刷新就可以獲取服務器端的數據】

請介紹一下XMLhttprequest對象

請介紹一下XMLhttprequest對象

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。經過XMLHttpRequest對象，Web開發人員能夠在頁面加載之後進行頁面的局部更新

介紹一下XMLHttpRequest對象的經常使用方法和屬性

方法

• open()(String method,String url,boolean asynch,String username,String password)
• send(content)
• setRequestHeader(String header,String value)
• getAllResponseHeaders()
• getResponseHeader(String header)
• abort()

經常使用的方法就是黑色粗體的前三個

• open()：該方法建立http請求
  • 第一個參數是指定提交方式(post、get)
  • 第二個參數是指定要提交的地址是哪
  • 第三個參數是指定是異步仍是同步(true表示異步，false表示同步)
  • 第四和第五參數在http認證的時候會用到。是可選的
• setRequestHeader(String header,String value)：設置消息頭（使用post方式纔會使用到，get方法並不須要調用該方法）
  • xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
• send(content)：發送請求給服務器
  • 若是是get方式，並不須要填寫參數，或填寫null
  • 若是是post方式，把要提交的參數寫上去

屬性

• onreadystatechange：請求狀態改變的事件觸發器（readyState變化時會調用此方法），通常用於指定回調函數
• readyState：請求狀態readyState一改變，回調函數被調用，它有5個狀態
  • 0：未初始化
  • 1：open方法成功調用之後
  • 2：服務器已經應答客戶端的請求
  • 3：交互中。Http頭信息已經接收，響應數據還沒有接收。
  • 4：完成。數據接收完成

• responseText：服務器返回的文本內容
• responseXML：服務器返回的兼容DOM的XML內容
• status：服務器返回的狀態碼
• statusText：服務器返回狀態碼的文本信息

上面有兩個地方都說起了回調函數，回調函數是什麼？？

回調函數就是接收服務器返回的內容！

Ajax的實現流程是怎樣的？

Ajax的實現流程是怎樣的？

• (1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
• (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
• (3)設置響應HTTP請求狀態變化的函數.
• (4)發送HTTP請求.
• (5)獲取異步調用返回的數據.
• (6)使用JavaScript和DOM實現局部刷新.

<script type="text/javascript">

        var httpRequest;
        function checkUsername() {

            if(window.XMLHttpRequest) {

                //在IE6以上的版本以及其餘內核的瀏覽器(Mozilla)等
                httpRequest = new XMLHttpRequest();
            }else if(window.ActiveXObject) {

                //在IE6如下的版本
                httpRequest = new ActiveXObject();
            }


            //建立http請求
            httpRequest.open("POST", "Servlet1", true);

            //由於我使用的是post方式，因此須要設置消息頭
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            //指定回調函數
            httpRequest.onreadystatechange = response22;

            //獲得文本框的數據
            var name = document.getElementById("username").value;

            //發送http請求，把要檢測的用戶名傳遞進去
            httpRequest.send("username=" + name);

        }

        function response22() {

            //判斷請求狀態碼是不是4【數據接收完成】
            if(httpRequest.readyState==4) {

                //再判斷狀態碼是否爲200【200是成功的】
                if(httpRequest.status==200) {

                    //獲得服務端返回的文本數據
                    var text = httpRequest.responseText;

                    //把服務端返回的數據寫在div上
                    var div = document.getElementById("result");
                    div.innerText = text;
                }

            }
        }
    </script>

複製代碼

AJAX請求總共有多少種CALLBACK

AJAX請求總共有多少種CALLBACK

Ajax請求總共有八種Callback

• onSuccess
• onFailure
• onUninitialized
• onLoading
• onLoaded
• onInteractive
• onComplete
• onException

XMLHttpRequest對象在IE和Firefox中建立方式有沒有不一樣。

有，IE中經過new ActiveXObject()獲得，Firefox中經過newXMLHttpRequest()獲得

• 固然了，咱們通常使用jquery封裝好的ajax方法，那就沒有那麼麻煩了。

AJAX有哪些有點和缺點？

AJAX有哪些有點和缺點？

優勢：

• 一、最大的一點是頁面無刷新，用戶的體驗很是好。
• 二、使用異步方式與服務器通訊，具備更加迅速的響應能力。
• 三、能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，ajax的原則是「按需取數據」，能夠最大程度的減小冗餘請求，和響應對服務器形成的負擔。
• 四、基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。

缺點：

• 一、ajax不支持瀏覽器back按鈕。
• 二、安全問題 AJAX暴露了與服務器交互的細節。
• 三、對搜索引擎的支持比較弱。
• 四、破壞了程序的異常機制。
• 五、不容易調試。

請解釋一下 JavaScript 的同源策略。

請解釋一下 JavaScript 的同源策略。

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

闡述一下異步加載JS。

闡述一下異步加載JS。

1. 異步加載的方案： 動態插入 script 標籤
2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行
3. script 標籤上添加 defer 或者 async 屬性
4. 建立並插入 iframe，讓它異步執行 js

參考資料：

• www.cnblogs.com/zichi/p/459…
• www.cnblogs.com/xkloveme/ar…

如何解決跨域問題?

如何解決跨域問題?

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

出於安全考慮，服務器不容許ajax跨域獲取數據，可是能夠跨域獲取文件內容。

• 因此基於這一點，能夠動態建立script標籤，使用標籤的src屬性訪問js文件的形式獲取js腳本，而且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，爲了獲取這裏的參數數據，須要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，【JSONP】
• 在後端上配置可跨域**【CORS方式】**
• 前端ajax請求的是本地接口，本地接口接收到請求後向實際的接口請求數據，而後再將信息返回給前端**【代理方式】**

AJAX跨域的問題可參考：

• segmentfault.com/a/119000001…

Ajax 解決瀏覽器緩存問題？

Ajax 解決瀏覽器緩存問題？

• 一、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
• 二、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
• 三、在URL後面加上一個隨機數： "fresh=" + Math.random();。
• 四、在URL後面加上時間戳："nowtime=" + new Date().getTime();。
• 五、若是是使用jQuery，直接這樣就能夠了 $.ajaxSetup({cache:false})。這樣頁面的全部ajax都會執行這條語句就是不須要保存緩存記錄。

---

若是文章有錯的地方歡迎指正，你們互相交流。習慣在微信看技術文章的同窗，能夠關注微信公衆號:Java3y