同源策略(Same origin policy)是一種約定,它是瀏覽器最核心也最基本的安全功能,若是缺乏了同源策略,則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的,瀏覽器只是針對同源策略的一種實現。css
同源策略,它是由Netscape提出的一個著名的安全策略。html
如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指,域名,協議,端口相同。json
例如:跨域
http://www.baidu.com 和 http://www.baidu.com:8080 兩者是不一樣源的。 http://www.baidu.com和https://www.baidu.com 一樣是不一樣源的。
當請求不一樣源的數據的時候,瀏覽器就會在控制檯報出一個異常,而且提示拒絕訪問。同源策略是瀏覽器的行爲,是爲了保護本地數據不被JavaScript代碼獲取回來的數據污染,所以攔截的是客戶端發出的請求回來的數據接收,即請求發送了,服務器響應了,可是沒法被瀏覽器接收。瀏覽器
JSONP(JSON with Padding)是JSON的一種「使用模式」,可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略,通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通,而 HTML 的 元素是一個例外。利用 元素的這個開放策略,網頁能夠獲得從其餘來源動態產生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON,而是任意的JavaScript,用 JavaScript 直譯器執行而不是用 JSON 解析器解析。安全
主要藉助百度搜索的API
,調用時會存在跨域問題,須要經過JSONP來解決這個問題:服務器
http://suggestion.baidu.com/su
想要使用這個接口須要設置兩個參數:app
wd 要搜索的內容 cb 回調函數
<input type="search" name='p' id="p" placeholder="請輸入搜索內容"> <button id="btn">點擊搜索</button> <ul id="list"> <!-- <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> --> </ul>
let lis = document.getElementById('list'); let p = document.getElementById('p'); //callback回調函數 爲了直觀的把後臺數據顯示到網頁中 function fn(data) { let html = ''; for (let i = 0; i < data.s.length; i++) { html += `<li><a href="http://www.baidu.com/s?wd=${data.s[i]}">${data.s[i]}</a></li>`; // html += `<li><a href="http://www.baidu.com/s?wd=${data.s[i]}">${data.s[i]}</a></li>`; } lis.innerHTML = html; } //獲取按鈕 let btn = document.getElementById('btn'); btn.onclick = function() { let info = p.value; // console.log(info); let url = "http://www.baidu.com/s?wd=" + info; window.location.assign(url); } //獲取搜索框 p.onkeyup = function() { lis.style.display = 'block'; if (this.value !== "") { let script = document.createElement('script'); script.src = "http://suggestion.baidu.com/su?wd=" + this.value + "&cb=fn"; document.body.appendChild(script); } else { lis.style.display = 'none'; } }