為什么會有跨域問題？ - 因為有同源策略

同源策略是瀏覽器的一種安全策略，所謂同源指的是 請求URL地址中的 協議, 域名 和 端口 都相同，只要其中之一不相同就是跨域

同源策略主要為了保證瀏覽器的安全性

在同源策略下，瀏覽器 不允許 Ajax跨域獲取服務器數據

http://www.example.com/detail.html

跨域請求：

ajax的基本概念

了解這個概念，首先得先知道同步交互與異步交互

ajax主要的應用場景：頁面不刷新，就可以與服務器進行動態的數據交互

交互的原理

我們所有的交互操作都可以通過這個對象來完成，發送請求，接受服務器的數據

ajax的具體應用場景

XMLHttpRequest 交互的四個步驟

      1，實例化XMLHttpRequest 對象

      2，想和服務器進行交互，必須和服務器打開一個連接

      3，給服務器發送數據，發送參數數據到服務器

      4，接受服務器返回的數據，服務器在返回給客戶端的時候會返回一些狀態，可以通過監聽服務器狀態的改變，來更好的操控整個交互流程

ajax跨域

跨域：假設我訪問 a 站點，后臺返回給我一個頁面，然后我又想在 a 站點的這個頁面去訪問 b 站點的資源，這就是一個跨域的效果，跨域瀏覽器是有安全限制的

解決·跨域的方式：jsonp方式

JSONP 全稱是 JSON with Padding ，是基于 JSON 格式的為解決跨域請求資源而產生的解決方案。他實現的基本原理是利用了 HTML 里 <script></script> 元素標簽，遠程調用 JSON 文件來實現數據傳遞。如要在 a.com 域下獲取存在 b.com 的 JSON 數據( getUsers.JSON )：

jsonp解決跨域的本質原理：由于瀏覽器有同源限制，不同站點之間不能相互訪問，但是有時候我們就是想要獲取其他站點的數據，比如加入我們想要獲取一下急速數據的天氣預報數據，這肯定跨域了，那么我們該怎么辦呢？

原理：就是動態創建<script>標簽，然后利用<script>的src 不受同源策略約束來跨域獲取數據。

這樣在后臺就可以獲取到前臺傳過來的那個回調函數，，最后后臺返回這個函數的調用，參數為前臺請求的數據

js代碼

<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>

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com