jsonp跨域

一个简单的本地jsonp跨域的小例子

1.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="content">
    <title>
        src的jsonp格式跨域
    </title>
</head>
<body>
<script type="text/javascript">
    function so(a){
        alert(a.name);
    }
</script>
<script type="text/javascript" src='http://www.shop.com/1.js'></script>
</body>
</html>

1.js

so({
    name:'niniubi',
    erbier:'haishiniubi';
});

 

弹出 结果

 

 

 

 

<!-- 仿搜狗搜索jsonp跨域.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索引擎</title>
</head>
<body>
    <h1>搜索引擎</h1>
    搜索引擎:<input type="text" name="name" onkeyup="so()">
    <ul></ul>
</body>
<script type="text/javascript">
    function so(){
        var inp = document.getElementsByTagName('input')[0];
        var url = 'https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&word='+inp.value;
        //console.log(url);
        var sc = document.createElement('script');
        sc.src = url;
        document.getElementsByTagName('head')[0].appendChild(sc);
    }
    function suggest_so(text){
        var html = '';
        for(var i=0;i<text.result.length;i++){
            html = html + '<li>'+text.result[i].word + '</li>';
            //<li>hao123</li><li>hm中国官网</li>
        }
        document.getElementsByTagName('ul')[0].innerHTML = html;
    }
</script>
</html>

 


结果如下:

 

posted @ 2016-11-30 20:48  岁月静好13543  阅读(162)  评论(0编辑  收藏  举报
AmazingCounters.com