Ajax(20171101)

1.ajax

AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。
這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

2.創建 XMLHttpRequest 對象

eg:
 var xhr = null;
        if (window.XMLHttpRequest) {
          //所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）
          //均內建 XMLHttpRequest 對象。
            xhr = new XMLHttpRequest();
        } else {
          //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

3.向服務器發送請求

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。 然而，在以下情況中，請使用 POST 請求： a)無法使用緩存文件（更新服務器上的文件或數據庫） b)向服務器發送大量數據（POST 沒有數據量限制） c)發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

4.服務器響應

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
屬性  描述
   responseText 獲得字符串形式的響應數據。
  responseXML   獲得 XML 形式的響應數據。

5.onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。

6.處理服務器返回的數據

將服務器返回的數據渲染到頁面上

案例一-----------------------------------------------------------
（後臺文件爲json格式）


eg：
樣式：
<style>
        .con {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #eee;
        }
        .con table {
            border-bottom: 1px solid #eee;
            font-size: 16px;
            font-weight: 800;
            line-height: 2em;
            text-align: center;
            width: 100%;
        }
        .con table thead{
            text-align: center;
        }
        .con table td{
            border:1px solid #eee ;
            padding: 5px 10px;
        }
        .con table td:nth-of-type(1){
            text-align: right;
        }
        .con table td:nth-of-type(2){
            text-align: left;
        }
    </style>
結構：
<div class="con">
   <table id="information">
       <thead><tr><th colspan="3">北京空氣狀況</th></tr></thead>

   </table>
</div>

ajax：
      //執行函數
    showInfo();
    //封裝函數
    function showInfo() {
        var information = document.getElementById("information");
        var info_tbody = document.createElement("tbody");
        information.appendChild(info_tbody);
        info_tbody.innerHTML = "";
        var xhr = null;
        //兼容處理，創建XMLHttpRequest對象，下圖有轉化後的內容截圖
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.open("get","tq.json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //將返回的數據轉化成json格式
                var data =JSON.parse(xhr.responseText);
               for(var i in data.data){
                    if(i=="yesterday"){
                        var trye = document.createElement("tr");
                        var tdye = document.createElement("td");
                        tdye.innerHTML=i;
                        trye.appendChild(tdye);
                        var tdye1 = document.createElement("td");
                        var stri="";
                        for(var s in data.data.yesterday){
                            stri+=data.data.yesterday[s]
                        }
                        tdye1.innerHTML =stri;
                        trye.appendChild(tdye1);
                        info_tbody.appendChild(trye);
                    }else if(i=="forecast"){
                        var trf = document.createElement("tr");
                        var tdf = document.createElement("td");
                        tdf.innerHTML=i;
                        trf.appendChild(tdf);
                        var tdf1 = document.createElement("td");
                        for(var j in data.data.forecast){
                            var pt = document.createElement("p");
                            var str="";
                            for(var m in data.data.forecast[j]){
                                str+=data.data.forecast[j][m]
                            }
                            pt.innerHTML = str;
                            tdf1.appendChild(pt);
                        }
                        trf.appendChild(tdf1);
                        info_tbody.appendChild(trf);
                    }else{
                        var trtag = document.createElement("tr");
                        trtag.innerHTML="<td>"+i+"</td><td>"+data.data[i]+"</td>";
                        info_tbody.appendChild(trtag);
                    }

               }
            }
        };
        xhr.send();
    }

案例二----------------------------------------------------------- （後臺文件爲xml格式） 其他內容一樣只是數據處理稍有差別 showInfo(); function showInfo() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get', 'tq.xml'); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseXML; // var tbody =document.createElement("tbody"); //讀取XML數據 var resp = data.getElementsByTagName("resp")[0];//不同的地方 var city = resp.getElementsByTagName("city")[0]; var dttag = document.createElement("dt"); dttag.innerHTML = city.textContent;//獲得元素的文本屬性 ....... } }; xhr.send(); }