快捷導(dǎo)航

javascript 進(jìn)階篇3 Ajax 、JSON、 Prototype介紹

更新時(shí)間：2012年03月14日 22:19:15 作者：

javascript 進(jìn)階篇3 Ajax 、JSON、 Prototype介紹，學(xué)習(xí)js的朋友可以參考下

Ajax
這個(gè)詞聽(tīng)了不少，但是其實(shí)并沒(méi)有真的接觸過(guò)，于是在這里稍微了解一下。
Ajax技術(shù)的創(chuàng)新之處在于，改善了傳統(tǒng)的“請(qǐng)求-等待-響應(yīng)-刷新-返回?cái)?shù)據(jù)”模式，在信息返回之前，用戶(hù)可以繼續(xù)自己的操作，當(dāng)前頁(yè)面不會(huì)因?yàn)檎?qǐng)求而刷新。這樣大大的提高了交互性。
Ajax其實(shí)并不是一個(gè)技術(shù)，而是由許多技術(shù)組成的。最大的特色之一就是可以異步傳輸，實(shí)現(xiàn)多線程服務(wù)。
Ajax的異步傳輸，依靠的是js中的XMLHttpRequst對(duì)象，于是我們從它入手。
XMLHttpRequest是XMLHttp組建的一個(gè)抽象對(duì)象，用于數(shù)據(jù)交互。在IE中，XMLHttpRequest作為一個(gè)ActiveX控件，在FF Opera中作為一個(gè)js的內(nèi)置對(duì)象。
創(chuàng)建XMLHttpRequest對(duì)象的封裝代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var xmlHttp=false; 
var headType=""; 
function createXmlRequest(){ 
if(window.ActiveObject){ // IE 
try{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){ 
window.alert("create XML Request failed "+e); 
} 
} 
}else if(window.XMLHttpRequest){ // FF 
xmlHttp=new XMLHttpRequest(); 
} 
if(!xmlHttp){ 
window.alert("create XML Request failed"); 
} 
} 
</script> 

ReadyState屬性：
0=未初始化 1=初始化 2=發(fā)送數(shù)據(jù) 3=數(shù)據(jù)傳送中 4=完成
responseText 屬性：
1、2=responseText是個(gè)空字符串 3=正在接收 4=接收完成
responseXML屬性：
執(zhí)行過(guò)send()后，如果返回正確的xml格式數(shù)據(jù)，可以使用XMLHttpRequest接收返回的數(shù)據(jù)。responseXML可以把返回信息格式化為XML Document對(duì)象，類(lèi)型為text/xml 如果不包含則返回null。
status屬性：
屬性send()后，可以屬性status接收讀取事物狀態(tài)，只有ReadyState為3、4時(shí)可以使用這個(gè)屬性，否則讀取status時(shí)將會(huì)發(fā)生錯(cuò)誤。常見(jiàn)的有以下幾個(gè)：
100=客戶(hù)必須繼續(xù)發(fā)出請(qǐng)求 200=交易成功 400=錯(cuò)誤請(qǐng)求 403=請(qǐng)求不允許 404=沒(méi)有發(fā)現(xiàn)文件，查詢(xún)或URL 500=服務(wù)器內(nèi)部錯(cuò)誤 502=服務(wù)器暫不可用 505=服務(wù)器不支持或拒絕請(qǐng)求頭中指定的HTTP版本。
statusText屬性：
send()方法后，通過(guò)statusText讀取事務(wù)狀態(tài)，statusText返回當(dāng)前HTTP請(qǐng)求的狀態(tài)行，只有當(dāng)readyState為3 4時(shí)才可以使用這個(gè)屬性，否則發(fā)生錯(cuò)誤。
onreadystatechange事件：
這個(gè)事件屬性值發(fā)生變化時(shí)所要執(zhí)行的操作。
abort()方法：
停止一個(gè)XMLHttpRequest對(duì)象對(duì)HTTP的請(qǐng)求，把該對(duì)象恢復(fù)到初始狀態(tài)。
open()方法：
創(chuàng)建一個(gè)新的HTTP請(qǐng)求，并指定方法，URL及驗(yàn)證信息等，語(yǔ)法是: xmlHttp.open(method,url,mode,user,psd);
method表示請(qǐng)求方法，有post, get, put等，忽略大小寫(xiě)。url是目的地址，mode是不二類(lèi)型參數(shù)，指定請(qǐng)求是否為異步方式，默認(rèn)為true。
調(diào)用open()方法后，readyState屬性設(shè)置為1.
send()辦法：
xmlHttp.send(content);content是要發(fā)送的內(nèi)容，沒(méi)有可以忽略。
setRequestHeader()方法：
setRequestHeader(header, value)設(shè)定單個(gè)HTTP頭信息，當(dāng)readyState為1時(shí)，可以在open()后調(diào)用此方法，否則將返回一個(gè)異常，如果已存在則原來(lái)的將覆蓋。value用樣是一個(gè)字符串型數(shù)據(jù)，表示頭名稱(chēng)的值。
getResponseHeader()方法：
通過(guò)讀取首部信息，可以讀取到content-type（內(nèi)容類(lèi)型）, content-length（內(nèi)容長(zhǎng)度）, last-modify（最后一次修改）日期等，根據(jù)具體網(wǎng)站不同。
getAllResponseHeaders()方法：
獲得全部的首部信息。
接下來(lái)舉個(gè)例子，就是獲取頭信息的：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Ajax test</title> 
<script type="text/javascript"> 
var xmlHttp=false; 
var headType=""; 
function createXmlRequest(){ 
if(window.ActiveObject){ // IE 
try{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){ 
window.alert("create XML Request failed "+e); 
} 
} 
}else if(window.XMLHttpRequest){ // FF 
xmlHttp=new XMLHttpRequest(); 
} 
if(!xmlHttp){ 
window.alert("create XML Request failed"); 
} 
} 
function HeadRequst(request){ 
createXmlRequest(); 
headType=request; 
xmlHttp.onreadystatechange=getHeadInfo; //注冊(cè)回調(diào)函數(shù)不用括號(hào)。 
xmlHttp.open("HEAD","http://www.baidu.com/",false); 
xmlHttp.send(null); 
} 
function getHeadInfo(){ 
var span=document.getElementById("state"); 
if(xmlHttp.readyState==4){ 
if(headType=="All") 
span.innerHTML=xmlHttp.getAllResponseHeaders(); 
else{ 
span.innerHTML=headType+": "+xmlHttp.getResponseHeader(headType); 
} 
} 
} 
</script> 
</head> 
<body> 
<center> 
<input type="button" onclick="HeadRequst('Content-Type')" value="Content-type"><br><br> 
<input type="button" onclick="HeadRequst('Date')" value="Date"><br><br> 
<input type="button" onclick="HeadRequst('Connection')" value="Connection"><br><br> 
<input type="button" onclick="HeadRequst('All')" value="All headers"><br> 
<br><br><br> 
<span id="state"></span><br> 
</center> 
<body> 
</html> 

這個(gè)例子在IE下工作很順利，在FF下死活出不來(lái)，MS原因是FF不支持ActiveX。。。求高手解決下。。。囧rz
JSON
JSON的全稱(chēng)是：javascript object notation 對(duì)象標(biāo)志。它是一種輕量級(jí)的基于文本并且和語(yǔ)言無(wú)關(guān)的數(shù)據(jù)交換格式。和XML類(lèi)似，是一種文本組織格式，具體是這樣的，比如我們有一組數(shù)據(jù)，用xml的話：
<user>
<name>Dumpling</name> <gender>Famle</gender><age>22<age>
<user>
那么如果用JSON的格式，就是：
"user":[{"name":"Dumpling", "gender":"Famle", "age":22}]
優(yōu)點(diǎn)就是它可以簡(jiǎn)化獲取的數(shù)據(jù)的解析和存儲(chǔ)等工作。
如果上面的例子再寫(xiě)復(fù)雜一點(diǎn)，就可以看到JSON的具體格式了，我們?cè)贘S中聲明的時(shí)候，就可以這么寫(xiě)：

復(fù)制代碼代碼如下:

 
var users={ 
"users":[ 
{"name":"Dumpling", "gender":"Famle", "age":22}, 
{"name":"Sanday", "gender":"Famle", "age":20}, 
{"name":"Shine", "gender":"Famle", "age":18} 
]}; 

使用JSON封裝數(shù)據(jù)，用到的是JSON.stringify(obj)的方法。obj自己封裝一個(gè)類(lèi)就可以。
不需要我們自己來(lái)寫(xiě)字符串，只要給值，然后用函數(shù)封裝就可以了。來(lái)個(gè)簡(jiǎn)單的例子：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>testing</title> 
<script language="javascript"> 
function user(name,age,gender){ 
this.userName=name; 
this.userAge=age; 
this.userGender=gender; 
} 
function submidForm(){ 
var subForm=document.jsonForm; 
var userTable=document.getElementById("users"); 
var newRow=userTable.insertRow(-1);// insert one row at the end of table 
newRow.insertCell(0).innerHTML=subForm.name.value; 
newRow.insertCell(1).innerHTML=subForm.gender.value; 
newRow.insertCell(2).innerHTML=subForm.age.value; 
var newuser=new user(subForm.name.value,subForm.age.value,subForm.gender.value); 
var jsonStr=JSON.stringify(newuser); 
alert(jsonStr); 
subForm.name.value=""; 
subForm.age.value=""; 
} 
</script> 
</head> 
<body> 
<center> 
<form method="POST" action="#" name=jsonForm> 
<table border="1" id="newuser"> 
<tr> 
<td>Name: </td><td><input type="text" name="name"></td> 
<td>Gender: </td> 
<td><select name="gender"> 
<option value="Famle">Famle</option> 
<option value="Male">Male</option> 
</select> 
</td> 
<td>Age: </td><td><input type="text" name="age"></td> 
</tr> 
<tr> 
<td colspan="6" align="center"> 
<input type="button" id="submit" value="Submit" onclick="submidForm()"></input></td> 
</tr> 
</table> 
</form> 
<table id="users" border="1" width="450"> 
<tr><td>Name</td><td>Gender</td><td>Age</td> 
</table> 
</center> 
</body> 
</html> 

害怕太長(zhǎng)我就遮起來(lái)了，反正結(jié)果是這樣子滴:

當(dāng)然，如果要一次封裝很多，比如提交了5 6個(gè)用戶(hù)然后一次封裝成JSON格式，可以把這幾個(gè)放到一個(gè)Arry里，然后把a(bǔ)rry作為stringify的參數(shù)就可以，自己試一下吧~我就不上代碼了~

在JS中對(duì)JSON解析和賦值

這一塊就算是json的中心了，對(duì)他的解析其實(shí)很簡(jiǎn)單的，比如還是之前的例子，

復(fù)制代碼代碼如下:

 
var usersJson={ 
"users":[ 
{"name":"Dumpling", "gender":"Famle", "age":22}, 
{"name":"Sanday", "gender":"Famle", "age":20}, 
{"name":"Shine", "gender":"Famle", "age":18} 
], 
"objects":[ 
{"name":"food","price":55} 
] 
}; 

那么我要得到sanday這個(gè)值，就可以這么寫(xiě)：var username=uersJson.users[1].name; 會(huì)了這一個(gè)，別的也沒(méi)問(wèn)題了吧~
如果要修改數(shù)據(jù)，那么就是直接賦值，比如我要修改那個(gè)食物的價(jià)格 userJson.objects[0].price=43;
至于判斷輸入是否合法之類(lèi)的，我就懶得寫(xiě)了，費(fèi)時(shí)間。
JSON就到這里，接下來(lái)最后一部分了。
Prototype框架
先上一下prototype的網(wǎng)站：http://www.prototypejs.org/
它其實(shí)就是對(duì)JS做了大量的拓展，大體由通用方法與模板兩部分構(gòu)成的。通用方法比如說(shuō)$() $$() $A()等，模板則是對(duì)JS內(nèi)部類(lèi)進(jìn)行拓展，并提供對(duì)Ajax的各種應(yīng)用的支持模板。具體大家可以上給出的網(wǎng)站看看。舉倆例子，再多請(qǐng)到API頁(yè)面查看：http://api.prototypejs.org/ (是啊我很懶的╮(╯▽╰)╭)
$()方法：獲取元素對(duì)象，類(lèi)似于getElementById方法，并且可以接受多個(gè)參數(shù)，返回一個(gè)數(shù)組。
$$()方法：獲取指定元素?cái)?shù)組，類(lèi)似與getElementByTagName()方法，根據(jù)標(biāo)簽名獲取對(duì)象。
Ajax對(duì)象：剛才我們也說(shuō)過(guò)了，因?yàn)闉g覽器不同，我們需要寫(xiě)大量的判斷代碼，于是prototype就給我們代勞了，Ajax.Request對(duì)象封裝了創(chuàng)建XMLHttpRequest對(duì)象的代碼，以及各種處理服務(wù)器返回信息的常用方法，所以還是很好用的。想要深入學(xué)習(xí)的話，請(qǐng)繼續(xù)參考上面的API鏈接 (= =!)
form對(duì)象：因?yàn)檎娴暮艹Ｓ?，于是form也是prototype重點(diǎn)關(guān)注的對(duì)象，這部分很重要，于是可以參考API的相關(guān)部分。。。。。。

您可能感興趣的文章: