moo.min.js ajax,Mootool-Ajax 写法（包括其他JS库的）

原文：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%，其它浏览器不知道用啥调试。

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