js之Ajax與跨域

標籤：返回   利用   log   htm   get   是什麼   min   nbsp   ade   

一、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.html2 http://link2.com/a/ajaxsource?id=12343 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與跨域