原文: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%,其它浏览器不知道用啥调试。
暂时就这些,以后用的时候注意,有空继续研究。