原文: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%,其它瀏覽器不知道用啥調試。
暫時就這些,以后用的時候注意,有空繼續研究。