jsonp的原理

动态创建一个script标签,然后在全局声明一个函数用来接收数据。

用处:解决主流浏览器不能进行跨域数据访问的问题。

依据:由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

以下是实现在自己新建的页面,利用ajax和jsonp模拟百度的搜索下拉菜单.

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=show这个是百度搜索API接口

代码部分如下:

<script type="text/javascript">
$(function(){
  var oInput=$('input');
  var oUl=$('ul');
  oInput.keyup(function(){
    var str=oInput.val();
    $.ajax({
      url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
      data:{
        wd:str
      },
      dataType:'jsonp',
      jsonp:'cb',
      success:function(res){
        oUl.html();
        $.each(res.s,function(){
          oUl.append($('<li>'+this+'</li>'));
        })
      }
    })
  })
})
</script>

<body>
  <input type="text" name="search">
  <ul>
  </ul>
</body>

原文地址:https://www.cnblogs.com/zhangchuangye/p/6792691.html