jasmine214--love

只有当你的内心总是充满快乐、美好的愿望和宁静时，你才能拥有强壮的体魄和明朗、快乐或者宁静的面容。
posts - 731, comments - 60, trackbacks - 0, articles - 0

Mootool-Ajax 写法（包括其他JS库的）

Posted on 2010-07-20 11:47 幻海蓝梦 阅读(755) 评论(0)  编辑  收藏 所属分类: JS 、Ajax

原文：http://www.masterboke.com/2009/01/12/javascritpprototypejquerymootools%E7%9A%84ajax%E4%BD%BF%E7%94%A8/

老是记不住各个框架的AJAX写法，今天总结了一下，发现了一些小不同。

Javascript及prototype写法：

view source
print ?
001. < div id = "a" ></ div >
002. < div id = 'b' ></ div >
003. < input type = "button" onclick = "startXMLHttp();" value = "普通GET" />
004. < div id = "a1" ></ div >
005. < div id = 'b1' ></ div >
006. < input type = "button" onclick = "startXMLHttp1();" value = "普通POST" />
007. < div id = "c" ></ div >
008. < div id = "d" ></ div >
009. < input type = "button" onclick = "prototypeSend();" value = "prototype GET" />
010. < div id = "c1" ></ div >
011. < div id = "d1" ></ div >
012. < input type = "button" onclick = "prototypeSend1();" value = "prototype POST" />
013.    
014. < script type = "text/javascript" >
015.    var xmlHttp;
016.    function createXMLHttp()
017.    {
018.      if (window.XMLHttpRequest)
019.      {
020.        xmlHttp = new XMLHttpRequest();
021.      }
022.      else if (window.ActiveXObject)
023.      {
024.        try
025.        {
026.          xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
027.        }
028.        catch(e)
029.        {
030.          try
031.          {
032.            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
033.          }
034.          catch(e) {};
035.        }
036.      }
037.    }
038.    
039.    function startXMLHttp()
040.    {
041.      createXMLHttp();
042.      var sendStr = "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt";
043.      sendStr = encodeURI(sendStr);
044.      document.getElementById('a').innerHTML = sendStr;
045.      xmlHttp.onreadystatechange = doSomething;
046.      xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
047.      xmlHttp.send(null);
048.    }
049.    
050.    function doSomething()
051.    {
052.    
053.      if (xmlHttp.readyState == 4)
054.      {
055.        if (xmlHttp.status == 200)
056.        {
057.          document.getElementById('b').innerHTML = xmlHttp.responseText;
058.        }
059.      }
060.    }
061.    
062.    function startXMLHttp1()
063.    {
064.      createXMLHttp();
065.      var sendStr = "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt";
066.      sendStr = encodeURI(sendStr);
067.      document.getElementById('a1').innerHTML = sendStr;
068.      xmlHttp.onreadystatechange = doSomething1;
069.      //xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
070.      //xmlHttp.send(null);
071.      xmlHttp.open('POST','ajaxtest.php',true);
072.      xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
073.      xmlHttp.send(sendStr);
074.    }
075.    
076.    function doSomething1()
077.    {
078.    
079.      if (xmlHttp.readyState == 4)
080.      {
081.        if (xmlHttp.status == 200)
082.        {
083.          document.getElementById('b1').innerHTML = xmlHttp.responseText;
084.        }
085.      }
086.    }
087. </ script >
088.    
089. < script type = "text/javascript" >
090. function prototypeSend()
091. {
092.    var po = new Ajax.Request('ajaxtest.php',
093.    {
094.      method:'GET',
095.      parameters: "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
096.      onSuccess: function(transport){
097.        document.getElementById('c').innerHTML = po.parameters.name+po.parameters.age+po.parameters.en;
098.        document.getElementById('d').innerHTML = transport.responseText;
099.      },
100.      onFailure: function(){ }
101.    });
102. }
103. function prototypeSend1()
104. {
105.    var po = new Ajax.Request('ajaxtest.php',
106.    {
107.      method:'POST',
108.      parameters: "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
109.      onSuccess: function(transport){
110.        document.getElementById('c1').innerHTML = po.parameters.name+po.parameters.age+po.parameters.en;
111.        document.getElementById('d1').innerHTML = transport.responseText;
112.      },
113.      onFailure: function(){ }
114.    });
115. }
116. </ script >

jQuery写法：

view source
print ?
01. < div id = "e" ></ div >
02. < div id = "f" ></ div >
03. < input type = "button" onclick = "jquerySend();" value = "jquery GET" />
04. < div id = "e1" ></ div >
05. < div id = "f1" ></ div >
06. < input type = "button" onclick = "jquerySend1();" value = "jquery POST" />
07. < script type = "text/javascript" >
08.    function jquerySend()
09.    {
10.      var po = $.ajax({
11.        type:'GET',
12.        url:'ajaxtest.php',
13.        data:"name=博科&age=23&en=<>@+/ ://'f#a",
14.        success:function(transport){
15.        //document.getElementById('e').innerHTML = this.data;
16.        document.getElementById('f').innerHTML = transport;
17.        }
18.      })
19.    }
20.    
21.    function jquerySend1()
22.    {
23.      var po = $.ajax({
24.        type:'POST',
25.        url:'ajaxtest.php',
26.        data:"name=博科&age=23&en=<>@+/ ://'f#a",
27.        success:function(transport){
28.        //document.getElementById('e1').innerHTML = po.data.name+po.data.age+po.data.en;
29.        document.getElementById('f1').innerHTML = transport;
30.        }
31.      })
32.    }
33. </ script >

mootools写法：

view source
print ?
01. < div id = "a" ></ div >
02. < div id = 'b' ></ div >
03. < input type = "button" onclick = "startXMLHttp();" value = "mootools GET" />
04. < div id = "a1" ></ div >
05. < div id = 'b1' ></ div >
06. < input type = "button" onclick = "startXMLHttp1();" value = "mootools POST" />
07. < script type = "text/javascript" >
08. function startXMLHttp()
09. {
10.      new Request({url: 'ajaxtest.php',
11.          method:'get',
12.          data:"name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
13.          onSuccess: function(responseText) {
14.              document.getElementById('b').innerHTML = responseText;
15.          },
16.          onFailure: function() {
17.    
18.          }
19.      }).send();
20. }
21.    
22. function startXMLHttp1()
23. {
24.      new Request({url: 'ajaxtest.php',
25.          method:'post',
26.          data:"name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
27.          onSuccess: function(responseText) {
28.              document.getElementById('b1').innerHTML = responseText;
29.          },
30.          onFailure: function() {
31.    
32.          }
33.      }).send();
34. }
35.    
36. </ script >

以上Prototype 1.6.0.2,jQuery 1.2.6,mootools 1.2.1。
prototype自动对“+”进行了编码，所以后台用php的urldecode时能够把“+”正确解析,但是其它几种方法没有，urldecode时把“+”解析成了空格。

使用GET提交时，如果不对变量进行encodeURIComponent，此时若某个变量里带有“#”，那从这个变量的“#”字符往后的参数就不能被正确传递，但是POST可以。不过prototype的POST和GET是一样的，“#”之后的字符都不能被正确传递，而且如果使用了encodeURIComponent，prototype会报错。看了一下prototype代码对“#”进行了特殊处理。本想调试一下试试，可是我的firefox(firefox内存占用一直在涨没有尽头，唉)立马把握的老机（hp ze2202）卡死，cpu 100%，其它浏览器不知道用啥调试。

暂时就这些，以后用的时候注意，有空继续研究。


只有注册用户登录后才能发表评论。
网站导航: