ajax( Asynchromous JavaScript and XML)概念

ajax原理： 通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。

作用：處理資料互動

同步和非同步

同步： 阻塞模式。會阻塞後面的程式碼執行，也就是說，如果這塊程式碼沒有執行完，下面的程式碼就無法執行
非同步： 非阻塞模式。不會阻塞後面程式碼的執行，在這塊程式碼沒有執行完之前，後面的程式碼也會執行，不會受到影響

實現一個簡單的ajax請求

1) 建立一個ajax物件：XMLHttpRequest

（在IE6及以下，沒有這個物件，用的是ActiveXObject：ActiveXObject（‘ Microsoft.XMLHTTP’）

let xhr = null;
try {
	xhr = new XMLHttpRequest();
}catch(e){
	xhr = new ActiveXObject('microsoft.XMLHTTP')
}

2) 呼叫這個XMLHttpRequest 的 open方法，裡面穿傳入獲取方法、資料連線、是否非同步等引數

xhr.open('GET',url,true)
//或者
xhr.open('POST',url,true
 
)

3) 呼叫這個XMLHttpRequest 的 send 方法

xhr.send();
//如果是post方式，需要提交資料的話，則在send中提交
xhr.send(data);

4) 呼叫這個XMLHttpRequest 的onreadystatechange 事件

xhr.onreadystatechange = function(){}

5) onreadystatechange 觸發一個函式，在函式總判斷XMLHttpRequest 的readyState，如果是4 則是成功

if(xhr.readyState == 4){           //readyState : ajax 的工作狀態
 

   //我們ajax請求返回的內容就會存放在 responseText 屬性下，是一個字串
   alert('xhr.responseText')  
}

ajax請求的程式碼

	let xhr = null;
	try {
		xhr = new XMLHttpRequest();
	}catch(e){
		xhr = new ActiveXObject('microsoft.XMLHTTP')
	}
	//  這裡的try{}catch(){}用以處理IE6下的相容，如果是用if判斷，則直接判斷 window.XMLHttpRequest也是可以的
	xhr.open('get',url,true)
	xhr.send();
	xhr.onreadystatechange = function(){  //onreadystatechange :當ajax狀態值發生改變的時候，觸發的事件
		if(xhr.readyState == 4){   //readyState : ajax 的工作狀態
			alert('xhr.responseText')    //我們ajax請求返回的內容就會存放在 responseText 屬性下，是一個字串
		}
	}

專案執行

如果使用到ajax請求資料，那在執行專案的時候，我們就需要啟服務來執行專案

1) 搭建伺服器環境

wamp整合環境搭建：
下載安裝之後，在相應的資料夾中找到一個 www 的資料夾，這裡就是專案的存放點了
點選wamp開啟軟體

2) 如何在伺服器下執行我們的專案

1. 將專案放在 wampp資料夾中的www資料夾中
2. 將 wampp 執行起來（點選軟體執行即可）
3. 在瀏覽器位址列輸入地址，一般可以以localhost或者是192.168 ip地址等等來開啟

① 在這裡 localhost 相當於當前根目錄，指的是 www 資料夾的位置
② IP地址 可以再電腦的網路連線屬性中的檢視到
③ 假如 www 資料夾下 有一個 text.html需要執行，則是在位址列輸入 ：localhost /text.html

4. 在開啟服務的時候，建議不要開啟 迅雷、迅雷看看等相關的軟體，可以會佔用我們伺服器的埠

如果使用的是xampp,則是將專案放在 htdocs 資料夾下，執行方式同上