傳統瀏覽方式和AJAX方式的不同
多數Web應用程序都使用請求/響應模型從server上獲得完整的HTML頁面。經常是點擊一個button,等待server對應,在點擊還有一個button。然后在等待,這樣一個重復的過程。
而AJAX是一種創建交互式網頁的網頁開發技術。當中XMLHttpRequest是核心的內容,它可以為頁面中的javascript腳本提供特定的通信方式。從而使頁面的javascript腳本和server之間形成動態交互的效果。XMLHTTPRequest的最大的長處是頁面內的javascript腳本可以不用刷新頁面,而直接和server發生交互。
XMLHTTPRequest的五步使使用方法
1、建立XMLHTTPRequest對象
//1.創建XMLHTTPRequest對象 if(window.XMLHttpRequest){ //alert("IE7,IE8,FireFox"); xmlhttp =new XMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //alert("IE6,IE5.5,IE5"); var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Miscrosoft XMLHTTP"]; for(var i=0;i<activexName.length;i++) { try{ xmlhttp=new ActiveXObject(activexName[i]); break; }catch(e){ } } } if(xmlhttp == undefined || xmlhttp == null){ alert("當前瀏覽器不支持創建XMLHttpRequest對象,請更換瀏覽器"); return; } array.push(xmlhttp.readyState);
2、注冊回調函數
xmlhttp.onreadystatechange=callback;要注意的是callback不能寫成callback(),我們是想把方法名告訴onreadystatechange這個屬性,假設加了括號,就相當於把返回值告訴了onreadystatechange屬性。
3、使用open方法設置和server端交互的基本信息
有兩種方法
//GET方式交互 xmlhttp.open("GET","AJAX?name=" + userName,true); //POST方式交互 xmlhttp.open("POST","AJAX",true); //POST方式交互所需添加的代碼 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
4、設置發送的數據,開始和server端交互
//GET方式 xmlhttp.send(null); //POST方式 xmlhttp.send("name=" + userName);
5、更新界面
在回調函數中推斷交互是否結束,響應是否正確。並依據須要獲取server返回的數據。並更新頁面
array.push(xmlhttp.readyState); //推斷和server端的交互是否完畢,還要推斷server端是否正確返回了數據 if(xmlhttp.readyState == 4){ //表示和server端的交互已經完畢 if(xmlhttp.status == 200){ //表示server的是響應代碼是200。正確返回了數據 var message=xmlhttp.responseText; //XML數據相應的DOM對象的接受方法 //使用的前提是,server端須要設置contenttype為text/xml //記憶像div標簽中填充文本內容的方法 var div=document.getElementById("message"); div.innerHTML=message; alert(array); } }
總結
初步了解XMLHTTPRequest對象的使用,便於以后更深入的去了解和使用。