ajax和ajkx不得不說的故事。。。

一、傳送請求

ajax在js中的功能實現是採用內建物件（內建物件就是指這個語言自帶的一些物件，供開發者使用，這些物件提供了一些常用的或是最基本而必要的功能）

var xhr = new XMLHttpRequest();

1、使用ajax傳送get請求方式

① 呼叫xhr的open()
引數一：請求方式
引數二：url地址

xhr.open('GET', '/ajax/data.php?id=1&age=10');

② 呼叫xhr的send()
引數一：要傳送的請求引數
採用get請求，可以不傳引數，或者傳入null(推薦)

xhr.send(null);

2、使用ajax傳送post請求方式

① 呼叫xhr的open()

xhr.open('POST', '/ajax/data.php?id=1&age=10');

② 呼叫xhr的send()
引數一：請求方式
引數二：要傳送的請求引數
使用POST請求方式，引數需要以urlencoded形式進行傳入
urlencoded的形式為：name=jack&age=17&gender=male
設定為urlencoded形式後，需要告訴服務端資料的形式為urlencoded，才可以被服務端識別。
需要使用xhr的setRequestHeader()設定請求頭中的content-type資訊

		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send('name=jack&age=17&gender=male');

二、接收響應

1、ajax的操作通常為非同步操作，所以不能直接在傳送請求後立即對響應內容進行操作，使用onreadystatechange事件進行響應內容處理

		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr.status === 200) {
			//xhr的status屬性，表示狀態碼。如果readyState為4時，再進行響應體內容的操作即可，還需確保status屬性為200時才可以進行操作。
				console.log(xhr.responseText);
			}
		};

 

通過觀察readyState屬性的狀態改變，來判斷當前請求的執行情況。
readyState屬性取值為5個，都是數值型別。
0，初始化，建立了用於進行ajax操作的物件
1，呼叫了open，建立了與服務端的連結
2，呼叫了send，請求已被髮送
3，下載中，響應頭已經得到，響應體下載中
4，下載完成，響應體下載完畢，此時才可以使用響應體內容

三、JSON

JSON和XML都是用於資料傳輸的一種形式，但XML已經不用了，JSON是主流資料交換格式
JSON實際上就是一種特殊的字元形式，特點是屬性名必須設定為雙引號，而且由於JSON是一種資料傳輸形式，所以物件中的方法不會被成功轉換，因為函式不屬於資料。
通過js中的方法進行JSON操作：① JSON.stringify()，將一個js物件轉換為JSON形式的字串。② JSON.parse()，將一個JSON形式的字串轉換為js的物件形式。

		var arr = [1, 2, 3];
		var obj = {
			name : 'jack',
			age : 18,
			gender : 'male',
			sayHi : function () {
				console.log('這是sayHi的內容');
			}
		};
		console.log(JSON.stringify(arr));//[1,2,3]
		console.log(JSON.stringify(obj));//{"name":"jack","age":18,"gender":"male"}

		// JSON.parse()的使用演示：
		var xhr = new XMLHttpRequest();
		xhr.open('GET', '/ajax/datas3.php');
		xhr.send(null);
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr.status === 200) {
				console.log(xhr.responseText);
				// 將從服務端得到的JSON形式的資料轉換為js可以識別的資料型別
				var datas = JSON.parse(xhr.responseText);
				console.log(datas);
			}
		};

//以下是/ajax/datas3.php中的程式碼
<?php
	// 從資料庫中獲取一些資料，響應給客戶端
	$link = mysqli_connect('127.0.0.1', 'root', 'root', 'test');
	$sql = 'select * from lists;';
	$query = mysqli_query($link, $sql);
	$result = mysqli_fetch_all($query);
	// php中用於進行JSON操作的函式有：
		//   json_encode(); - 將php中的資料形式轉換為JSON形式
		//   json_decode(); - 將JSON形式的資料轉換為php的資料型別
	echo json_encode($result);
?>