跨域解決方案之JSONP，通過借助調用百度搜索的API了解跨域案例

跨域解決方案之JSONP

同源策略

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

同源策略，它是由Netscape提出的一個著名的安全策略。

現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。

例如：

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

想要使用這個接口需要設置兩個參數：

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';
        }
    }