AJAX - 建立 XMLHttpRequest 對象
XMLHttpRequest 物件
XMLHttpRequest物件是Ajax技術的核心。
所有現代瀏覽器均支援 XMLHttpRequest 物件(IE5 和 IE6 使用 ActiveXObject)。
不刷新頁面就和伺服器進行互動是Ajax最大的特色。這個重要的特點主要歸功於XMLHttpRequest物件。使用XMLHttpRequest物件使得網頁應用程式像windows應用程式一樣,能夠及時響應用戶與伺服器之間的交互,不必進行頁面刷新或跳轉,並且能夠進行一系列的資料處理,這些功能可以使用戶的等待時間縮短,同時也減輕了伺服器端的負載。
建立 XMLHttpRequest 物件
有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 物件。
建立XMLHttpRequest 物件的語法:
variable=new XMLHttpRequest();
舊版的Internet Explorer (IE5 和IE6)使用ActiveX 物件:
variable=new ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現代瀏覽器,包括IE5 和IE6,請檢查瀏覽器是否支援XMLHttpRequest 物件。如果支持,則建立 XMLHttpRequest 物件。如果不支持,則建立 ActiveXObject ::
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用AJAX</h2></div> <button type="button" onclick="loadXMLDoc()">点击修改</button> </body> </html>