2012
Jan
10

網頁好讀版


Ajax 這麼火紅,當然 YUI 是一定有支援 Ajax 功能的啦,而且還支援用 Flash Crossdomain 的方式跨網域,不過跨網域一定要在對方的伺服器上,加上 crossdomain.xml ,並寫上允許的網域才行,所以還是有限制的,不要異想天開喔,這是安全性因素,不太可能會被修改的(跨網域備註)。

綁Ajax事件

第一步當然是要知道,我們必需載入的 YUI library (io-base),YUI().use("io-base",function(){}); ,接下來先開始設定 Ajax Event的 function ,下列的設定中,第一個參數值,代表 YUI 定義的處理內容,第二個參數值,代表處理的 function ,第三個參數值,就是傳入 YUI 自已,第四個參數值代表額外傳給處理 function的變數。

  • Y.on('io:start', beforeSend, Y, { start: ['arguments','argu2']}); 雷同 JQuery 的 beforeSend : 在抓取頁面的之前,指定預先要執行的工作,如顯示 Loading 圖片。
  • Y.on('io:failure', failure, Y, { start: ['foo','bar']}); : 如果抓取網頁失敗後,要執行的 function。
  • Y.on('io:complete', success, Y, ['lorem', 'ipsum']); : 雷同 JQuery 的 success ,成功抓取到的網頁後,要執行的 function
有以上三個 event 後,就可以寫出一個簡單的 Ajax工作內容囉,看範例如下。
  • YUI IO Example
Demo

使用 config 的方式

Ajax的使用方式,也可以像 JQuery一樣,全部寫在 config裡就好了,這樣寫程式就乾淨多,也好懂很多。

範例
  1. var conf={
  2. method: 'POST',
  3. data: 'key=value&key2=value',
  4. headers: {
  5. 'Content-Type': 'application/json',
  6. },
  7. on:{
  8. complete:function(id,res){
  9. var data = res.responseText; // Response data.
  10. Y.one('.result').setContent(data);
  11. },
  12. start:function(o){
  13. Y.one('.result').setContent("loading");
  14. },
  15. failure:function(o){
  16. alert("fail");
  17. }
  18. }
  19. }
  20. var url="xxx.html";
  21. Y.io(url, conf);
接著還是看個範例吧
  • YUI IO conf Exampled
Demo

JQuery Ajax

講完 YUI Ajax 的用法,現在輪到 JQuery 囉,jQuery 只有一種寫法,就是用 config 的方式, 注意Jquery 也是不能跨網域的喔

type:"get",
url:"xxx.html", //抓取的網頁連結
data:"submit=true" , //傳送的參數
beforeSend:function(){ //資料傳輸中處理
},
success:function(res_text){ //回應處理
alert("response="+res_text);
}
});
#

純 Javascript Ajax

看完 YUI 簡單的用法,現在就來復習一下傳統 Javascript 怎麼實作 Ajax 的功能吧,實現的方式會比較麻煩一點,主要的原因是 IE ,Firefox 寫法不太一樣, IE 是使用 ActiveXObject的物件去實現 Ajax ,而 Firefox 可以使用 XMLHttpRequest 來完成

下面的 Ajax makeRequest :這是一個傳送 request 的範例 ,並指定接收 response 的function為 alertContents。

範例
  1. function makeRequest(url) {
  2. http_request = false;
  3. if (window.XMLHttpRequest) { // Mozilla, Safari,...
  4. http_request = new XMLHttpRequest();
  5. if (http_request.overrideMimeType) {
  6. http_request.overrideMimeType('text/xml');
  7. }
  8. } else if (window.ActiveXObject) { // IE
  9. try {
  10. http_request = new ActiveXObject("Msxml2.XMLHTTP");
  11. } catch (e) {
  12. try {
  13. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  14. } catch (e) {}
  15. }
  16. }
  17.  
  18. if (!http_request) {
  19. alert('Giving up :( Cannot create an XMLHTTP instance');
  20. return false;
  21. }
  22. http_request.onreadystatechange =alertContents;
  23. http_request.open('GET',url, true);
  24.  
  25. http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  26. http_request.send(null);
  27.  
  28. }

接收 Response的function要判斷 TCP 傳輸的狀態,readyStatus : 1 代表 initial , 2 是傳輸入, 3 是接收資料中, 4 是資料接收完成,判斷完 readyStatus 後,還要再判斷另一個 status ,這是 HTTP 的 Status: 200代表成功抓取到網頁, status的意思可以參考[Http Status]

範例
  1. function alertContents() {
  2. if (http_request.readyState == 4) {
  3. if (http_request.status == 0 || http_request.status == 200) {
  4. document.getElementById('result').innerHTML=http_request.responseText;
  5.  
  6. } else {
  7. alert('There was a problem with the request.');
  8. }
  9. }else{
  10. }
  11. }

跨網域備註

所謂的跨網域就是說 A 網站使用 AJAX 功能,試圖去 B 網站擷取資料回來,這個行為會構成安全性上的漏洞,闢如說,假設你今天已經登入 Yahoo 拍賣網站,接著又去 Hack 網站看了一篇文章,接著 Hack 網站自動執行了一個 AJAX, 到 Yahoo 拍賣購買了一件商品,因為是透過你的 Browser 去執行,所以 Cookie 會自動帶給 Yahoo 拍賣,於是就完成了交易,當然這個行為是不允許的,所以 Browser 會阻止跨網域的行為。

網頁好讀版