從零開始學 Web 之 Ajax（五）同步非同步請求，資料格式
一、同步請求與非同步請求
同步請求：在使用者進行請求傳送之後，瀏覽器會一直等待伺服器的資料返回，如果網路延遲比較高，瀏覽器就一直卡在當前介面，直到伺服器返回資料才可進行其他操作。
非同步請求：在使用者進行請求傳送之後，瀏覽器可以自由操作頁面中其他的元素，當伺服器放回資料的時候，才觸發相應事件，對返回的資料進行操作。
如果將 Ajax 請求改為同步請求的話：
1、介面會卡頓，卡頓事件取決於網路速度；
2、xhr.onreadystatechange 的回撥函式不會執行，因為在 xhr.send() 之後，xhr.readyState 就為 4 了，所以資料的處理，直接跟在xhr.send() 之後就可以了。
1、非同步的底層原理
js 中的非同步實現原理是單執行緒+事件佇列。js 的程式碼執行是單執行緒的，單執行緒的意思是程式碼從上到下按照順序執行，而事件佇列儲存了一些回撥函式，當 js 從上往下執行的時候，遇到回撥函式就將其放到事件佇列，在所有 js 程式碼執行完成之後處於空閒狀態時，才會去事件佇列看有沒有回撥函式達到觸發條件，有的話就執行，沒有的話就繼續閒著。
Ajax 的四步操作中，同步和非同步的區別：
如果是非同步請求，在 send 的時候，會呼叫瀏覽器進行網路資料的請求，send 就執行完了，接著將第四步的回撥函式儲存在事件佇列裡面，瀏覽器資料請求完了，readyState 狀態發生變化，觸發第四步回撥函式的執行。
而在同步請求中， send 時是自己進行網路資料的請求，這個時候非得請求到資料，才會接著將第四步的回撥函式儲存在事件佇列裡面，所以如果網路延時頁面就會卡死，在 send 過後接受到資料的時候 readyState 已經為4了，不會再變化，所以第四步的回撥函式不會執行。
二、資料格式
什麼是資料格式？
資料格式就是通過一定的規範組織起來，叫做資料格式。
1、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>
缺點：體積太大，元資料（描述資料的資料）太多，解析不方便，目前使用很少。
2、json 資料格式
json 資料格式通過 key-value 的方式組裝。
{
"student" : [
{
"name": "張三",
"age": "18",
"sex": "男"
},
{
"name": "李四",
"age": "23",
"sex": "女"
}
]
}優點：體積小，傳輸快，解析方便。
3、案例：獲取圖書資訊
介面文件：
| 地址 | /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 來獲取的。
4、案例：獲取學生資訊
介面文件：
| 地址 | /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>只需要將獲取的 responseText 轉化為 json 格式的物件，使用
JSON.parse(this.responseText);
相關推薦
從零開始學 Web 之 Ajax（五）同步非同步請求，資料格式
一、同步請求與非同步請求 同步請求：在使用者進行請求傳送之後，瀏覽器會一直等待伺服器的資料返回，如果網路延遲比較高，瀏覽器就一直卡在當前介面，直到伺服器返回資料才可進行其他操作。 非同步請求：在使用者進行請求傳送之後，瀏覽器可以自由操作頁面中其他的元素，當伺服器放回資料的時候，才觸發相應事件，對返回的資料
從零開始學 Web 之 Ajax（五）同步異步請求，數據格式
遊記 document 空閑 name center 20px 實現 resp 也會 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例
>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi
從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 Ajax（六）jQuery中的Ajax
var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web
從零開始學 Web 之 Ajax（二）PHP基礎語法
一、PHP 基礎語法 1、基本結構 所有PHP程式碼都要寫到 <?php ... ?> 裡面。 PHP檔案可以和 HTML 檔案結合進行使用。 PHP檔案的預設副檔名是 ".php"。 PHP程式碼必須在伺服器上執行。 2、列印語句 echo： 的作用在頁面中輸入字串（只能列印字串，數字等
從零開始學 Web 之 Ajax（一）伺服器相關概念
一、伺服器和客戶端 伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。 伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等 檔案上傳下載服務：V
從零開始學 Web 之 Ajax（七）跨域
一、跨域 跨域這個概念來自一個叫 “同源策略” 的東西。同源策略是瀏覽器上為了安全考慮實施的非常重要的安全機制。 Ajax 預設只能獲取到同源的資料，對於非同源的資料，Ajax是獲取不到的。 什麼是同源？ 協議、域名、埠全部相同。 如果使用 Ajax 獲取非同源的資料，會報錯，報錯資訊如下： Fail
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
從零開始學 Web 之 CSS3（五）transform
transform transform 字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：移動 translate，縮放scale，旋轉rotate，翻轉skew，改變旋轉軸心等。 1、元素的移動：translate 作用：使用transform實現元素的移動 語法： /*使用t
從零開始學 Web 之 HTML5（三）網路監聽，全屏，檔案讀取，地理定位介面，應用程式快取
一、網路監聽介面 ononline：網路連通時觸發 onoffline：網路斷開時觸發 window.addEventListener("online", function(){}); window.addEventListener("offline", function(){}); 二、全屏介面 全
從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、CSS可見性
從零開始學 Web 之 DOM（五）元素的建立
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、DOM概念 D
從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件
一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。 如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二 元素.width(屬性
從零開始學 Web 之 JavaScript（五）面向物件
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、面向物件 1、
從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器
>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi
從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件
一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。 把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js
從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 ES6（五）ES6基礎語法三
一、Generator Generator 函式是 ES6 提供的一種非同步程式設計解決方案。 Generator 函式有多種理解角度。語法上，首先可以把它理解成，Generator 函式是一個狀態機，封裝了多個內部狀態。 執行 Generator 函式會返回一個遍歷器物件，也就是說，Generator