Ajax的簡單理解和實踐

時間 2019-11-30

標籤 ajax 簡單理解實踐欄目 Ajax 简体版

原文原文鏈接

1、什麼是Ajax？

AJAX=Asynchornous Javascript and XML（異步的javascript和xml）

AJAX是一種無需從新加載整個頁面而實現部分更新的網頁技術。加強B/S的體驗性。

頁面部分刷新示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>僞造ajax</title>
</head>
<script>
    window.onload=function f(){
        var myDate=new Date();
        document.getElementById("currentTime").innerText=myDate.getTime();

        
    }
    function loadPage(){
            var targetURL=document.getElementById("url").value;
            targetURL="http://"+targetURL;
            console.log(targetURL);
            document.getElementById("iframePosition").src=targetURL;
        }
</script>
<body>
    <div>
        <p>請輸入要加載的地址<span id="currentTime"></span></p>
        <p>
            <input type="text" id="url" value="www.baidu.com">
            <input type="button" value="提交" onclick="loadPage()">
        </p>
    </div>
    <div>
        <h3>
            加載頁面的位置
        </h3>
        <iframe style="width:100%;height:500px;" id="iframePosition" >
        
        </iframe>
    </div>
</body>
</html>
複製代碼

頁面顯示效果：

點擊提交後效果：

在AJAX出現以前，像這種利用iframe實現頁面部分刷新的方式是主流，這種方式有以下缺點：
1.如腳本/樣式的額外鏈入增長了請求，天然就增長了時間開銷。
2.引入頁面會擠佔頁面控件，而更多的滾動條出如今頁面上也會是頁面顯得更加混亂。
3.iframe會阻塞頁面onload事件，使加載變得緩慢。
4.對鏈接的影響，通常頁面默認會有限定的鏈接次數，iframe佔用了這些鏈接，而iframe顯示的內容每每又不那麼重要。

2、簡單的原生ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
  *{
      margin:5px 0 0 5px;
      padding:0;
  }
  table{
      width:500px;
      text-align: center;
      border-collapse: collapse;
  }
  td{
      border:1px solid black;
  }
</style>
<body>
    <div>
        <p>status:<span id="A1"></span></p>
        <p>statusText:<span id="A2"></span></p>
        <p>responseText:<span id="A3"></span></p>
        <p>readyStatet:<span id="A4"></span></p>
       
        <button onclick="change('data.json')">change</button>
    </div>
    <table>
        <th>
            <tr>
                <td>姓名</td>
                <td>性別</td>
                <td>郵箱</td>
                <td>年齡</td>
            </tr>
            <tbody id="myTBody">

            </tbody>
        </th>
    </table>
</body>
<script>
    function change(url){
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("get",url,true);  //get是請求方式 url是請求地址 true開啓異步
        xmlhttp.send();
        console.log(xmlhttp.status);
        xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){    //請求成功時
            A4.innerHTML=xmlhttp.readyState;
            document.getElementById("A1").innerHTML=this.status;
            document.getElementById("A2").innerHTML=this.statusText;
            document.getElementById("A3").innerHTML=this.responseText;
            var obj=JSON.parse(this.responseText);
            addChilds(obj);
        }else{                                            //請求失敗時
            document.getElementById("A1").innerHTML=this.status;
            document.getElementById("A2").innerHTML=this.statusText;
            document.getElementById("A3").innerText="請求失敗";
        } //當請求狀態發生變化時調用state_change方法
    }
    
    }

    function addChilds(obj){
        for(var i=0;i<obj.length;i++){
            var myTBody=document.getElementById("myTBody");
        var oTr=document.createElement("tr");
            Object.keys(obj[i]).forEach(key=>{
        var oTd=document.createElement("td");
            console.log(obj[i][key]);
            oTd.innerHTML=obj[i][key];
            oTr.appendChild(oTd);
          });
            myTBody.appendChild(oTr);
        }
    }
</script>
</html>
複製代碼

這裏爲了模擬實際場景，我手動建立了一個簡單的data.json文件，內容以下。

[
 
    {
   
      "name":"張國立",
   
      "sex":"男",
   
      "email":"zhangguoli@123.com",
   
      "age":36
   
    },
   
    {
   
      "name":"張鐵林",
   
      "sex":"男",
   
      "email":"zhangtieli@123.com",
   
      "age":23
   
    },
   
    {
   
      "name":"鄧婕",
   
      "sex":"女",
   
      "email":"zhenjie@123.com",
   
      "age":29
   
    },
   
    {
   
      "name":"張國立",
   
      "sex":"男",
   
      "email":"zhangguoli@123.com",
   
      "age":23
   
    },
   
    {
   
      "name":"張鐵林",
   
      "sex":"男",
   
      "email":"zhangtieli@123.com",
   
      "age":26
   
    },
   
    {
   
      "name":"鄧婕",
   
      "sex":"女",
   
      "email":"zhenjie@123.com",
   
      "age":24
   
    }
   
]
複製代碼