一、Ajax

我們對Ajax一定不會陌生，異步發送請求獲取數據，這是我們前端與後臺服務器交互的重要的手段，那麽對於ajax我們需要了解什麽呢？

我們手寫一個ajax，這樣就能夠基本了解使用了ajax了。

 1 var xhr = new XMLHttpRequest(); // XMLHttpRequest是ajax最重要的api
 2 
 3 xhr.open("GET", "/admin/user");
 4 
 5 xhr.onreadystatechange = function() {
 6     if (xhr.readyState == 4 && xhr.status == 200) {
 
 7         console.log(xhr.responseText);
 8     }
 9 }
10 
11 xhr.send();

這是一個最基本的一個ajax的流程，我們需要new一個XMLHttpRequest來進行操作，針對IE的有兼容性的操作，ActiveXObject()，這和W3C標準不一樣，了解記住就行。

使用open()方法去打開一個ajax請求，第一個參數是請求的方法，第二個參數是請求的地址，第三個請求是是否異步，默認為異步。接下來說一說代碼中的那些狀態碼是代表什麽當xhr.readyState變化的時候都會觸發xhr.onreadystatechange。而readyState總共有5種狀態：

1. 未初始化：就是還沒有調用send方法，狀態碼為0
2. 載入：已經調用了send方法，正在發送，狀態碼為1
3. 完成：send已經執行了，已經接收到相應了，狀態碼為2
4. 解析：解析相應的內容，狀態碼為3
5. 全部完成：解析完成，可以在客戶端調用了，狀態碼為4

而status是http的狀態碼，相信大家都不會陌生，經常在瀏覽器會看見404的狀態碼，這就是這個狀態碼了。

1. 2xx：表示成功
2. 3xx：需要重定向
3. 4xx：客戶端錯誤，比如404就是客戶端請求錯誤，服務器沒有這個東西
4. 5xx：這代表是服務器的錯誤

以上就是關於ajax的基礎的知識了。

二、跨域

那麽什麽是跨域呢？其實我在工作中也會遇到跨域的問題，其實只要公司有一定的規模，那麽跨域是不可避免的，那麽什麽是跨域，該怎麽解決呢，下面我就來說說自己的理解。

首先，我們要知道瀏覽器有同源策略，不允許ajax去訪問其他域的接口，這也是瀏覽器出於安全性的考慮，那什麽情況是跨域呢？下面我們來看例子：

1 http://www.link1.com/index.html
2 http://link2.com/a/ajaxsource?id=1234
3 
4 //  當我們在第一個頁面發送ajax請求去訪問第二個，這就不行，域名不同，瀏覽器限制不能去訪問

那麽跨域的條件是什麽，只要協議、端口、域名之中有一個不同那麽就算是跨域。瀏覽器這麽做確實能保證安全性，但是在實際的工作中，我們會有pc端移動端或者還有其他的域名，這時候我們需要用ajax去訪問接口，問題就出現了，由於是不同的域名，這樣的異步請求就會被視為跨域。那麽我們要怎麽去解決呢，在html中，我們對於資源的加載是可以跨域加載的，比如說img標簽的資源下載，當然了還有script和link標簽中對於資源的加載。

img可以用與打點統計，在有些網站下面有個站長統計，這就是利用了img的加載策略。link和script可以使用CDN，這也是跨域。大家都了解的jsonp也是使用的script標簽來進行跨域的。

線面我們說一說JSONP的實現原理，我們將要請求的數據的地址變成一個js的文件，通過script標簽去加載這個文件，這個js會返回一個函數比如說callback()，裏面就是我們想要請求的數據。我麽看一下代碼:

1 //  在自己的代碼中寫一個函數，這個函數雙方共同約定的名字，同時對方要同意你的跨域加載，
      你才能獲取到數據
2 var callback = function(res) {
3     var data = res;
4 }
5 
6 //  使用script標簽去獲取數據
7 <script src="http://link1.com/user.js"></script>
8 //  我們接受的這個js會包含一個函數callback({name: "juke", age: 21})
9 //  返回的這個函數會去執行我們定義的函數，那麽我們就拿到了他傳給我們的參數，也就是我
      們想要獲取到的數據

同時還有一種跨域的策略是http的header，可以設置白名單，或者請求方法等等，有興趣的可以去了解了解。

js之Ajax與跨域