Ajax的響應(yīng)數(shù)據(jù)格式有：
XML，一種數(shù)據(jù)描述的手段，缺點：數(shù)據(jù)冗余太多。
JSON（JavaScript Object Notation，JavaScript）對象表示法，數(shù)據(jù)描述的手段，類似于JavaScript字面量方式。服務(wù)端采用JSON格式返回數(shù)據(jù)，客戶端按照J(rèn)SON格式解析數(shù)據(jù)。
這些數(shù)據(jù)協(xié)議都是Ajax在請求過程中會用到的，所以當(dāng)服務(wù)器發(fā)出某種格式的數(shù)據(jù)時，客戶端就可以采用JavaScript相應(yīng)的方法解析這種格式。
JSON Server
- json-server 是一個Node模塊，運行Express服務(wù)器，可以指定一個json文件作為api的數(shù)據(jù)源。我們可以用它快速搭建一個web服務(wù)器。json-server的學(xué)習(xí)使用手冊https://github.com/typicode/json-server
響應(yīng)數(shù)據(jù)的渲染
客戶端拿到請求到的數(shù)據(jù)之后就需要把這些數(shù)據(jù)渲染到頁面上。
??簡單的數(shù)據(jù)結(jié)構(gòu)，可以采用字符串拼接的方式處理。
??復(fù)雜的數(shù)據(jù)，可以使用模板引擎或ES6提供的模板字符串進(jìn)行處理。
這里使用字符串拼接的方式，來將獲取的響應(yīng)數(shù)據(jù)進(jìn)行頁面渲染。
var box = document.getElementById("box");
var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:3000/users");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var data = JSON.parse(this.responseText);
var str = "";
console.log(data);
//循環(huán) 遍歷數(shù)組
for(var i = 0;i < data.length;i ++){
//第一種 采用字符串拼接
// str += "<tr><td>" + data[i].id + "</td >" +
// "<td>" + data[i].name + "</td>" +
// "<td>" + data[i].class + "</td></tr>";
//第二種 采用 模板字符串 進(jìn)行拼接
str += `<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].class}</td>
</tr>`
}
box.innerHTML += str;
}
}
?上述的字符串拼接，當(dāng)數(shù)據(jù)少時可以使用，但當(dāng)數(shù)據(jù)復(fù)雜又多時，字符串拼接就顯得復(fù)雜又易出錯了。所以模板引擎的使用就解決了 這一問題。
模板引擎
-
作用：減少字符串拼接；
在模板里解析json，然后跟html內(nèi)容拼接，性能會更好
artTemplate
art-Template是一個簡約、快速的模板引擎。
中文使用文檔：artTemplate中文使用文檔
-
將邏輯表達(dá)式語句寫在<% 與 %>符號中
將輸出表達(dá)式寫在<%= content%>中
-
使用步驟：
①引入模板文件
②創(chuàng)建模板
③將數(shù)據(jù)跟模板進(jìn)行綁定
④在模板里編寫代碼解析數(shù)據(jù)
⑤綁定數(shù)據(jù)和模板之后得到內(nèi)容
⑥將數(shù)據(jù)內(nèi)容寫到頁面上。
