第一步/獲取瀏覽器內(nèi)置的ajax請求對象
//如果不適配IE5/IE6這種很老版本的瀏覽器的話
Ajax.js function createAjax() {
var xhr = new XMLHttpRequest();
return xhr;
}
//適配IE5/IE6
Ajax.js function createAjax() {
var xhr ;
if(window.XMLHttpRequest){
//所有現(xiàn)代瀏覽器 (IE7+披蕉、Firefox尚氛、Chrome、Safari 以及 Opera) 都內(nèi)建了 XMLHttpRequest 對象。
xhr = new XMLHttpRequest();
}else { //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
第二步/ 使用xhr對象
1、使用這個XHR對象作同步的get請求
var xhr = new XMLHttpRequest();
xhr.open('get', 'url', false);
xhr.send(null);
if (xhr.status >= 200 && xhr.status < 300) || xhr.status(304)
{
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
首先用第一步的方法創(chuàng)建出一個xhr對象
然后調(diào)用xhr對象的open方法發(fā)起一個請求：xhr.open('get', 'example.php', false);第一個參數(shù)是請求類型（get/post）,第二個參數(shù)是請求的url路徑，第三個參數(shù)代表是否是異步請求（true-異步茧吊，false-同步）；
在然后就是調(diào)用xhr的send方法發(fā)送數(shù)據(jù)：xhr.send(null);也可以把數(shù)據(jù)拼接在url后面八毯，比如：usl搓侄？username=root&passwrod=123
最后通過xhr的status屬性判斷是否發(fā)送成功：200 表示成功， 304 表示緩存话速，其他表示返回失敗讶踪。
2、使用這個XHR對象作異步的get請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.status === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
}
};
xhr.open('get', 'example.txt', true);
xhr.send(null);
Ajax 請求都是異步發(fā)送的泊交，這個時候我們需要用到另外一個 XHR 對象的屬性 readtstatechange
乳讥，通常當(dāng)它的值為 4 的時候筹麸，表示所有數(shù)據(jù)已經(jīng)接受到了。
3雏婶、使用這個XHR對象作Post請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.status === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
{
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
}
};
xhr.open('post', 'example.php', true);
var form = document.getElementById('user-info');
xhr.send(serialize(form));
POST 請求是把數(shù)據(jù)作為請求的主體去提交的，所以我們的數(shù)據(jù)一般是在 send方法里面發(fā)出的
serialize()方法通過序列化表單值白指，創(chuàng)建標(biāo)準(zhǔn)的URL編碼文本字符串留晚，它的操作對象是代表表單元素集合的jQuery 對象。你可以選擇一個或多個表單元素（比如input或文本框）告嘲，或者 form 元素本身错维。序列化的值可在生成 AJAX 請求時用于 URL 查詢字符串中
第三步/ 關(guān)于send方法發(fā)送數(shù)據(jù)
1、用于發(fā)送數(shù)據(jù)的FormData類
var data = new FormData();
data.append('name', 'Steven');
xhr.send(data);
2橄唬、serialize方法序列化表單
可以選擇一個或多個表單元素（比如input或文本框）赋焕，或者 form 元素本身
var form = document.getElementById('user-info');
xhr.send(serialize(form));
重要的一點：
跨域請求
然而 Ajax 并不是萬能的，有時候我們想要異步獲取其他網(wǎng)站的數(shù)據(jù)的時候仰楚，就會返回失敗隆判，這是因為 XHR 對象只能訪問與包含它頁面位于同一個域中的資源。那我們要怎么辦呢僧界？
CORS
跨源資源共享標(biāo)準(zhǔn)通過新增一系列 HTTP 頭侨嘀，讓服務(wù)器能聲明哪些來源可以通過瀏覽器訪問該服務(wù)器上的資源。主要有三種：
通過使用 Origin 和 Access-Control-Allow-Origin 就可以完成最簡單的跨站請求捂襟。不過 Access-Control-Allow-Origin 需要為 * 或者包含由 Origin 指明的站點咬腕。
“預(yù)請求”要求必須先發(fā)送一個 OPTIONS 請求給目的站點，來查明這個跨站請求對于目的站點是不是安全可接受的葬荷。這樣做涨共，是因為跨站請求可能會對目的站點的數(shù)據(jù)造成破壞。
一般而言宠漩，對于跨站請求举反，瀏覽器是不會發(fā)送憑證信息的。但如果將XMLHttpRequest的一個特殊標(biāo)志位設(shè)置為true扒吁，瀏覽器就將允許該請求的發(fā)送照筑。
圖片Ping
在使用圖片的時候，我們的<img>
中的src
屬性也可以使用任何網(wǎng)頁的鏈接瘦陈，意味加載這一類請求無需擔(dān)心是否跨域凝危。常常用于動態(tài)創(chuàng)建圖像，或者跟蹤用戶點擊頁面晨逝，動態(tài)廣告曝光次數(shù)等蛾默。
JSONP
JSONP 是 JSON with padding 的縮寫，意思是填充式的 JSON捉貌，同圖片 Ping 一樣支鸡，<script>
的src
屬性也是可以跨域的冬念，因此通過動態(tài)創(chuàng)建一個<script>
元素獲取我們所需要的資源。
不同于圖像 Ping 只返回圖片牧挣，JSONP 可以直接訪問相應(yīng)文本急前。只需要在添加 URL 的時候添加查詢參數(shù)即可，看起來會像下面這個樣子：
http://freeeoip.net/json/?callback=handleResponse
// 或者 PHP 形式的
http://test.com/bookservice.php?callback=displayBooks
其中賦值給callback
的表示指定的調(diào)用函數(shù)瀑构，完整的 JSONP 如下：
// 處理返回數(shù)據(jù)的請求
function handleResponse(data){
alert('Your city is in' + data.city + data.country);
}
// 動態(tài)生成 JSPONP 請求
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
好處： 雙向通信裆针，可以跨域
壞處：無法識別惡意代碼，無法知道是否獲取失敗
