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