欢迎光临
我们一直在努力

JavaScript | jsonp的原理与实现

JSONP简介

jsonp是一种跨域通信的手段,他的实现过程分为三步:

1、首先利用script标签的src属性实现跨域

2、通过将前端方法作为参数传递到服务端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。

3、由于使用script标签的src属性,因此只支持get方法

实例展示

CSS及HTML部分

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .wrap{
        width: 600px;
        margin: 50px auto 0;
    }
    .search{
        width: 584px;
        height: 34px;
        font-size: 18px;
        padding: 0 6px;
    }
    .list li{
        line-height: 30px;
        padding: 0 10px;
        background-color: #ccc;
    }
    .list li:hover{
        background-color: #eee;
    }
    </style>
</head>
<body>
<div class="wrap">
    <input type="text" class="search">
    <ul class="list">
        <!-- <li>12306</li> -->
        <!-- <li>12315</li> -->
    </ul>
</div>
</body>

JavaScript部分

<script>
// 浏览器出于安全目的限制js跨域请求数据
var search = document.querySelector('.search');
var list = document.querySelector('.list');
search.onkeyup = function(){
    if(search.value === ''){
        list.innerHTML = '';
        return;
    }
    //利用script标签的src属性来实现跨域
    var newScript = document.createElement('script');
    //将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。
    newScript.src = 'http://suggestion.baidu.com/su?cb=callback&wd=' + search.value;
    document.body.appendChild(newScript);
    newScript.onload = function(){
        document.body.removeChild(newScript);
    }
}
function callback(json){
    list.innerHTML = '';
    json.s.forEach(function(item){
        list.innerHTML += '<li>'+ item +'</li>';
    })
}
</script>
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | jsonp的原理与实现
分享到: 更多 (0)

评论 抢沙发

5 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏