第二部分 Ajax 程式設計擴充套件

學習內容及目標： 模板引擎，案例，FormData，同源政策

1，模板引擎

在傳統網站中，客戶端向伺服器端傳送請求，伺服器將html + 資料拼接好 傳送給客戶端，現在使用Ajax技術向伺服器傳送請求，伺服器大多數都是用json 資料格式作為響應內容，也就是說，原本資料+html 的拼接在伺服器端完成，現在在客戶端完成，在客戶端做資料拼接 我們也需要使用模板引擎；現在看的是客戶端模板引擎， art-template也有客戶端版本

1.1 模板引擎 概述

作用：使用模板引擎提供的模板語法，可以將資料和 HTML 拼接起來。

官方地址： https://aui.github.io/art-template/zh-cn/index.html

下載到我們的專案資料夾裡 template-web.js

1.2 使用步驟

1）. 下載 art-template 模板引擎庫檔案並在 HTML 頁面中引入

<script src="./js/template-web.js"></script>

2）. 準備 art-template 模板：利用模板語法將HTML+資料拼接起來的地方；注意，客戶端JS沒有讀取檔案的能力，所以在客戶端不是一個單獨的檔案，而是HTML檔案中一個程式碼片段，並用 script包裹，需要有一個id作為模板的唯一標識，在 script標籤內部，寫HTML語法，但是由於 script

<script id="tpl" type="text/html">

<div class="box"></div>

</script>

3）. 告訴模板引擎將哪一個模板和哪個資料進行拼接，如何告訴呢？ Template（）方法返回拼接好的字串

var html = template('tpl=模板id', {username: 'zhangsan'

4）. 將拼接好的html字串新增到頁面中，通過DOM 方法獲取頁面中的儲存容器，並將拼接好的HTML字串放在容器中，這裡還挺簡單的哈

document.getElementById('container').innerHTML = html;

5）. 通過模板語法告訴模板引擎，資料和html字串要如何拼接，重要的一步！！和node中一樣

<script id="tpl" type="text/html">

<div class="box"> {{ username }} </div>

</script>