Javascritp,prototype,jquery,mootools的AJAX使用

最新推荐文章于 2022-01-14 15:45:11 发布

原创最新推荐文章于 2022-01-14 15:45:11 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #Mootools #Ajax #jQuery #PHP #ViewUI

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文对比了Prototype、jQuery、MooTools等前端框架中AJAX的实现方式，详细介绍了GET和POST请求的不同之处，并讨论了参数编码对请求的影响。

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

Javascript及prototype写法：
<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="普通GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="普通POST" />
<div id="c"></div>
<div id="d"></div>
<input type="button" onclick="prototypeSend();" value="prototype GET" />
<div id="c1"></div>
<div id="d1"></div>
<input type="button" onclick="prototypeSend1();" value="prototype POST" />
<script type="text/javascript">
var xmlHttp;
function createXMLHttp(){
if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject){
try{
  xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e){
  try{
   xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  catch(e) {};
  }
}
}
function startXMLHttp(){
createXMLHttp();
var sendStr = "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt";
sendStr = encodeURI(sendStr);
document.getElementById('a').innerHTML = sendStr;
xmlHttp.onreadystatechange = doSomething;
xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
xmlHttp.send(null);
}
function doSomething(){
if (xmlHttp.readyState == 4){
  if (xmlHttp.status == 200){
  document.getElementById('b').innerHTML = xmlHttp.responseText;
  }
}
}
function startXMLHttp1(){
createXMLHttp();
var sendStr = "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt";
sendStr = encodeURI(sendStr);
document.getElementById('a1').innerHTML = sendStr;
xmlHttp.onreadystatechange = doSomething1;
//xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
//xmlHttp.send(null);
xmlHttp.open('POST','ajaxtest.php',true);
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlHttp.send(sendStr);
}
function doSomething1(){
if (xmlHttp.readyState == 4){
  if (xmlHttp.status == 200){
   document.getElementById('b1').innerHTML = xmlHttp.responseText;
  }
}
}
</script>
<script type="text/javascript">
function prototypeSend(){
var po = new Ajax.Request('ajaxtest.php',{
  method:'GET',
  parameters: "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
  onSuccess: function(transport){
   document.getElementById('c').innerHTML = po.parameters.name+po.parameters.age+po.parameters.en;
   document.getElementById('d').innerHTML = transport.responseText;
  },
  onFailure: function(){ }
});
}
function prototypeSend1(){
var po = new Ajax.Request('ajaxtest.php',{
method:'POST',
parameters: "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
onSuccess: function(transport){
  document.getElementById('c1').innerHTML = po.parameters.name+po.parameters.age+po.parameters.en;
  document.getElementById('d1').innerHTML = transport.responseText;
  },
  onFailure: function(){ }
});
}
</script>

jQuery写法：
<div id="e"></div>
<div id="f"></div>
<input type="button" onclick="jquerySend();" value="jquery GET" />
<div id="e1"></div>
<div id="f1"></div>
<input type="button" onclick="jquerySend1();" value="jquery POST" />
<script type="text/javascript">
function jquerySend(){
var po = $.ajax({
type:'GET',
url:'ajaxtest.php',
data:"name=博科&age=23&en=<>@+/ ://'f#a",
success:function(transport){
  //document.getElementById('e').innerHTML = this.data;
   document.getElementById('f').innerHTML = transport;
  }
})
}
function jquerySend1(){
var po = $.ajax({
type:'POST',
url:'ajaxtest.php',
data:"name=博科&age=23&en=<>@+/ ://'f#a",
success:function(transport){
  //document.getElementById('e1').innerHTML = po.data.name+po.data.age+po.data.en;
  document.getElementById('f1').innerHTML = transport;
  }
})
}
</script>

mootools写法：
<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="mootools GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="mootools POST" />
<script type="text/javascript">
function startXMLHttp(){
new Request({url: 'ajaxtest.php',
method:'get',
data:"name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
onSuccess: function(responseText) {
document.getElementById('b').innerHTML = responseText;
},
onFailure: function() {}
}).send();
}
function startXMLHttp1(){
new Request({url: 'ajaxtest.php',
method:'post',
data:"name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
onSuccess: function(responseText) {
document.getElementById('b1').innerHTML = responseText;
},
onFailure: function() {
}
}).send();
}
</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%，其它浏览器不知道用啥调试。

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