1.Ajax主要用於概括異步加載頁面內容的技術;
2.Ajax的主要優勢就是對頁面的請求以異步方式發送到服務器。而服務器不會用整個頁面來響應請求,
他會在後臺處理請求,與此同時用戶還能繼續瀏覽頁面並與頁面交互。
3.Ajax技術的核心是XMLHTTPRequest對象,這個對象充當着瀏覽器中腳本(客戶端)與服務器之間的中間人
的角色。以往的請求都是由瀏覽器直接向服務器發出,而javascript通過這個對象可以自己發送請求
,同時也自己處理相應;
4.不同瀏覽器對實現XMLHTTPRequest對象的方式不一樣,
在ie下:
var request=new ActiveXObject("Msxml2.XMLHTTP.3.0");
在其他瀏覽器下:
var request=new XMLHTTPRequest();
5.XMLHTTPRuest對象有多重方法。其中最有用的是open方法,她用來指定服務器上將要被訪問的文件;
指定請求的類型:GET POST或SEND,第三個參數是用於指定是否以異步方式發送和處理;
例如:
open("GET","examlpe.text",true);
6.onreadystatechange是一個事件處理函數,他會在服務器給XMLHTTPRequest對象送回響應的時候被觸發;
根據服務器具體的響應來做相應的處理,比如獲取服務器返回的相關文本,並創建一些文檔元素;
request.onreadystatechange=function(){
//dosomething
}
7.readyState屬性值有5種0~5,分別表示:未初始化,正在加載,加載完畢,正在交互,完成;
8.異步請求有一個容易被忽略的問題是異步性,就是腳本在發送XMLHTTPRequest請求後,仍然會繼續執行,而不是
等待響應返回;
下面舉一個具體例子來說明:
<!-- HTML代碼 -->
<body>
<div id="new"></div>
</body>
//JSd代碼:
function getHTTPObject(){
if(typeof XMLHttpRequest=="undefined"){
XMLHttpRequest=function(){
try{
return new ActiveXObject("Msxml2.XMLHTT.6.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTT.3.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTT");
}catch(e){}
return false;
}
}
return new XMLHttpRequest();
}
function getNewContent(){
var request=getHTTPObject();
if(request){
request.open("GET","example.txt",true);
request.onreadystatechange=function(){
if(request.readyState==4){
var para=document.createElement("p");
var text=document.createTextNode(request.responseText);
para.appendchild(text);
document.getElementById("new").appendchild(para);
}
};
request.send(null);
}else{
alert("不好意思,你的瀏覽器不支持ajax");
}
}
addLoadEvent(getNewContent);
//要在服務器下才能進行!!