手寫實現ajax的實現過程及ajax跨域

1、手寫ajax的實現過程，不依賴任何第三方庫

主要考察XMLHttpRequest 對象，它用於在後臺與服務器交換數據
版本ie使用ActiveXObject對象，該方法沒有做兼容（根據目前行情，不需要了）

var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.onreadtstatechange = function () {
    if (xhr.readystate == 4) {
        //響應內容解析完成，可以在客戶端調用了
        if (xhr.status == 200) {
            //客戶端的請求成功了
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);

關於狀態碼的說明：

2、什麼是ajax跨域及解決方法？

• 什麼是ajax跨域？

  瀏覽器有同源策略，不允許ajax訪問其他域名下的接口數據

  所有的跨域請求都必須經過信息提供方允許，如果未經允許就能獲取，那是瀏覽器同源策略出現的漏洞。

  跨域條件：請求url中協議、域名、端口任何一個不同，都屬於跨域

• 有三個標籤允許跨域加載，瀏覽器不會限制
  <img src="">
  但是，圖片提供方可以通過判斷請求url是否屬於公司內部域名，來確定是否返回正確圖片（比如百度圖片設置，僅百度可見），以此來做防盜鏈處理
  <img>可以用來打點統計，統計網站可能是其他域

  <link href="">
  鏈接css

  <script src=""></script>
  鏈接js

  <link>和<script>可以使用cdn，cdn也是其他域

• 跨域解決方法？

  前端：使用jsonp
  服務器端：設置http header

  前端使用 jsonp：
  

  比如需要 跨域 訪問a.js ：http://aaa.com/a.js (注意: 服務器端不一定真實存在這個a.js，可以動態生成一個文件數據，然後返回給客戶端)

  那麼,

  前端需要和後端約定一個傳入的參數字段，比如, jsonpCallback : jsonp1
  然後前端要定義一下jsonp1這個函數
  而後端返回這個函數的調用, 參數即是前端要獲得的數據

  看例子:

<script>
    function jsonp1(data) {
        //這是跨域訪問得到的數據
        console.log(data);
    }
</script>

//a.js的內容返回jsonp1的調用,比如: jsonp1({"code":0,"name":"cp"})
<script src = "http://aaa.com/a.js"></script>

  後端設置http header

這句話:

response.setHeader("Access-Control-Allow-Origin","http://a.com, http://b.com");

設置添加可以訪問某個接口數據的網站, 比如a.com和b.com