Ajax(20171101)

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

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');
        }

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性  描述
   responseText 获得字符串形式的响应数据。
  responseXML   获得 XML 形式的响应数据。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

案例一-----------------------------------------------------------
（后台文件为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();
    }