AJAX–>阿賈克斯

瞭解WAMP的主要作用是什麼
WAMP：Windows Apache MySql PHP的縮寫
WAMP是一個整合環境，對前端而言：
集成了後臺語言PHP環境和資料庫MYSQL
能夠將一臺計算機變成web伺服器
方便開發者在真正的伺服器環境進行測試

一、JSON與XML

1、JSON與XML都是常見的資料格式
JSON（JavaScript Object Notation）輕量級資料格式
XML是一種可擴充套件標記語言，與HTML都是標記語言

2、JSON的優勢：
輕量級，體積小，節省流量，提高載入速度
解析成原生JS物件，解析比XML更快
查詢資料無需查詢標籤，更快

3、JSON常見形式： json物件&json陣列

4、JSON轉換方法

在資料傳輸流程中，json是以文字即字串的形式傳遞的，而JS操作的是JSON物件，所以，JSON物件和JSON字元

串之間的相互轉換是關鍵
JSON字串: var str1 = ‘{ “name”: “cxh”, “sex”: “man” }’;
JSON 對 象: var str2 = { “name”: “cxh”, “sex”: “man” };
//由JSON字串轉換為JSON物件
方法一. var obj = eval(‘(’ + str1 + ‘)’); // js內建方法
方法二. var obj = str1.parseJSON()

二、AJAX是什麼

• AJAX = Asynchronous JavaScript And XML
  （ AJAX = 非同步 JavaScript 和 XML）
• AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術
• 通俗的講，AJAX就是JS通過一個網址去載入資料，這個過程通常是使用者不可見的 傳統的網頁（不使用 AJAX）如果需要更新內容，必需重新載入整個網頁
• 
  
  • 非同步載入資料，無需切換頁面
  • 更佳的使用者體驗：區域性重新整理、及時驗證、操作步驟簡化等
  • 節省流量
  • JS控制資料的載入，更加靈活多用

三、基本API(那麼AJAX到底如何使用？)

1、XMLHttpRequest 物件
XMLHttpRequest 物件用於在後臺與伺服器交換資料
所有現代瀏覽器均支援 XMLHttpRequest 物件
（IE5 和 IE6 使用 ActiveXObject）。

//step1: 建立XMLHttpRequest物件
if(window.XMLHttpRequest){ // 非IE5 6
var xhr=new XMLHttpRequest();
}else{ // IE5 6
var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
};

//step2: 開啟和伺服器的連線
open(method, url, asyn）

引數：
method：String，請求的型別 get 或 post
url：String，檔案在伺服器上的位置
asyn：Boolean，true（非同步）或 false（同步）
同步需要等待返回結果才能繼續，非同步不必等待
var xhr=new XMLHttpRequest();
xhr.open(‘get’, ‘123.txt’, true); // 常用非同步
不推薦使用false(同步)，僅用於一些小型的請求

//step3: 傳送給伺服器
send( string）

xhr.send(); 將請求傳送(空或null)到伺服器(get請求)
xhr.send(string)：僅用於 post 請求
與 post 相比，get 更簡單也更快速，並且在大部分情況下都能用。
然而，在以下情況中，請使用 post 請求：
無法使用快取檔案（更新伺服器上的檔案或資料庫）
向伺服器傳送大量資料（post 沒有資料量限制）
傳送包含未知字元的使用者輸入時，post 比 get 更穩定也更可靠
post請求需在send之前設定：xhr.setRequestHeader(“Content-type”,”application/x-www-form-

urlencoded”);

4、XMLHttpRequest 物件的重要屬性：
onreadystatechange 事件
readyState 和 status 屬性存有XMLHttpRequest 的狀態
readyState 改變時就會觸發 onreadystatechange 事件
readyState 從 0 到 4 發生變化：
0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收
3: 請求處理中 4: 請求已完成
status 200：“OK” 404：未找到頁面
當readyState為 4 且 status為 200 時，表示響應已就緒
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性
responseText 獲得字串形式的響應資料
responseXML 獲得 XML 形式的響應資料
如來自伺服器的響應並非 XML，用 responseText 屬性
responseText返回字串形式的響應，可以這樣使用：
Div.innerHTML=xhr.responseText;

5、非同步載入 txt json xml php，並顯示在網頁中：

準備一個可以通過網址訪問的資料
點選載入按鈕的時候，發起一個AJAX請求
請求準備好的網址，得到資料
請求成功後，將得到的資料設定為div的innerHTML