跨域解決方案之JSONP,經過藉助調用百度搜索的API瞭解跨域案例

跨域解決方案之JSONP

同源策略

同源策略(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介紹

JSONP(JSON with Padding)是JSON的一種「使用模式」,可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略,通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通,而 HTML 的 元素是一個例外。利用 元素的這個開放策略,網頁能夠獲得從其餘來源動態產生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON,而是任意的JavaScript,用 JavaScript 直譯器執行而不是用 JSON 解析器解析。安全

JSONP之百度小案例

主要藉助百度搜索的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>
  • 下面是js代碼:
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';
        }
    }
相關文章
相關標籤/搜索