我討厭 YUI 3 .....第五天 Ajax IO

Tags:

簡中版

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

使用 config 的方式

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

範例

var conf={
    method: 'POST',
    data: 'key=value&key2=value',
    headers: {
        'Content-Type': 'application/json',
    },
   on:{
      complete:function(id,res){
         var data = res.responseText; // Response data.
         Y.one('.result').setContent(data);
      },
      start:function(o){
         Y.one('.result').setContent("loading");
      },
      failure:function(o){
         alert("fail");
      }
   }
}
var url="xxx.html";
Y.io(url, conf);

接著還是看個範例吧

YUI IO conf Exampled

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。

範例

function makeRequest(url) {
   http_request = false;
   if (window.XMLHttpRequest) { // Mozilla, Safari,...
      http_request = new XMLHttpRequest();
      if (http_request.overrideMimeType) {
         http_request.overrideMimeType('text/xml');
      }
   } else if (window.ActiveXObject) { // IE
      try {
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
         
      } catch (e) {
         try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
      }
   }
 
   if (!http_request) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
   }
   
   http_request.onreadystatechange =alertContents;
   http_request.open('GET',url, true);
 
   http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   http_request.send(null);
 
}

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

範例

function alertContents() {
   if (http_request.readyState == 4) {
      if (http_request.status == 0 || http_request.status == 200) {
         document.getElementById('result').innerHTML=http_request.responseText;
 
      } else { 
   
         alert('There was a problem with the request.');
      }
   }else{
   }
}

跨網域備註

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

網頁好讀版

This post was last modified by puritys 2016/09/25

我討厭 YUI 3 .....第三天 Node Plugin

我討厭 YUI 3 .....第八天 Widget