ajax與jsonp跨域的本質原理
阿新 • • 發佈:2018-12-22
ajax的基本概念
瞭解這個概念,首先得先知道同步互動與非同步互動
- 同步互動:客戶端瀏覽器給伺服器傳送一個請求,伺服器返回一個頁面,返回的頁面會把之前的頁面覆蓋掉,我們把這種互動方式稱為同步互動
- 非同步互動:就是可會斷瀏覽器給伺服器傳送一個請求,伺服器返回資料,返回的資料不會把之前的頁面覆蓋掉,我們把這種互動方式稱之為非同步互動
ajax主要的應用場景:頁面不重新整理,就可以與伺服器進行動態的資料互動
互動的原理
同步互動原理:我們在瀏覽器,怎麼給伺服器傳送請求呢?可以點選超連結,提交表單,瀏覽器位址列輸入地址,都是給伺服器傳送請求,實際上是瀏覽器幫助我們給伺服器去傳送請求
非同步互動的原理:JavaScript給我們提供了一個新的API介面,幫我們去傳送http請求,由XMLHttpRequest 物件來幫助我們傳送請求
我們所有的互動操作都可以通過這個物件來完成,傳送請求,接受伺服器的資料
ajax的具體應用場景
- 前臺可以通過XMLHttpRequest 給伺服器傳送請求,然後再通過XMLHttpRequest 物件來接受伺服器返回的資料,最後通過dom操作把資料寫到頁面上
- ajax:可以用來表單輸入規範驗證
- ajax:也可以用來做效能優化,比如一個頁面非常龐大,這個頁面不可能一次載入完畢,實現一個滾動載入
XMLHttpRequest 互動的四個步驟
1,例項化XMLHttpRequest 物件
2,想和伺服器進行互動,必須和伺服器開啟一個連線
3,給伺服器傳送資料,傳送引數資料到伺服器
4,接受伺服器返回的資料,伺服器在返回給客戶端的時候會返回一些狀態,可以通過監聽伺服器狀態的改變,來更好的操控整個互動流程
ajax跨域
跨域:假設我訪問 a 站點,後臺返回給我一個頁面,然後我又想在 a 站點的這個頁面去訪問 b 站點的資源,這就是一個跨域的效果,跨域瀏覽器是有安全限制的
解決·跨域的方式:jsonp方式,
jsonp解決跨域的本質原理:由於瀏覽器有同源限制,不同站點之間不能相互訪問,但是有時候我們就是想要獲取其他站點的資料,比如加入我們想要獲取一下急速資料的天氣預報資料,這肯定跨域了,那麼我們該怎麼辦呢?
原理:就是動態建立
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script>