JS面試——AJAX


1、ajax的實現和原理

原理:Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。

實現步驟:

1.創建XMLHTTPRequest對象

2.注冊回調函數 xhr.onreadystatechange=callback;

3.設置和服務器端的鏈接信息。xhr.open(http請求方式(get,post),url,設置異步或同步方式交互(true,false));

4.發送數據開始交互。xhr.send(null); 

5.接受響應數據。

 

2、Ajax的優缺點

Ajax的優點:

    1)最大的一點是頁面無刷新,在頁面內與服務器通信,給用戶的體驗非常好。

  2)使用異步方式與服務器通信,不需要打斷用戶的操作,具有更加迅速的響應能力。

  3)把以前一些服務器負擔的工作轉嫁到客戶端,利用客戶端閑置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。ajax的原則是“按需取數據”,可以最大程度的減少冗余請求,和響應對服務器造成的負擔。

  Ajax的工作原理相當於在用戶和服務器之間加了—個中間層(AJAX引擎),使用戶操作與服務器響應異步化。並不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。

    4)基於標准化的並被廣泛支持的技術,不需要下載插件或者小程序。

Ajax的缺點:

  1)ajax干掉了back按鈕,即對瀏覽器后退機制的破壞。

    2)安全問題

  ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯。ajax的邏輯可以對客戶端的安全掃描技術隱藏起來,允許黑客從遠端服務器上建立新的攻擊。

    3)對搜索引擎的支持比較弱

    4)一些手持設備(如手機、PDA等)現在還不能很好的支持ajax

 

詳解:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

http://www.jb51.net/article/74357.htm

 

 

3、AJAX機制,open的參數是什么

機制見1原理部分

open()有三個參數,第一個是要發送的請求類型(get或post),第二個:請求的URL  第三個:是否異步發送請求的布爾值

 

4、說說對Ajax的理解,怎么實現局部刷新,怎么將獲取到的JSON 數據在頁面中顯示出來,JSON 序列化成了字符串后應該怎么處理

局部刷新:從服務器獲得數據,然后用javascript來操作DOM而更新頁面

如果返回的是JSON數據,

1. var str=xhr.responseText; 獲取響應數據

2. var obj=JSON.parse(str); 解析JSON數據成為JS對象

3. 操作JS對象

比如JSON數據是:

[
  {
    "term": "BACCHUS",
    "part": "n.",
    "definition": "A convenient deity invented by the ancients as an excuse for getting drunk.",
    "quote": [
      "Is public worship, then, a sin,",
      "That for devotions paid to Bacchus",
      "The lictors dare to run us in,",
      "And resolutely thump and whack us?"
    ],
    "author": "Jorace"
  },
  {
    "term": "BACKBITE",
    "part": "v.t.",
    "definition": "To speak of a man as you find him when he can't find you."
  }
]

 

上面的JSON是個數組,var obj=JSON.parse(str) 后就變成了JS對象數組

obj=[
  {
    "term": "BACCHUS",
    "part": "n.",
    "definition": "A convenient deity invented by the ancients as an excuse for getting drunk.",
    "quote": [
      "Is public worship, then, a sin,",
      "That for devotions paid to Bacchus",
      "The lictors dare to run us in,",
      "And resolutely thump and whack us?"
    ],
    "author": "Jorace"
  },
  {
    "term": "BACKBITE",
    "part": "v.t.",
    "definition": "To speak of a man as you find him when he can't find you."
  }
]

 

現在得到了JS對象數組,因此可以正常操作JS

var str=xhr.responseText; //獲得響應數據
var obj=JSON.parse(str); //解析成JS對象數組
var html='';
for(var i=0;i<obj.length;i++){ //遍歷整個對象數組
  html+='<div class="entry">'; 
  html+='<div class="term">'+obj[i].term+'</div>'; //通過obj[i]獲得數組中的某個對象,然后通過obj[i].term直接獲取term對應的值
  html+='<div class="part">'+obj[i].part+'</div>';
  html+='<div class="definition">'+obj[i].definition;
  if(obj[i].quote){
         html+='<div class="quote">';
         for(var j=0;j<obj[i].quote.length;j++){
        html+='<div class="quote-line">'+obj[i].quote[j]+'</div>';
      }
     if(obj[i].author){
        html+='<div class="author">'+obj[i].author+'</div>';
      }      html
+='</div>';   }      html+='</div>';      html+='</div>';   } document.getElementById('dictionary').innerHTML=html;

 

5、請解釋 JSONP 的工作原理,以及它為什么不是真正的 AJAX

由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、端口)的資源,為了實現跨域請求,可以通過script標簽實現跨域請求,然后在服務端輸出JSON數據並執行回調函數,從而解決了跨域的數據請求。

為了便於客戶端使用數據,逐漸形成了一種非正式傳輸協議,人們把它稱作JSONP,該協議的一個要點就是允許用戶傳遞一個callback參數給服務端,然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據,這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

Jsonp原理: 
首先在客戶端注冊一個callback, 然后把callback的名字傳給服務器。
此時,服務器先生成 json 數據。然后將這個callback參數作為函數名來包裹住JSON數據,返回給客戶端。
客戶端瀏覽器,動態執行回調函數,將返回的數據作為參數,傳入到了客戶端預先定義好的 callback 函數里.

ajax和jsonp這兩種技術在調用方式上“看起來”很像,目的也一樣,都是請求一個url,然后把服務器返回的數據進行處理,因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝;但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容,而jsonp的核心則是動態添加<script>標簽來調用服務器提供的js腳本。所以說,其實ajax與jsonp的區別不在於是否跨域,ajax通過服務端代理一樣可以實現跨域,jsonp本身也不排斥同域的數據的獲取。還有就是,jsonp是一種方式或者說非強制性協議,如同ajax一樣,它也不一定非要用json格式來傳遞數據,如果你願意,字符串都行,只不過這樣不利於用jsonp提供公開服務。

缺陷:

第一,也是最重要的一點,沒有關於 JSONP 調用的錯誤處理。如果動態腳本插入有效,就執行調用;如果無效,就靜默失敗。失敗是沒有任何提示的。例如,不能從服務器捕捉到 404 錯誤,也不能取消或重新開始請求。不過,等待一段時間還沒有響應的話,就不用理它了。(未來的 jQuery 版本可能有終止 JSONP 請求的特性)。

JSONP 的另一個主要缺陷是被不信任的服務使用時會很危險。因為 JSONP 服務返回打包在函數調用中的 JSON 響應,而函數調用是由瀏覽器執行的,這使宿主 Web 應用程序更容易受到各類攻擊。如果打算使用 JSONP 服務,了解它能造成的威脅非常重要。

http://kb.cnblogs.com/page/139725/

 

JSONP (JSON with Padding)是一個簡單高效的跨域方式,HTML中的script標簽可以加載並執行其他域的javascript,於是我們可以通過script標記來動態加載其他域的資源。例如我要從域A的頁面pageA加載域B的數據,那么在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數據,然后在 pageA中用script標簽把pageB加載進來,那么pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數,pageB加載完之后會執行pageA中定義的函數,所需要的數據會以參數的形式傳遞給該函數。JSONP易於實現,但是也會存在一些安全隱患,如果第三方的腳本隨意地執行,那么它就可以篡改頁面內容,截獲敏感數據。但是在受信任的雙方傳遞數據,JSONP是非常合適的選擇。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM