Ajax實現非同步請求步驟__Ajax

一、原生JS實現：

 

var request = new XMLHttpRequest();　　//建立XMLHttpRequest()對象

//啟動一個HTTP請求，但未發送請求到服務端，最後一個參數預設為false，非同步發送。
request.open("GET/POSt", url, true/false);　　//使用GET方法時直接在的url上傳遞參數。

//使用POST方法時要通過send方法傳遞參數給服務端
var data = "str";　　//str為擷取表單元素的值或其它需要更新的內容

//設定頭資訊，表明發送的是表單元素
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//發送請求到服務端
request.send(null/data);

//onreadystatechange事件會在readystate屬性改變時觸發，監控readyState屬性
request.onreadystatechange = function() {

//狀態代碼為4表示請求已完成，響應內容已就緒
  if (request.readyState === 4) {

    //狀態代碼304表示請求資源沒有被修改，可以使用瀏覽器緩衝
    if ((request.status >= 200 && request.status < 300) || request.status == 304) {

      //伺服器返回的是json對象，使用JSON.parse()方法格式化為js對象。
      var data = JSON.parse(request.responseText);

      if (data.success) {
        //處理響應成功返回的資料

　　　　
      } else {
        //處理響應失敗返回的資料

      }
    } else {
      //處理請求失敗返回的資料
    } 
  }
}

//前後端互動約定,約定success為true或者false時返回不同的資訊，
//通過success屬性可以方便前端調用返回的資訊。
{
  "success" : true,
  "msg": "xxx",
}

 

 

二、跨域解決方案

假設我們頁面或者應用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取資料。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤，"跨域"也就以此由來。CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標準，是跨源AJAX請求的根本解決方案。相比JSONP只能發GET請求，CORS允許任何類型的請求。
　　利用 CORS，http://www.test2.com 只需添加一個標題，就可以允許來自 http://www.test1.com 的請求，下圖是我在PHP中的 hander() 設定，“*”號表示允許任何域向我們的服務端提交請求：也可以設定指定的網域名稱，如網域名稱 http://www.test2.com ，那麼就允許來自這個網域名稱的請求：當前我設定的header為“*”，任意一個請求過來之後服務端我們都可以進行處理&響應，那麼在調試工具中可以看到其頭資訊設定，其中見紅框中有一項資訊是“Access-Control-Allow-Origin：* ”，表示我們已經啟用CORS，如下圖。正常使用AJAX會需要正常考慮跨域問題，所以偉大的程式員們又折騰出了一系列跨域問題的解決方案，如JSONP、CORS等等。

CORS與JSONP的使用目的相同，但是比JSONP更強大。JSONP只支援GET請求，CORS支援所有類型的HTTP請求。JSONP的優勢在於支援老式瀏覽器，以及可以向不支援CORS的網站請求資料。
JSONP的基本原理即是：利用HTML的<script>標籤可擷取任何來源JavaScript代碼的特點，實現資料的跨域訪問。在本地定義一個callback，通過<script>標籤的src屬性擷取遠程API的資料(將callback函數名傳遞過去)，遠程伺服器的API需要符合JSONP的規範，即將原本JSON格式的輸出資料改寫為javascript的函數調用代碼(callback為函數，原JSON資料為參數)；這樣API返回的不再是JSON格式的資料而是JavaScript的代碼。

script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script>  <script type="text/javascript">  $(function(){  $.ajax(      {          type:'get',          url : 'http://www.youxiaju.com/validate.php?loginuser=lee&loginpass=123456',          dataType : 'jsonp',          jsonp:"jsoncallback",          success  : function(data) {              alert("使用者名稱："+ data.user +" 密碼："+ data.pass);          },          error : function() {              alert('fail');          }      }  );  })  </script>  

跨域資源共用 CORS 詳解