從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

時間 2019-11-17

標籤開始 web ajax 同步異步請求數據格式欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......php

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、同步請求與異步請求

同步請求：在用戶進行請求發送以後，瀏覽器會一直等待服務器的數據返回，若是網絡延遲比較高，瀏覽器就一直卡在當前界面，直到服務器返回數據纔可進行其餘操做。前端

異步請求：在用戶進行請求發送以後，瀏覽器能夠自由操做頁面中其餘的元素，當服務器放回數據的時候，才觸發相應事件，對返回的數據進行操做。git

若是將 Ajax 請求改成同步請求的話：github

一、界面會卡頓，卡頓事件取決於網絡速度；json

二、xhr.onreadystatechange 的回調函數不會執行，由於在 xhr.send() 以後，xhr.readyState 就爲 4 了，因此數據的處理，直接跟在xhr.send() 以後就能夠了。瀏覽器

一、異步的底層原理

js 中的異步實現原理是單線程+事件隊列。js 的代碼執行是單線程的，單線程的意思是代碼從上到下按照順序執行，而事件隊列存儲了一些回調函數，當 js 從上往下執行的時候，遇到回調函數就將其放到事件隊列，在全部 js 代碼執行完成以後處於空閒狀態時，纔會去事件隊列看有沒有回調函數達到觸發條件，有的話就執行，沒有的話就繼續閒着。服務器

Ajax 的四步操做中，同步和異步的區別：微信

若是是異步請求，在 send 的時候，會調用瀏覽器進行網絡數據的請求，send 就執行完了，接着將第四步的回調函數存儲在事件隊列裏面，瀏覽器數據請求完了，readyState 狀態發生變化，觸發第四步回調函數的執行。網絡

而在同步請求中， send 時是本身進行網絡數據的請求，這個時候非得請求到數據，纔會接着將第四步的回調函數存儲在事件隊列裏面，因此若是網絡延時頁面就會卡死，在 send 事後接受到數據的時候 readyState 已經爲4了，不會再變化，因此第四步的回調函數不會執行。

2、數據格式

什麼是數據格式？

數據格式就是經過必定的規範組織起來，叫作數據格式。

一、XML 數據格式

XML 數據格式是將數據以標籤的方式進行組裝，必須以 <? xml version="1.0" encoding="utf-8" ?> 開頭，標籤必須成對出現，也就是有開始標籤就必定要有結束標籤。

<? xml version="1.0" encoding="utf-8" ?>
<students>
    <student>
      <name>張三</name>
      <age>18</age>
      <sex>男</sex>
  </student>
</students>

缺點：體積太大，元數據（描述數據的數據）太多，解析不方便，目前使用不多。

二、json 數據格式

json 數據格式經過 key-value 的方式組裝。

{
  "student" : [
    {
      "name": "張三",
      "age": "18",
      "sex": "男"
    },
    {
      "name": "李四",
      "age": "23",
      "sex": "女"
    }
  ]
}

優勢：體積小，傳輸快，解析方便。

三、案例：獲取圖書信息

接口文檔：

地址	/server/getBooks/php
做用描述	獲取圖書信息
請求類型	get 請求
參數	無
返回數據格式	xml 格式
返回數聽說明	以下

<?xml version="1.0" encoding="utf-8" ?>
<booklist>
    <book>
        <name>三國演義</name>
        <author>羅貫中</author>
        <desc>一個殺伐紛爭的年代</desc>
    </book>
    
    <book>
        <name>水滸傳</name>
        <author>施耐庵</author>
        <desc>108條好漢的故事</desc>
    </book>
    
    <book>
        <name>西遊記</name>
        <author>吳承恩</author>
        <desc>佛教與道教鬥爭</desc>
    </book>
    
    <book>
        <name>紅樓夢</name>
        <author>曹雪芹</author>
        <desc>一個封建王朝的縮影</desc>
    </book>
</booklist>

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>書籍列表</title>
    <style>
        div{
            width: 800px;
            margin: 20px auto;
        }
        table{
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function () {  
            var xhr = new XMLHttpRequest();
            xhr.open("get", "./server/getBooks.php", true);
            xhr.send(null);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status = 200) {
                        var booklists = this.responseXML.getElementsByTagName("booklist")[0].getElementsByTagName("book");
                        
                        for(var i=0; i<booklists.length; i++) {
                            var name = booklists[i].getElementsByTagName("name")[0].textContent;
                            var author = booklists[i].getElementsByTagName("author")[0].textContent;
                            var desc = booklists[i].getElementsByTagName("desc")[0].textContent;

                            var trObj = document.createElement("tr");
                            trObj.innerHTML = "<td>"+name+"</td><td>"+author+"</td><td>"+desc+"</td>";
                            document.getElementsByTagName("table")[0].appendChild(trObj);
                        }
                    }
                }
            };


        };
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>書名</th>
                <th>做者</th>
                <th>描述</th>
            </tr>
            <!-- <tr>
                <td>三國演義</td>
                <td>羅貫中</td>
                <td>一個殺伐紛爭的年代</td>
            </tr> -->
        </table>
    </div>
</body>
</html>

XML 數據的格式主要是經過：getElementsByTagName 來獲取的。

四、案例：獲取學生信息

接口文檔：

地址	/server/getStudents/php
做用描述	獲取學生信息
請求類型	get 請求
參數	無
返回數據格式	json 格式
返回數聽說明	以下

[
  {
    "name":"張三",
    "age":"18",
    "sex":"男"
  }
]

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學生列表</title>
    <style>
        div{
            width: 800px;
            margin: 20px auto;
        }
        table{
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function () {  
            var xhr = new XMLHttpRequest();
            xhr.open("get", "./server/getStudents.php", true);
            xhr.send(null);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status = 200) {
                        var jsonObj = JSON.parse(this.responseText);
                        for(var i=0; i<jsonObj.length; i++) {
                            var name = jsonObj[i].name;
                            var age = jsonObj[i].age;
                            var sex = jsonObj[i].sex;

                            var trObj = document.createElement("tr");
                            trObj.innerHTML = "<td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td>";
                            document.getElementsByTagName("table")[0].appendChild(trObj);
                        }
                    }
                }
            };
        };
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
            </tr>
            <!-- <tr>
                <td>張三</td>
                <td>20</td>
                <td>男</td>
            </tr> -->
        </table>
    </div>
</body>
</html>