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是非常合適的選擇。
