JavaScript：使用原生JS實現Jsonp跨域，呼叫百度搜索介面完成聯想詞功能

阿新 • • 發佈：2018-12-15

Jsonp解釋

Jsonp這個術語聽起來很高大上，其實它的原理非常簡單，就是利用src不受同源策略限制這一點來實現的，很多標籤都有src特性。

你們可以想想為什麼img標籤能將不同源的百度logo拿過來？

<img src="https://www.baidu.com/img/bd_logo1.png" alt="">

Jsonp原理

一、src不受同源策略的限制，不受跨域的影響，所以可以藉助script中的src屬性進行跨域獲取資料。

二、所以將資料放到伺服器上，並且資料為json形式，因為js可以輕鬆處理json資料。

三、由於我們動態建立的script標籤是一個非同步載入的過程，不確定資料什麼時候回來，所以要做個處理，在前端寫好一個function並將函式名傳給伺服器，後端拿到函式名，完成一個拼接 functionName(parameter)，將json資料以入參的方式放置在function中，生成js語法的文件，返回給客戶端。此時客戶端繼續解析，將json資料作為引數，傳入之前定義好的callback函式中。

四、所以根據第三步，需要先寫好函式來處理跨域獲取的資料。

五、用src獲取資料的時候，在url後邊新增一個引數，例如cb = xxx，服務端會將cb的值，對應為一個函式，將引數插入到其中，例如 xxx(parameter)

注意

基於JSONP的實現原理,所以JSONP只能是“GET”請求,不能進行較為複雜的POST和其它請求,所以遇到那種情況,就得參考CORS解決跨域了(所以如今它也基本被淘汰了)。

下面程式碼演示如何使用Jsonp來實現跨域請求百度搜索介面，完成聯想詞功能，這裡先用原生JS來實現，能更好理解實現原理。在jQuery的ajax裡封裝了Jsonp和CORS跨域解決辦法，後期會進行講解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索框</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        input{
            width: 400px;
            height 
: 34px;
        }
        ul{
            display: none;
            width: 400px;
            border: 1px solid #ccc;
        }
        li{
            margin-left: 10px;
            margin-top: 3px;
        }
        .wrapper{
            margin: 100px;
        }
        a{
            text-decoration: none;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="wrapper">
<input type="text">
<ul>

</ul>
</div>
<script src="jquery.js"></script>
<script>
    function ds(data) {
        console.log(data)
    }

    /*通過jsonp訪問百度伺服器，獲取搜尋聯想詞*/
    var oInput = document.getElementsByTagName("input")[0];
    
    oInput.oninput = function () {
        var value = this.value;
        var oScript = document.createElement("script");
        //wd=關鍵字，doJson=執行函式名，這裡要保證傳的是函式名的字串！！！
        oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+ value +"&cb=doJson&_=1544270132010";
        //這裡將插入以聯想詞陣列為引數的名為doJson的js檔案，馬上執行
        document.body.appendChild(oScript);
        //執行完以後又馬上移除掉
        document.body.removeChild(oScript);
    };
    
    function doJson(data) {
        var s = data.s;
        $("ul").empty();
        //當輸入值過多時，s的聯想詞會匹配不到
        if(s.length > 0){
            s.forEach(function (ele,index) {
            var a = $("<a></a>").attr("href","https://www.baidu.com/s?wd=" + ele);
            a.text(ele);
            $("<li></li>").append(a).appendTo($("ul"));
            });
            $("ul").css("display","block");
        }else{
            $("ul").css("display","none");
        }
    }
</script>
</body>
</html>

JavaScript：使用原生JS實現Jsonp跨域，呼叫百度搜索介面完成聯想詞功能

Jsonp解釋

Jsonp原理

注意

JavaScript：使用原生JS實現Jsonp跨域，呼叫百度搜索介面完成聯想詞功能

利用原生js實現ajax跨域請求資料

原生JS實現Ajax跨域請求flask響應內容

爬蟲任務二：爬取(用到htmlunit和jsoup)通過百度搜索引擎關鍵字搜取到的新聞標題和url，並保存在本地文件中（主體借鑒了網上的資料）

java呼叫百度搜索+Jsoup實現網路資源收集

實現類似百度搜索框中模糊提示功能

java 實現DFA 算法（理論百度搜索）

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

node實現jsonp跨域

tp5+ajax 實現jsonp跨域

jsonp實現仿百度搜索（跨域訪問）

案例：原生JS實現360開機動畫

前端開發人員必知：三分鐘瞭解JSONP跨域請求的前世今生！

js中jsonp跨域請求

跨域請求（使用jsonp實現跨域請求）百度地圖api證逆地址解析獲取周邊資訊（pois）

【練習】angularjs（最基本的$http使用jsonp跨域，使用jsonp跨域獲取天氣（採用百度地圖天氣api），路由功能實現單頁面不跳轉切換）

js實現非同步跨域上傳

原生JS實現百度搜索功能

Jsonp跨域，Ajax淺述

JavaScript：使用原生JS實現Jsonp跨域，呼叫百度搜索介面完成聯想詞功能

Jsonp解釋

Jsonp原理

注意

相關推薦