1 獲得Ajax對象
1.1 問題
如何獲得XmlHttpRequest對象。
1.2 方案
區分瀏覽器，使用不同的獲取方式。
1.3 步驟
步驟一： 新建ajax01.html頁面
新建一個Web工程，在WebRoot下新建ajax01.html頁面。在<script>標記內編寫JavaScript代碼實現獲取Ajax對象。
<script type="text/javascript"> /*獲取Ajax對象*/ function getXhr(){ var xhr = null; //確保IE7,IE8，FireFox下可以運行 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ //確保IE6可以運行，無視更古老的IE瀏覽器 xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; //更簡易的寫法 //xhr = window.XMLHttpRequest? // new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp"); } </script>步驟二： 部署項目訪問ajax01.html頁面
訪問頁面如圖-2所示。
圖 – 2
點擊鏈接：
圖 - 3
使用IE測試結果如圖-4所示。
圖 – 4
注意：本次測試使用的是IE11，但IE的早期5.5，6.0版本創建的都是ActiveXObject類型的。從IE7開始支持創建XMLHttpRequest的方式來獲取Ajax對象。
1.4 完整代碼
ajax01.html文件代碼如下：
<html> <head> <title>ajax01.html</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> /*獲取Ajax對象*/ function getXhr(){ var xhr = null; //確保IE7,IE8，FireFox下可以運行 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ //確保IE6可以運行，無視更古老的IE瀏覽器 xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; //更簡易的寫法 //xhr = window.XMLHttpRequest? // new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp"); } </script> </head> <body> <!-- 獲取XMLHttpRequest對象 --> <a href="javascript:;" onclick="alert(getXhr());"> 獲取Ajax對象 </a> </body></html>2 使用Ajax對象發送GET請求
2.1 問題
使用Ajax對象發送GET類型的請求，從服務器端獲取一小段文本。
2.2 方案
遵循創建Ajax對象，創建請求，設置回調函數，發送請求的步驟來完成一次異步請求。
新聞熱點
疑難解答
圖片精選
