jasmine214--love

          只有當你的內心總是充滿快樂、美好的愿望和寧靜時,你才能擁有強壯的體魄和明朗、快樂或者寧靜的面容。
          posts - 731, comments - 60, trackbacks - 0, articles - 0

          Mootool-Ajax 寫法(包括其他JS庫的)

          Posted on 2010-07-20 11:47 幻海藍夢 閱讀(767) 評論(0)  編輯  收藏 所屬分類: JSAjax

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

          老是記不住各個框架的AJAX寫法,今天總結了一下,發現了一些小不同。

          Javascript及prototype寫法:

          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寫法:

          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寫法:

          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%,其它瀏覽器不知道用啥調試。

          暫時就這些,以后用的時候注意,有空繼續研究。

          主站蜘蛛池模板: 隆昌县| 磐石市| 焦作市| 佳木斯市| 道孚县| 盘锦市| 家居| 郸城县| 金昌市| 祥云县| 革吉县| 东乌| 万载县| 开封市| 邵阳市| 新密市| 乌拉特后旗| 广水市| 呼玛县| 体育| 黄冈市| 门源| 宣汉县| 灌云县| 阆中市| 将乐县| 吉木乃县| 开阳县| 运城市| 渝北区| 台州市| 屯昌县| 岐山县| 阳泉市| 长垣县| 上林县| 若尔盖县| 疏附县| 黄龙县| 沈阳市| 化隆|