ajax
概念
1.Ajax 技術需要執行在網站環境中才能生效，當前課程會使用Node建立的伺服器作為網站伺服器。
2.Ajax的使用
	1.建立 Ajax 物件
		var xhr = new XMLHttpRequest();
	2.告訴 Ajax 請求地址以及請求方式
		xhr.open('get', 'http://www.example.com');
	3.傳送請求
		xhr.send();
	4.獲取伺服器端給與客戶端的響應資料
		 xhr.onload = function () {
			 console.log(xhr.responseText);
		 }
3.伺服器端響應的資料格式
	1.在真實的專案中，伺服器端大多數情況下會以 JSON 物件作為響應資料的格式。當客戶端拿到響應資料時，要將 JSON 資料和 HTML 字串進行拼接，然後將拼接的結果展示在頁面中。
	2.在 http 請求與響應的過程中，無論是請求引數還是響應內容，如果是物件型別，最終都會被轉換為物件字串進行傳輸。
    轉換----------JSON.parse() // 將 json 字串轉換為json物件
                JSON.stringify() // 將json物件轉換為json字串

4.請求引數傳遞
	1.GET 請求方式
		xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
	2.POST 請求方式
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
		xhr.send('name=zhangsan&age=20');

5.請求引數的格式
	1.application/x-www-form-urlencoded
		name=zhangsan&age=20&sex=男
	2.application/json
		{name: 'zhangsan', age: '20', sex: '男'}
		
	----post中，如果傳遞是資料是json物件要轉換成json字串
		JSON.stringify() // 將json物件轉換為json字串
6.獲取伺服器端的響應
	Ajax 狀態碼  (xhr.readyState // 獲取Ajax狀態碼)
	0：請求未初始化(還沒有呼叫open())
	1：請求已經建立，但是還沒有傳送(還沒有呼叫send())
	2：請求已經發送
	3：請求正在處理中，通常響應中已經有部分資料可以用了
	4：響應已經完成，可以獲取並使用伺服器的響應了
	
	---onreadystatechange 事件
	當 Ajax 狀態碼發生變化時將自動觸發該事件。
	在事件處理函式中可以獲取 Ajax 狀態碼並對其進行判斷，當狀態碼為 4 時就可以通過 xhr.responseText 獲取伺服器端的響應資料了。
	-------有些版本不支援xhr.unload只支援xhr.onreadystatechange來響應


	區別描述	                onload事件	onreadystatechange事件
	是否相容IE低版本	        不相容	    相容
	是否需要判斷Ajax狀態碼	    不需要	    需要
	被呼叫次數	                一次	    多次

7.Ajax 錯誤處理
	1.   網路暢通，伺服器端能接收到請求，伺服器端返回的結果不是預期結果。
	可以判斷伺服器端返回的狀態碼，分別進行處理。xhr.status 獲取http狀態碼
	2.   網路暢通，伺服器端沒有接收到請求，返回404狀態碼。
	檢查請求地址是否錯誤。
	3.   網路暢通，伺服器端能接收到請求，伺服器端返回500狀態碼。
	伺服器端錯誤，找後端程式設計師進行溝通。
	4.   網路中斷，請求無法傳送到伺服器端。
	會觸發xhr物件下面的onerror事件，在onerror事件處理函式中對錯誤進行處理。

8.低版本 IE 瀏覽器的快取問題
    問題：在低版本的 IE 瀏覽器中，Ajax 請求有嚴重的快取問題，即在請求地址不發生變化的情況下，只有第一次請求會真正傳送到伺服器端，後續的請求都會從瀏覽器的快取中獲取結果。即使伺服器端的資料更新了，客戶端依然拿到的是快取中的舊資料。
    解決方案：在請求地址的後面加請求引數，保證每一次請求中的請求引數的值不相同。 
              xhr.open('get', 'http://www.example.com?t=' + Math.random());


 // 當Ajax狀態碼發生變化時
 xhr.onreadystatechange = function () {
     // 判斷當Ajax狀態碼為4時
     if (xhr.readyState == 4) {
         // 獲取伺服器端的響應資料
         console.log(xhr.responseText);
     }
 }






心得
1.
	XML格式  客戶端和服務端傳輸內容的資料格式，現在一般是JSON物件
2.傳遞引數
	get和post都可以傳遞引數，post在傳遞時需要設定配置,但是伺服器端在接收引數時都需要第三方模組  body-parser
	而get請求只能傳遞name=xxx&age=xx這種請求方式，而post可以傳遞剛剛那種也能傳遞JSON物件
	1.get
		var params = 'username='+ nameValue +'&age=' + ageValue;
		// 配置ajax物件
		xhr.open('get', 'http://localhost:3000/get?'+params);
		// 傳送請求
		xhr.send();
		// 獲取伺服器端響應的資料
		xhr.onload = function () {
			console.log(xhr.responseText)
		}
	2.post
		var params = 'username='+ nameValue +'&age=' + ageValue;
		// 配置ajax物件
		xhr.open('post', 'http://localhost:3000'/post)
		xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');

		// 傳送請求
		xhr.send();
		// 獲取伺服器端響應的資料
		xhr.onload = function () {
			console.log(xhr.responseText)
		}
	
3.
服務端在接收客戶端傳過來的ajax引數時，app.use(bodyParser.urlencoded());代表解析application/x-www-form-urlencoded（name=xxx&age=xx）這種格式的請求頭
app.use(bodyParser.json());代表解析application/json({name:XX,age:XX})這種格式的請求頭------這種請求頭髮送時需要把JSON物件變成字串（xhr.send(JSON.stringify(params));）

4.
Ajax狀態碼(0,1,2,3,4)：表示Ajax請求的過程狀態，是ajax物件返回的
Http狀態碼(200,400,404,500...)：表示請求處理的結果，是伺服器端返回的

5.substr(start, length)  位置可以是負數，長度不行，如果是負數就會變成0