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

2022-12-22 23:50:00

跨域解決方案之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';
        }
    }

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