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

Copyright © 2014 PURITYS.COM. All rights reserved.