Ajax、art-template模板引擎、JSONP

1.Ajax的好處：
異步請求：
AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

2.創建一個第一個Ajax程序：
如果想要Ajax請求發送成功，必須創建一個服務器，並且提供一個接口。

1.創建服務器

2.在前端頁面編寫Ajax代碼，發送請求

1.創建Ajax的核心對象
var xhr=new XMLHttpRequest()
2.設置請求的方式和請求的地址
xhr.open('get','http://localhost:3000/first');
3.發送請求
xhr.send(null);
4.接收服務端響應給前端的數據
xhr.onload=function(){
	//打印響應內容
	console.log(xhr.responseText)
}

3.服務器端響應的數據格式
在http請求與響應的過程中，無論是請求參數還是響應內容，如果是對象類型，最終都會被轉換爲字符串進行傳輸

4.格式的互轉：
把json字符串轉換爲json對象 JSON.parse()
將json對象轉換爲json字符串 JSON.stringify()

5.傳遞get請求參數
get請求傳遞的方式主要是把參數放在地址後面

6.傳遞post請求方式

在Node.js的後臺要接收post請求必須注意

//1.導入body-parser模塊
const bodyParser = require('body-parser');

//2.設置一箇中間件用來接收所有post請求參數
app.use(bodyParser.urlencoded())

7.使用post傳入json數據

後臺：


//1.需要設置一箇中間件接收所有post請求的json數據
app.use(bodyParser.json());

8.get請求跟post請求的區別：
get請求的參數需要在地址後面進行拼接，post請求的參數是放在請求體裏面的，post請求相對於get請求來說數據安全性較高一些，get請求不能傳遞json格式的數據，post請求可以。

9.Ajax的狀態碼：
0表示未開始， 4表示響應以完成

獲取Ajax的狀態碼：xhr.readyState

// 對ajax狀態碼進行判斷 如果狀態碼的值爲4就代表數據已經接收完成了
if (xhr.readyState == 4) {
	console.log(xhr.responseText);
}

10.獲取服務端響應的兩種方式：
xhr.onreadystatechange = function() {}
xhr.onload = function (){}

11.Ajax中的網絡中斷處理

當網絡中斷時候會觸發onerror事件

Xhr.onerror=function(){
Alert(‘網絡中斷’)
}

12.IE低版本中Ajax的緩存問題：
解決方案：在請求地址的後面加請求參數，保證每次請求中的請求參數的值不相同。
Xhr.open(‘get’,’http://localhost:3000’+Math.random())

13.手動封裝一個Ajax函數

<script type="text/javascript">
		function ajax (options) {
			// 存儲的是默認值
			var defaults = {
				type: 'get',
				url: '',
				data: {},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function () {},
				error: function () {}
			};

			// 使用options對象中的屬性覆蓋defaults對象中的屬性
			Object.assign(defaults, options);

			// 創建ajax對象
			var xhr = new XMLHttpRequest();
			// 拼接請求參數的變量
			var params = '';
			// 循環用戶傳遞進來的對象格式參數
			for (var attr in defaults.data) {
				// 將參數轉換爲字符串格式
				params += attr + '=' + defaults.data[attr] + '&';
			}
			// 將參數最後面的&截取掉 
			// 將截取的結果重新賦值給params變量
			params = params.substr(0, params.length - 1);

			// 判斷請求方式
			if (defaults.type == 'get') {
				defaults.url = defaults.url + '?' + params;
			}

			/*
				{
					name: 'zhangsan',
					age: 20
				}

				name=zhangsan&age=20

			 */

			// 配置ajax對象
			xhr.open(defaults.type, defaults.url);
			// 如果請求方式爲post
			if (defaults.type == 'post') {
				// 用戶希望的向服務器端傳遞的請求參數的類型
				var contentType = defaults.header['Content-Type']
				// 設置請求參數格式的類型
				xhr.setRequestHeader('Content-Type', contentType);
				// 判斷用戶希望的請求參數格式的類型
				// 如果類型爲json
				if (contentType == 'application/json') {
					// 向服務器端傳遞json數據格式的參數
					xhr.send(JSON.stringify(defaults.data))
				}else {
					// 向服務器端傳遞普通類型的請求參數
					xhr.send(params);
				}

			}else {
				// 發送請求
				xhr.send();
			}
			// 監聽xhr對象下面的onload事件
			// 當xhr對象接收完響應數據後觸發
			xhr.onload = function () {

				// xhr.getResponseHeader()
				// 獲取響應頭中的數據
				var contentType = xhr.getResponseHeader('Content-Type');
				// 服務器端返回的數據
				var responseText = xhr.responseText;

				// 如果響應類型中包含applicaition/json
				if (contentType.includes('application/json')) {
					// 將json字符串轉換爲json對象
					responseText = JSON.parse(responseText)
				}

				// 當http狀態碼等於200的時候
				if (xhr.status == 200) {
					// 請求成功 調用處理成功情況的函數
					defaults.success(responseText, xhr);
				}else {
					// 請求失敗 調用處理失敗情況的函數
					defaults.error(responseText, xhr);
				}
			}
		}

		ajax({
			type: 'get',
			// 請求地址
			url: 'http://localhost:3000/responseData',
			success: function (data) {
				console.log('這裏是success函數');
				console.log(data)
			}
		})
	</script>

前端模板引擎使用

使用步驟：
注意（重點）：
template（）裏面必須接受的是對象類型

FormData對象的作用：
1.可以上傳二進制文件
2.可以進行表單提交
3.不需要設置請求頭

注意:
FormData對象只能用於post提交，
3.submit類型會默認進行表單提交
4.Button按鈕也會默認進行表單提交

FormData對象的使用：

1.他不需要設置action  和method屬性
2.必須給每一個表單元素設置name屬性
3.獲取form元素
4.通過使用 var formData=new FormData(form)
5.提交表單對象 xhr.send(formData)

FormData對象的實例方法：

1.獲取表單對象中屬性的值 key就是屬性名

var formData=new FormData(form)
ForData.get(‘key’)

2.設置表單對象中屬性的值
注意：
如果設置的值，不存在將會創建這個屬性。如果存在將會覆蓋原有的值

ForData.set(‘key’,’value’)

3.刪除表單對象中屬性的值

formDate.delete(‘key’)

4.向表單對象中追加值

FormDate.append(‘key’,’value’)

set方法和append方法的區別，set方法設置的值如果沒有，他會創建一個新的，如果有了那麼會覆蓋之前的屬性，append也是插入，如果有相同的屬性他也會插入。

formDate進行表單的提交：
主要是使用formDate方法，把獲取的form元素作爲formDate的參數傳遞，然後在xhr.send()提交的時候吧返回的對象放進去。

fromDate二進制文件上傳+上傳進度步驟：
1.獲取元素
2.給元素添加改變事件
3.創建formDate()對象
4.給formData對象添加屬性（files[0] 是應爲在file表單內是單個文件上傳）
5.調用xhr.upload.onprogress 主要是修改元素的width（在文件上傳中持續執行）
6.創建ajax對象
7.當狀態碼爲200的時候，動態穿件img元素，給img元素添加url

JS代碼

HTML結構：

node.js後臺接口

什麼是同源？
必須滿足三個條件，相同的協議名、域名、端口號