手寫實現ajax的實現過程及ajax跨域
阿新 • • 發佈:2019-02-15
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