關於Ajax實現的簡單示例

時間 2019-11-10

標籤關於 ajax 實現簡單示例欄目 Ajax 简体版

原文原文鏈接

1、代碼示例javascript

關於Ajax的基本概念（包括XMLHttpRequest對象及其相關方法屬性）移步這裏（w3school中文版）學習瞭解。html

<!doctype html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <title>使用Ajax異步加載數據</title>
    <script type = "text/javascript">
        function loaded() {
            var xmlhttp = null;    //定義一個變量存儲XMLHttpRequest對象
            //使用try-catch獲取XMLHttpRequest對象，XMLHttpRequest對象是實現Ajax的核心基礎
            try {
                xmlhttp = new XMLHttpRequest();    //針對Firefox，chrome，Safari等瀏覽器
            }
            catch(e) {
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   //IE瀏覽器
                }
                catch(e) {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   //老式IE瀏覽器
                }    
            }
            
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     //當請求已完成，且服務器響應狀態就緒時
                    //alert(xmlhttp.responseText);
                    document.getElementById("new").innerHTML = xmlhttp.responseText;
                    //document.getElementById("new").innerText = xmlhttp.responseText;
                    //使用innerText屬性，一直沒法獲得Ajax的響應字符數據，搞不懂什麼緣由，目前只能經過innerHTML屬性獲取輸出"example.txt"字符數據
                }
            }

            xmlhttp.open("GET","example.txt",true); //說明請求方式類型，以獲取html文檔同路徑下的一個txt文檔數據爲例，直接跳事後臺腳本交互過程，簡單的示例哈~~
            xmlhttp.send();         //發送請求
        }
        window.onload = function(){
            loaded();
        }
    </script>
</head>

<body>
    <div id = "new">ok,that's shit!!!</div>
    <!-- <input type = "button" value = "shit" /> -->
</body>
</html>

2、效果截圖java

3、結論ajax

雖然理論能看的明白，但仍是要多實踐、敲代碼纔是真理！此次雖然是一個簡單示例，卻沒料想由於使用innerText屬性沒法輸出Ajax獲取的數據，找了老半天都沒發現問題，也不知道緣由，只能使用innerHTML屬性（其實就是Firefox不支持innerText屬性而已，可使用textContent替代）。主要結論以下：chrome

一、直接在本地硬盤創建一個.txt文檔做爲Ajax請求的數據源時，chrome、IE瀏覽器會限制Ajax請求使用的協議。好比請求路徑是file://協議從本身硬盤裏加載example.txt文件，就會看到"Cross origin requests are onlu supported for HTTP"(跨域請求支持HTTP協議)的錯誤信息（如圖）。Firefox瀏覽器沒有限制。編程

~~二、基於Firefox瀏覽器，使用innerText屬性沒法輸出Ajax獲取的txt文檔字符數據，而使用innerHTML屬性可正常獲取輸出（寫入當前HTML文檔中），緣由暫不明。~~跨域

三、至於上述IE、Chrome瀏覽器不支持本地文件Ajax請求，可以使用JQuery的Ajax相關的接口方法，或者使用WebStorm開發工具編寫上述代碼，便可解決本地測試ajax請求問題。瀏覽器

4、參考資料服務器