2012
Jan
10

我討厭 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
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.          
  12.       } catch (e) {
  13.          try {
  14.             http_request = new ActiveXObject("Microsoft.XMLHTTP");
  15.          } catch (e) {}
  16.       }
  17.    }
  18.  
  19.    if (!http_request) {
  20.       alert('Giving up :( Cannot create an XMLHTTP instance');
  21.       return false;
  22.    }
  23.    
  24.    http_request.onreadystatechange =alertContents;
  25.    http_request.open('GET',url, true);
  26.  
  27.    http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  28.    http_request.send(null);
  29.  
  30. }

接收 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.    
  8.          alert('There was a problem with the request.');
  9.       }
  10.    }else{
  11.    }
  12. }

跨網域備註

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

This post was last modified by puritys


回應 (Leave a comment)

YUI3 相關

Javascript 相關

類別 Javascript

Copyright © 2014 PURITYS.COM. All rights reserved.