1. 程式人生 > >AJAX面試題都在這裏

AJAX面試題都在這裏

成功 資料 nfa tel status 解決 ole 對象 地址

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有哪些有點和缺點?

優點:

  • 1、最大的一點是頁面無刷新,用戶的體驗非常好。
  • 2、使用異步方式與服務器通信,具有更加迅速的響應能力。
  • 3、可以把以前一些服務器負擔的工作轉嫁到客戶端,利用客戶端閑置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。並且減輕服務器的負擔,ajax的原則是“按需取數據”,可以最大程度的減少冗余請求,和響應對服務器造成的負擔。
  • 4、基於標準化的並被廣泛支持的技術,不需要下載插件或者小程序。

缺點:

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

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

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

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

闡述一下異步加載JS。

闡述一下異步加載JS。

  1. 異步加載的方案: 動態插入 script 標簽
  2. 通過 ajax 去獲取 js 代碼,然後通過 eval 執行
  3. script 標簽上添加 defer 或者 async 屬性
  4. 創建並插入 iframe,讓它異步執行 js

參考資料:

  • https://www.cnblogs.com/zichi/p/4597766.html
  • https://www.cnblogs.com/xkloveme/articles/7569426.html

如何解決跨域問題?

如何解決跨域問題?

理解跨域的概念:協議、域名、端口都相同才同域,否則都是跨域

出於安全考慮,服務器不允許ajax跨域獲取數據,但是可以跨域獲取文件內容。

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

AJAX跨域的問題可參考:

  • https://segmentfault.com/a/1190000012469713

Ajax 解決瀏覽器緩存問題?

Ajax 解決瀏覽器緩存問題?

  • 1、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
  • 2、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
  • 3、在URL後面加上一個隨機數: "fresh=" + Math.random();。
  • 4、在URL後面加上時間戳:"nowtime=" + new Date().getTime();。
  • 5、如果是使用jQuery,直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會執行這條語句就是不需要保存緩存記錄。

如果文章有錯的地方歡迎指正,大家互相交流。習慣在微信看技術文章的同學,可以關註微信公眾號:Java3y

AJAX面試題都在這裏