第一步/獲取瀏覽器內置的ajax請求對象

//如果不適配IE5/IE6這種很老版本的瀏覽器的話
Ajax.js function createAjax() {
   var xhr = new XMLHttpRequest();
   return xhr;
}

//適配IE5/IE6
Ajax.js function createAjax() {
   var xhr ; 
   if(window.XMLHttpRequest){ 
          //所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 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);
}

首先用第一步的方法創建出一個xhr對象
然后調用xhr對象的open方法發起一個請求：xhr.open('get', 'example.php', false);第一個參數是請求類型（get/post）,第二個參數是請求的url路徑，第三個參數代表是否是異步請求（true-異步，false-同步）；
在然后就是調用xhr的send方法發送數據：xhr.send(null);也可以把數據拼接在url后面，比如：usl？username=root&passwrod=123
最后通過xhr的status屬性判斷是否發送成功：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 請求都是異步發送的，這個時候我們需要用到另外一個 XHR 對象的屬性 readtstatechange
，通常當它的值為 4 的時候，表示所有數據已經接受到了。

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 請求是把數據作為請求的主體去提交的，所以我們的數據一般是在 send方法里面發出的

serialize()方法通過序列化表單值，創建標準的URL編碼文本字符串，它的操作對象是代表表單元素集合的jQuery 對象。你可以選擇一個或多個表單元素（比如input或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 請求時用于 URL 查詢字符串中

第三步/ 關于send方法發送數據
1、用于發送數據的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 并不是萬能的，有時候我們想要異步獲取其他網站的數據的時候，就會返回失敗，這是因為 XHR 對象只能訪問與包含它頁面位于同一個域中的資源。那我們要怎么辦呢？
CORS
跨源資源共享標準通過新增一系列 HTTP 頭，讓服務器能聲明哪些來源可以通過瀏覽器訪問該服務器上的資源。主要有三種：
通過使用 Origin 和 Access-Control-Allow-Origin 就可以完成最簡單的跨站請求。不過 Access-Control-Allow-Origin 需要為 * 或者包含由 Origin 指明的站點。

“預請求”要求必須先發送一個 OPTIONS 請求給目的站點，來查明這個跨站請求對于目的站點是不是安全可接受的。這樣做，是因為跨站請求可能會對目的站點的數據造成破壞。

一般而言，對于跨站請求，瀏覽器是不會發送憑證信息的。但如果將XMLHttpRequest的一個特殊標志位設置為true，瀏覽器就將允許該請求的發送。

圖片Ping
在使用圖片的時候，我們的<img>
中的src
屬性也可以使用任何網頁的鏈接，意味加載這一類請求無需擔心是否跨域。常常用于動態創建圖像，或者跟蹤用戶點擊頁面，動態廣告曝光次數等。
JSONP
JSONP 是 JSON with padding 的縮寫，意思是填充式的 JSON，同圖片 Ping 一樣，<script>
的src
屬性也是可以跨域的，因此通過動態創建一個<script>
元素獲取我們所需要的資源。
不同于圖像 Ping 只返回圖片，JSONP 可以直接訪問相應文本。只需要在添加 URL 的時候添加查詢參數即可，看起來會像下面這個樣子：

http://freeeoip.net/json/?callback=handleResponse
// 或者 PHP 形式的
http://test.com/bookservice.php?callback=displayBooks

其中賦值給callback
的表示指定的調用函數，完整的 JSONP 如下：

// 處理返回數據的請求
function handleResponse(data){
 alert('Your city is in' + data.city + data.country);
}
// 動態生成 JSPONP 請求
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);

好處： 雙向通信，可以跨域
壞處：無法識別惡意代碼，無法知道是否獲取失敗