zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    mybatis(八)手写简易版mybatis
    mybaits(七)spring整合mybaits
    Java学习之String StringBuffer StringBuilder区别
    Java学习之基本概念
    java多态
    HashMap变成线程安全方法
    java高级开发工程师面试题
    同步和异步
    Oracle创建索引的原则(转)
    导入maven工程错误
  • 原文地址:https://www.cnblogs.com/barry1102/p/6792245.html
Copyright © 2011-2022 走看看