AJAX中_AJAX教程

推薦：adapter和facade模式在Ajax中的應(yīng)用
　　一、起因 　　在看《Ajax in action》的時候，看到它在介紹Adapter和Facade兩種模式。由于目前Web開發(fā)的特色，特別是客戶端Js腳本的開發(fā)，需要面對很多的變化和跨平臺的挑戰(zhàn)，所以，如

　　在面向?qū)ο蟮乃枷胫�，最核心的概念之一就是類。一個類表示了具有相似性質(zhì)的一類事物的抽象，通過實(shí)例化一個類，可以獲得屬于該類的一個實(shí)例，即對象。

　　在javascript中定義一個類的方法如下：

function class1(){
　//類成員的定義及構(gòu)造函數(shù)
}
　　這里class1既是一個函數(shù)也是一個類。可以將它理解為類的構(gòu)造函數(shù)，負(fù)責(zé)初始化工作。

　　使用new操作符獲得一個類的實(shí)例

　　在前面介紹基本對象時，已經(jīng)用過new操作符，例如：

new Date();
　　表示創(chuàng)建一個日期對象，而Date就是表示日期的類，只是這個類是由javascript內(nèi)部提供的，而不是由用戶定義的。

　　new操作符不僅對內(nèi)部類有效，對用戶定義的類也同樣有效，對于上節(jié)定義的class1，也可以用new來獲取一個實(shí)例：

function class1(){
　//類成員的定義及構(gòu)造函數(shù)
}
var obj1=new class1();
　　拋開類的概念，從代碼的形式上來看，class1就是一個函數(shù)，那么是不是所有的函數(shù)都可以用new來操作呢？是的，在javascript中，函數(shù)和類就是一個概念，當(dāng)對一個函數(shù)進(jìn)行new操作時，就會返回一個對象。如果這個函數(shù)中沒有初始化類成員，那就會返回一個空的對象。例如：

//定義一個hello函數(shù)
function hello(){
　alert("hello");
}
//通過new一個函數(shù)獲得一個對象
var obj=new hello();
alert(typeof(obj));

　　從運(yùn)行結(jié)果看，執(zhí)行了hello函數(shù)，同時obj也獲得了一個對象的引用。當(dāng)new一個函數(shù)時，這個函數(shù)就是所代表類的構(gòu)造函數(shù)，其中的代碼被看作為了初始化一個對象。用于表示類的函數(shù)也稱為構(gòu)造器。

　　使用方括號（[ ]）引用對象的屬性和方法

　　在javascript中，每個對象可以看作是多個屬性（方法）的集合，引用一個屬性（方法）很簡單，如：

　　對象名.屬性（方法）名

　　還可以用方括號的形式來引用：

　　對象名["屬性（方法）名"]

　　注意，這里的方法名和屬性名是一個字符串，不是原先點(diǎn)（? ）號后面的標(biāo)識符，例如：

var arr=new Array();
//為數(shù)組添加一個元素
arr["push"]("abc");
//獲得數(shù)組的長度
var len=arr["length"];
//輸出數(shù)組的長度
alert(len);

圖1
　　圖1顯示了執(zhí)行的結(jié)果。

　　由此可見，上面的代碼等價于：

var arr=new Array();
//為數(shù)組添加一個元素
arr.push("abc");
//獲得數(shù)組的長度
var len=arr.length;
//輸出數(shù)組的長度
alert(len);
　　這種引用屬性（方法）的方式和數(shù)組類似，體現(xiàn)了javascript對象就是一組屬性（方法）的集合這個性質(zhì)。

　　這種用法適合不確定具體要引用哪個屬性（方法）的情況，例如：一個對象用于表示用戶資料，用一個字符串表示要使用的那個屬性，就可以用這種方式來引用：

＜script language="javascript" type="text/javascript"＞
＜!--
//定義了一個User類，包括兩個成員age和sex，并指定了初始值。
function User(){
　this.age=21;
　this.sex="male";
}
//創(chuàng)建user對象
var user=new User();
//根據(jù)下拉列表框顯示用戶的信息
function show(slt){
　if(slt.selectedIndex!=0){
　　alert(user[slt.value]);
　}
}
//--＞
＜/script＞
＜!--下拉列表框用于選擇用戶信息--＞
＜select onchange="show(this)"＞
�。紀(jì)ption＞請選擇需要查看的信息：＜/option＞
　＜o(jì)ption value="age"＞年齡＜/option＞
�。紀(jì)ption value="sex"＞性別＜/option＞
＜/select＞
　　在這段代碼中，使用一個下拉列表框讓用戶選擇查看哪個信息，每個選項(xiàng)的value就表示用戶對象的屬性名稱。這時如果不采用方括號的形式，可使用如下代碼來實(shí)現(xiàn)：

function show(slt){
　if(slt.selectedIndex!=0){
　　if(slt.value=="age")alert(user.age);
　　if(slt.value=="sex")alert(user.sex);
　}
}
　　而使用方括號語法，則只需寫為：

alert(user[slt.value]);
　　方括號語法像一種參數(shù)語法，可用一個變量來表示引用對象的哪個屬性。如果不采用這種方法，又不想用條件判斷，可以使用eval函數(shù)：

alert(eval("user." slt.value));
　　這里利用eval函數(shù)的性質(zhì)，執(zhí)行了一段動態(tài)生成的代碼，并返回了結(jié)果。

　　實(shí)際上，在前面講述document的集合對象時，就有類似方括號的用法，比如引用頁面中一個名為“theForm”的表單對象，以前的用法是：

document.forms["theForm"];
　　也可以改寫為：

document.forms.theForm;
　　forms對象是一個內(nèi)部對象，和自定義對象不同的是，它還可以用索引來引用其中的一個屬性。

　　動態(tài)添加、修改、刪除對象的屬性和方法

　　前面介紹了如何引用一個對象的屬性和方法，現(xiàn)在介紹如何為一個對象添加、修改或者刪除屬性和方法。

　　其他語言中，對象一旦生成，就不可更改，要為一個對象添加、修改成員必須要在對應(yīng)的類中修改，并重新實(shí)例化，程序也必須重新編譯。javascript提供了靈活的機(jī)制來修改對象的行為，可以動態(tài)添加、修改、刪除屬性和方法。例如：先用類Object來創(chuàng)建一個空對象user：

var user=new Object();
　　1．添加屬性

　　這時user對象沒有任何屬性和方法，可以為它動態(tài)的添加屬性，例如：

user.name="jack";
user.age=21;
user.sex="male";
　　通過上述語句，user對象具有了三個屬性：name、age和sex。下面輸出這三個語句：

alert(user.name);
alert(user.age);
alert(user.sex);
　　由代碼運(yùn)行效果可知，三個屬性已經(jīng)完全屬于user對象了。

　　2．添加方法

　　添加方法的過程和添加屬性類似：

user.alert=function(){
　alert("my name is:" this.name);
}
　　這就為user對象添加了一個方法“alert”，通過執(zhí)行它，彈出一個對話框顯示自己的名字：

user.alert();

圖2
　　圖2顯示了執(zhí)行的結(jié)果。

　　3．修改屬性和方法

　　修改一個屬性和方法的過程就是用新的屬性替換舊的屬性，例如：

user.name="tom";
user.alert=function(){
　alert("hello," this.name);
}
　　這樣就修改了user對象name屬性的值和alert方法，它從顯示“my name is”對話框變?yōu)榱孙@示“hello”對話框。

　　4．刪除屬性和方法

　　刪除一個屬性和方法的過程也很簡單，就是將其置為undefined：

user.name=undefined;
user.alert=undefined;
　　這樣就刪除了name屬性和alert方法。

　　在添加、修改或者刪除屬性時，和引用屬性相同，也可以采用方括號（[]）語法：

user["name"]="tom";
　　使用這種方式還有一個特點(diǎn)，可以使用非標(biāo)識符字符串作為屬性名稱，例如標(biāo)識符中不允許以數(shù)字開頭或者出現(xiàn)空格，但在方括號（[]）語法中卻可以使用：

user["my name"]="tom";
　　需要注意，在使用這種非標(biāo)識符作為名稱的屬性時，仍然要用方括號語法來引用：

alert(user["my name"]);
　　而不能寫為：

alert(user.my name);
　　事實(shí)上，javascript中的每個對象都是動態(tài)可變的，這給編程帶來了靈活性，也和其他語言產(chǎn)生了區(qū)別。

　　使用大括號（{ }）語法創(chuàng)建無類型對象

　　傳統(tǒng)的面向?qū)ο笳Z言中，每個對象都會對應(yīng)到一個類。上一節(jié)講this指針時提到，javascript中的對象其實(shí)就是屬性（方法）的一個集合，并沒有嚴(yán)格意義上類的概念。所以它提供了一種簡單的方式來創(chuàng)建對象，即大括號（{}）語法：

{
　property1:statement,
　property2:statement2,
　…,
　propertyN:statmentN
}
　　通過大括號括住多個屬性或方法及其定義（這些屬性或方法用逗號隔開），來實(shí)現(xiàn)對象的定義，這段代碼就直接定義個了具有n個屬性或方法的對象，其中屬性名和其定義之間用冒號（:）隔開。例如：

＜script language="javascript" type="text/javascript"＞
＜!--
var obj={}; //定義了一個空對象
var user={
　name:"jack", //定義了name屬性，初始化為jack
　favoriteColor:["red","green","black","white"],//定義了顏色喜好數(shù)組
　hello:function(){ //定義了方法hello
　　alert("hello," this.name);
　},
　sex:"male" //定義了性別屬性sex，初始化為male
}

//調(diào)用user對象的方法hello
user.hello();
//--＞
＜/script＞
　　第一行定義了一個無類型對象obj，它等價于：

var obj=new Object();
　　接著定義了一個對象user及其屬性和方法。注意，除了最后一個屬性（方法）定義，其他的必須以逗號（,）結(jié)尾。其實(shí)，使用動態(tài)增減屬性的方法也可以定義一個完全相同的user對象，讀者可使用前面介紹的方法實(shí)現(xiàn)。

　　使用這種方式來定義對象，還可以使用字符串作為屬性（方法）名，例如：

var obj={"001":"abc"}
　　這就給對象obj定義了一個屬性“001”，這并不是一個有效的標(biāo)識符，所以要引用這個屬性必須使用方括號語法：

obj["001"];
　　由此可見，無類型對象提供了一種創(chuàng)建對象的簡便方式，它以緊湊和清晰的語法將一個對象體現(xiàn)為一個完整的實(shí)體。而且也有利于減少代碼的體積，這對javascript代碼來說尤其重要，減少體積意味著提高了訪問速度。

　　prototype原型對象

　　prototype對象是實(shí)現(xiàn)面向?qū)ο蟮囊粋�重要機(jī)制。每個函數(shù)（function）其實(shí)也是一個對象，它們對應(yīng)的類是“Function”，但它們身份特殊，每個函數(shù)對象都具有一個子對象prototype。即prototype表示了該函數(shù)的原型，而函數(shù)也是類，prototype就是表示了一個類的成員的集合。當(dāng)通過new來獲取一個類的對象時，prototype對象的成員都會成為實(shí)例化對象的成員。

　　既然prototype是一個對象，可以使用前面兩節(jié)介紹的方法對其進(jìn)行動態(tài)的修改，這里先給出一個簡單的例子：

//定義了一個空類
function class1(){
　//empty
}
//對類的prototype對象進(jìn)行修改，增加方法method
class1.prototype.method=function(){
　alert("it's a test method");
}
//創(chuàng)建類class1的實(shí)例
var obj1=new class1();
//調(diào)用obj1的方法method
obj1.method();

圖3顯示了執(zhí)行的結(jié)果。

分享：AJAX編程實(shí)踐之與服務(wù)器通信
　　首先看下看下相對簡單些的--向服務(wù)器發(fā)送一個包含有名/值對的簡單查詢串，在這種情況下XHP即可以用GET也可以用POST。 GETfunction doRequestUsingGET() {　createXMLHttpRequest();　v