一、ajax基本概念
ajax即“Asynchronous Javascript And XML”（異步JavaScript和XML）
ajax的核心是XmlHttpRequest對象。
一 ajax原理：
1.利用html和CSS來實現(xiàn)頁面，表達信息
2.運用XmlHttpRequest對象來和服務器進行數(shù)據(jù)交換
3.JavaScript操作DOM，實現(xiàn)局部刷新
二 XMLHttpRequest對象的創(chuàng)建
// . 創(chuàng)建對象
var xhr = new XMLHttpRequest();
三、 XmlHttpRequest發(fā)送請求
// 請求方式，請求地址，是否異步.
open(method,url,async);
//請求內(nèi)容，get請求的請求內(nèi)容已經(jīng)拼接在了url后面，所以send沒有參數(shù)，
//post請求一定要有參數(shù)。
send(string);
例如get請求：
// 1. 創(chuàng)建對象
var xhr = new XMLHttpRequest();
// 2. 調(diào)用此對象中【 準備】（打開）方法
// 參數(shù)1： 請求數(shù)據(jù)的方式 GET / POST ， put 等
// 參數(shù)2： 請求數(shù)據(jù)的地址
// 參數(shù)3： false 是同步的方式， true 就是異步
xhr.open("GET", "http://localhost:8080/ajax/ajaxtest", false);
// 3. 發(fā)送
xhr.send();
// 4. 獲取數(shù)據(jù)
console.log( xhr.responseText );
Post請求：
// 請求地址
var url = "http://localhost:8080/ajax/football";
var xhr = new XMLHttpRequest();
// 第1個參數(shù) POST， 如果采用post方式，就會自動忽略 地址字符串后面的信息
xhr.open("POST", url, true)
//POST請求和Web表單提交不同，需要使用 XHR 來模仿表單提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 傳遞參數(shù)，數(shù)據(jù)是放在 send 方法中傳遞的
xhr.send("pageNo=1");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var str = xhr.responseText;
}
}
在請求的過程中，需要監(jiān)聽readyState的變化，它的變化代表著請求響應的變化。
// 1. 創(chuàng)建對象
var xhr = new XMLHttpRequest();
// 2. 調(diào)用此對象中【 準備】（打開）方法
// 參數(shù)1： 請求數(shù)據(jù)的方式 GET / POST ， put 等
// 參數(shù)2： 請求數(shù)據(jù)的地址
// 參數(shù)3： false 是同步的方式， true 就是異步
xhr.open("GET", "http://localhost:8080/ajax/ajaxtest", false);
// 3. 發(fā)送
//xhr.send();
// 如果采用同步方式，那么send會等數(shù)據(jù)回來之后，才執(zhí)行后面的代碼
// readyState==4
// 異步的定義：
// 請求數(shù)據(jù) 和 頁面的執(zhí)行 是互不干擾的
// 問題： 我怎么知道數(shù)據(jù)回來了？
// 利用回調(diào)函數(shù)
// onreadystatechange 在 準備狀態(tài) 發(fā)生改變時
// 狀態(tài)改變時，會自動調(diào)用這個函數(shù)
xhr.onreadystatechange = function() {
// xhr.readyState 準備狀態(tài)
// 0 還沒有發(fā)送請求
// 1 已經(jīng)發(fā)送請求，服務器還沒收到
// 2 服務器已經(jīng)收到請求，還沒有處理
// 3 服務器已經(jīng)處理好，并發(fā)送給客戶端
// 4 客戶端已經(jīng)收到數(shù)據(jù)
// console.log( xhr.readyState )
if (xhr.readyState == 4 && xhr.status == 200) {
console.log( "2" );
// console.log( xhr.responseText );
}
}
xhr.send();
// 1, 2
// 因為異步執(zhí)行，所以不影響 主程序的運行，同時 網(wǎng)絡傳輸是比較慢的，
// 所以數(shù)據(jù)是需要隔一段時間才過來，所以先執(zhí)行1，再執(zhí)行2
console.log("1");
// 4. 獲取數(shù)據(jù)
// console.log( xhr.responseText );
}
三、 JSON數(shù)據(jù)格式 JSON，JavaScript對象表示法(JavaScriptObjectNotation)
JSON和XML比較
1、JSON 長度和XML比起來很短小
2、JSON的讀寫速度更快，數(shù)據(jù)格式比較簡單，易于讀寫，格式都是壓縮的，占用帶寬?。?br>
3、JSON可以直接用JavaScript內(nèi)建的方法進行解析，轉(zhuǎn)化成JavaScript對象。
4、JSON解析：eval和JSON.parse
eval
var jsonObi = eval('(' + jsonData + )');
JSON.parse
var jsonObj = JSON.parse(jsonData);
四、ajax跨域
JavaScript出于同源策略的限制，不可以跨域。
跨域的解決方法:
1.代理
后端處理
2.其他方式的跨域
img 可以跨域
css 文件也可以跨域
script 也可以跨域
