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 会阻止跨网域的行为。


回應 (Leave a comment)