這二天用prototype.js中的ajax.request做了些東西,閑時(shí)看了下源碼,體會(huì)如下：
在用AJAX部分前，有如下一些函數(shù)得了解一下：
Class變量
var
?Class?
=
?
{
??create:?
function
()?
{
????
return
?
function
()?
{
??????
this
.initialize.apply(
this
,?arguments);
????}
??}
}
initialize相當(dāng)于構(gòu)造器，和java的構(gòu)造器一樣，可以自定義為帶參數(shù)性質(zhì)的。prototype中很多對(duì)象都是用它來(lái)創(chuàng)建的，ajax也不例外。
Try.these() 方法
var
?Try?
=
?
{
??these:?
function
()?
{
????
var
?returnValue;
????
for
?(
var
?i?
=
?
0
;?i?
<
?arguments.length;?i
++
)?
{
??????
var
?lambda?
=
?arguments[i];
??????
try
?
{
????????returnValue?
=
?lambda();
????????
break
;
??????}
?
catch
?(e)?
{}
????}
????
return
?returnValue;
??}
}
它使得實(shí)現(xiàn)當(dāng)你想調(diào)用不同的方法直到其中的一個(gè)成功正常的這種需求變得非常容易， 他把一系列的方法作為參數(shù)并且按順序的一個(gè)一個(gè)的執(zhí)行這些方法直到其中的一個(gè)成功執(zhí)行，返回成功執(zhí)行的那個(gè)方法的返回值。
ajax就是通過(guò)它得到一個(gè)可以跨borswer的xmlhttp的：
var
?Ajax?
=
?
{
??getTransport:?
function
()?
{
????
return
?Try.these(
??????
function
()?
{
return
?
new
?ActiveXObject('Msxml2.XMLHTTP')}
,
??????
function
()?
{
return
?
new
?ActiveXObject('Microsoft.XMLHTTP')}
,
??????
function
()?
{
return
?
new
?XMLHttpRequest()}
????)?
||
?
false
;
??}
??activeRequestCount:?
0
}
Object.extend方法：
Object.extend?
=
?
function
(destination,?source)?
{
??
for
?(property?
in
?source)?
{
????destination[property]?
=
?source[property];
??}
??
return
?destination;
}
顧名思義，可正擴(kuò)展了一個(gè)對(duì)象屬性列表。這樣說(shuō)可能不太明白，結(jié)合Ajax再下就清楚了，如下，
Ajax.Base.prototype?
=
?
{
??setOptions:?
function
(options)?
{
????
this
.options?
=
?
{
??????method:???????'post',
??????asynchronous:?
true
,
??????parameters:???''
????}
????Object.extend(
this
.options,?options?
||
?
{}
);
??}
,
???
}
可以看到在prototype中用ajax的時(shí)候，它的options默認(rèn)有三個(gè)，默認(rèn)值如上所示。這里可以通過(guò)以下方式來(lái)改變其默值（Ajax.Request的用法，呆會(huì)兒再看）：
var
?pars?
=
?'method
=
update
&
mbid
=
917
';
var
?my?
=
?
new
?Ajax.Request(
?uri,?
?
{
??method:?'post',
??parameters:?pars,
??asynchronous:?
false
,
?}
);
}
這時(shí)有個(gè)問(wèn)題可能不太好處理，假如想增加其它參數(shù)，怎么知道我所增加的參數(shù)是否符合prototype呢？確實(shí)！比如我想通過(guò)send方法傳一段數(shù)據(jù)到后臺(tái)，該用什么參數(shù)呢？在prototype中有如下代碼：
var
?body?
=
?
this
.options.postBody?
?
?
this
.options.postBody?:?parameters;
this
.transport.send(
this
.options.method?
==
?'post'?
?
?body?:?
null
);
可以看到應(yīng)該是postBody，對(duì)于prototype中的參數(shù)以及其所代表的意義我想還是得通過(guò)源文件一個(gè)個(gè)的找。作者并沒有初始一個(gè)集合(廢話，不然也不要Object.extend方法了)。我覺得這個(gè)地方有待改進(jìn)... ...
在send時(shí)方法一定要用post才能生效，這個(gè)時(shí)候parameters就會(huì)失效了，源碼如下：
if
?(
this
.options.method?
==
?'get'?
&&
?parameters.length?
>
?
0
)
????????
this
.url?
+=
?(
this
.url.match(
/
\
?/
)?
?
?'
&
'?:?'
?
')?
+
?parameters;
所以假如后臺(tái)一定要一個(gè)parameter的話，比如若用到Struts的LookupDispatchAction就很可能要一個(gè)method參數(shù)。這時(shí)應(yīng)該直接放到uri中去，最后要注意的一點(diǎn)就是用post的時(shí)候，一定要將響應(yīng)頭設(shè)置成Content-type==application/x-www-form-urlencoded. 好在prototype已經(jīng)考慮到了這點(diǎn)：
this
.setRequestHeaders();
//
其具體代碼可以看源文件
var
?body?
=
?
this
.options.postBody?
?
?
this
.options.postBody?:?parameters;
this
.transport.send(
this
.options.method?
==
?'post'?
?
?body?:?
null
);
在這兒我說(shuō)一下我在使用ajax過(guò)程中遇到亂碼的解決方法：
從C到S頭端時(shí)，在S端接到的是亂碼解決分析過(guò)程。首先要明白AJAX內(nèi)部是以u(píng)tf-8來(lái)編碼傳輸數(shù)據(jù)的。我們?cè)陧?yè)面所看到的數(shù)據(jù)都是按照我們自己預(yù)定的字符集解碼所得到的。OK，現(xiàn)在假設(shè)我們?cè)赟端收到了來(lái)自C端的DATA為亂碼，在C端(不管你的WEB頁(yè)面是用什么編碼方式)AJAX在其傳輸中把所傳輸?shù)臄?shù)據(jù)解碼成UTF-8格式，到了S端后，我可能對(duì)所有請(qǐng)求方式都過(guò)濾編碼，比如有如下設(shè)置：
<
filter
>
??
<
filter-name
>
encodingFilter
</
filter-name
>
??
<
filter-class
>
???com.CharacterEncodingFilter
??
</
filter-class
>
??
<
init-param
>
???
<
param-name
>
encoding
</
param-name
>
???
<
param-value
>
GBK
</
param-value
>
??
</
init-param
>
??
?
</
filter
>
所以我們?cè)赟端看到的是將以UTF-8編碼過(guò)的數(shù)據(jù)再以GBK解碼后所得到的數(shù)據(jù)，這樣亂碼就出來(lái)了。所以解決也很簡(jiǎn)單，交其重新以自己的方式編碼就OK了
new String(str.getBytes("gbk"),"utf-8");
同樣的道理，假如在C端碰到的是亂碼，那么在S端返回?cái)?shù)據(jù)前將數(shù)據(jù)以UTF-8的格式傳輸
src.getBytes("UTF-8")
ajax.request中對(duì)事件的響應(yīng)：
首先我們得在請(qǐng)求初始化中加入響應(yīng)狀態(tài)與自定義函數(shù)：
var
?my?
=
?
new
?Ajax.Request(
???url,?
???
{
????method:?'get',
????parameters:?pars,
????asynchronous:?
true
,
????onComplete:?showResponse
???}
);
它初始化了一個(gè)ajax事件的集合
Ajax.Request.Events?
=
??['Uninitialized',?'Loading',?'Loaded',?'Interactive',?'Complete'];
這五個(gè)狀態(tài)正好對(duì)應(yīng)五個(gè)readystate，ajax的五個(gè)readystate分別如下：
0 (未初始化) 對(duì)象已建立，但是尚未初始化（尚未調(diào)用open方法）
1 (初始化) 對(duì)象已建立，尚未調(diào)用send方法
2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知
3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過(guò)responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤，
4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過(guò)通過(guò)responseBody和responseText獲取完整的回應(yīng)數(shù)據(jù)
然后根據(jù)status(點(diǎn)這兒可以下載查看ajax參考資料，查看其所有屬性)來(lái)觸發(fā)指定事件，觸發(fā)代碼：
onStateChange:?
function
()?
{
????
var
?readyState?
=
?
this
.transport.readyState;
????
if
?(readyState?
!=
?
1
)
??????
this
.respondToReadyState(
this
.transport.readyState);
??}
?respondToReadyState:?
function
(readyState)?
{
????
var
?event?
=
?Ajax.Request.Events[readyState];
再次可以看到正好事件集合與readyState正好對(duì)應(yīng)來(lái)調(diào)用,而通過(guò)以下來(lái)調(diào)用WEB自定義函數(shù)showResponse()
try
?
{
?????
??????(
this
.options['on'?
+
?event]?
||
?Prototype.emptyFunction)(transport,?json);
??????Ajax.Responders.dispatch('on'?
+
?event,?
this
,?transport,?json);
????}
?
catch
?(e)?
{
??????
this
.dispatchException(e);
????}
?未完，待續(xù)...