jsonp 實現跨域

時間 2019-11-08

標籤 jsonp 實現欄目 JSON 简体版

原文原文鏈接

爲何會出現跨域問題

跨域的安全限制都是對瀏覽器端來講的，服務器端是不存在跨域安全限制的。html

瀏覽器的同源策略限制從一個源加載的文檔或腳本與來自另外一個源的資源進行交互。web

若是協議，端口和主機對於兩個頁面是相同的，則兩個頁面具備相同的源，不然就是不一樣源的。ajax

解決跨域問題的方法:

1 flash (已經淘汰)json

2 服務器代理中轉跨域

3 jsonp 是數據交換的協議瀏覽器

4 document.domain(針對基礎域名相同的狀況)安全

如服務器

bj.58.com document.domain = 58.comapp

tj.58.com document.domain = 58.comdom

針對jsonp 解決跨域問題:

5 iframe 實現跨域

jsonp跨域原理:

1 web頁面中擁有"src"屬性的標籤都擁有跨域的能力,好比<script> <image><iframe>

2 因此,咱們將數據放到服務器上,而且數據爲json格式,(由於js 能夠輕鬆處理json數據)

3由於咱們沒法監控經過script 的src屬性是否把數據獲取完成,因此須要作一個處理

4實現定義好處理跨域獲取數據的函數,如function doJSON(data){};

5用src獲取數據的時候添加一個參數cb='doJSON'(服務端會根據參數cb的值返回對應的內容)

此內容爲以cb對應的值doJSON爲函數真實要傳遞的數據爲函數的參數的一串字符如doJSON('數據');

最簡單的原理,例如:

var oScript= document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=Anderson_An&cb=fn';
document.body.appendChild(oScript);
//聲明請求數據成功後執行的函數
function fn(data){
console.log(data);
}

ajax 與jsonp 的區別以及本質區別?

ajax 實現數據請求不能跨域,jsonp能夠實現跨域獲取數據

本質區別是二者實現的原理不一樣:ajax 是經過建立xmlHTTPRequest 來獲取內容,

而jsonp 的實現原理是經過,動態的添加script標籤,利用src屬性調用js 腳本實現;

一個小栗子實現跨域獲取百度智能輸入提示的功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box {
            margin: 100px;
        }
        #wd{
            width: 400px;
            height: 40px;
        }
        #list{
            display: none;
            width: 400px;
            border: 1px solid #ccc;
        }
        li{
            list-style: none;
            padding: 5px;
        }
        a{
            text-decoration: none;
            color: #333;
        }

    </style>
</head>
<body>
    <div id="box">
        <input type="text" id="wd">
        <ul id="list"></ul>      
    </div>

    <script>
        var wd = document.getElementById('wd');
        var oUl = document.getElementById('list');

        wd.oninput = debounce(getUserAction, 100, false);//給輸入綁定一個防抖事件
        function debounce(func, wait, immediate) {      
            var timer = null; 
            var result;
            var debounced = function () {
                var _this = this;
                var argu = arguments;
                clearTimeout(timer);
                if(immediate) {
                    if(!timer) func.apply(_this, argu);
                    timer = setTimeout(function () {
                        timer = null;
                    }, wait) 
                }else {
                    timer = setTimeout(function () {
                        func.apply(_this, argu);
                    }, wait)
                }
                return result;
            }
            debounced.cancel = function () {
                clearTimeout(timer);
                timer = null;
            }
            return debounced;
        }
        function getUserAction() {
            if(wd.value) {
                var oScript = document.createElement('script');//建立一個script標籤
                oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd.value +'&cb=doJson';
                document.body.appendChild(oScript);
                document.body.removeChild(oScript);
            }else {
                oUl.style.display = 'none';
            }
        }
        function doJson(data) {
            var dataList = data.s;//由於百度的提示字符保存在s下
            oUl.innerHTML = '';
            if(dataList.length == 0) {
                oUl.style.display = 'none';
            }else {
                dataList.forEach(function(item, index) {
                    var oLi = document.createElement('li');
                    var oA = document.createElement('a');
                    oA.href = 'https://www.baidu.com/s?wd=' + item;
                    oA.innerText = item;
                    oLi.appendChild(oA);
                    oUl.appendChild(oLi);
                    oUl.style.display = 'block';
                })  
            }
            
        }
    
    
    </script>
    
</body>
</html>

另外iframe 實現跨域

建立iframe 引用src 時末尾加一個' # '後面跟對應的要傳的值;

獲取方式:location.hash 就能夠獲取

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。