最近研究了下ajax，貼出來分享下
AJAX (異步 javascript 和 XML) 是個(gè)新產(chǎn)生的術(shù)語，專為描述javascript的兩項(xiàng)強(qiáng)大性能，這兩項(xiàng)強(qiáng)大性能是：
1.無需重新裝載整個(gè)頁面便能向服務(wù)器發(fā)送請求.
2.對XML文檔的解析和處理．
發(fā)送HTTP請求：
首先創(chuàng)造一個(gè)類實(shí)例
try{
request = new XMLHttpRequest();
}catch(trymicrosoft) {
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
request = false ;
}
}
}
得到響應(yīng)后就用這句：
request.onreadystatechange = loginCallBack;
這里指出要用那個(gè)JS函執(zhí)行，這里是loginCallBack函數(shù)，這里的函數(shù)無需括號(hào)也無需參數(shù)。
在定義了如何處理響應(yīng)后,就要發(fā)送請求了。可以調(diào)用HTTP請求類的open()和send()方法，如下所示：
request.open("get",url,true);
request.send(null);
open()的第一個(gè)參數(shù)是HTTP請求方式 - GET，POST，HEAD 或任何服務(wù)器所支持的您想調(diào)用的方式。這個(gè)參數(shù)最好大寫，某些瀏覽器(如Firefox)可能無法處理請求。
第二個(gè)參數(shù)是請求頁面的URL.由于自身安全特性的限制,該頁面不能為第三方域名的頁面.同時(shí)一定要保證在所有的頁面中都使用準(zhǔn)確的域名,否則調(diào)用出錯(cuò)。
第三個(gè)參數(shù)設(shè)置請求是否為異步模式。如果是TRUE, javascript函數(shù)將繼續(xù)執(zhí)行，而不等待服務(wù)器響應(yīng)。
如果第一個(gè)參數(shù)是post，send方法可以傳遞參數(shù)格式跟我們WEB開發(fā)是瀏覽器地址一回事，多個(gè)可以用&連接：？？=？？&？？=？？（用問號(hào)表示下）。
function loginCallBack(){
if(request.readyState == 4 )
if (request.status == 200 ){
var mess = request.responseText;
}
}
這里首先函數(shù)檢查請求的狀態(tài)，如果是4，就意味著一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了，可以處理該響應(yīng)。
readyState的值如下:
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
然后，函數(shù)會(huì)檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值，是200表示狀態(tài)完整。
當(dāng)這兩個(gè)當(dāng)滿足后就可以處理數(shù)據(jù)了，取得數(shù)據(jù)的方式有兩種：
request.responseText
request.responseXML
第一種是以文本字符串的方式返回服務(wù)器的響應(yīng)；
第二種是以XMLDocument對象方式返回響應(yīng)。
下面來看例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function gotoSubmit(){
getRequest();//獲得請求
if(!request){
alert("該瀏覽器不支持XMLHttpRequest!");
return false;
}
request.onreadystatechange = loginCallBack;
var url = "index.jsp";
request.open("post",url,false);
//request.open("get",url,true);
request.send(null);
}
function getRequest(){
try{
request = new XMLHttpRequest();
}catch(trymicrosoft) {
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
request = false ;
}
}
}
}
function loginCallBack(){
if(request.readyState == 4 )
if (request.status == 200 ){
var mess = request.responseText;
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="gotoSubmit()">
gotoSubmit
</span>
</body>
</html>
跑起工程后在這個(gè)頁面上點(diǎn)擊gotoSubmit，會(huì)彈出index.jsp頁面的所有內(nèi)容。
來看看處理xml文件，處理的xml文件如下：
<?xml version="1.0" ?>
<name>
laoding
</name>
上面代碼要改的地方有兩個(gè)，第一把url換成這個(gè)xml文件的路徑，第二個(gè)地方是彈出信息的地方：
var mess=request.responseText;
alert(mess);
把這兩句換成：
var xmldoc = request.responseXML;
var root_node = xmldoc.getElementsByTagName('name').item(0);
alert(root_node.firstChild.data);
再執(zhí)行程序就會(huì)看到效果了，好了，到此結(jié)束了，眼睛痛回去休息。
posted on 2008-12-02 20:20
老丁 閱讀(273)
評(píng)論(0) 編輯 收藏 所屬分類:
ajax