javascript DOM編程藝術學習筆記(3)Ajax初步認識:

*****Ajax初步認識:
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);

//要在服務器下才能進行!!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章