zoukankan      html  css  js  c++  java
  • jsonp跨域请求,动态script标签实现跨域

    1、什么是跨域

    首先一个域名地址的组成是:

    http://www.xxx.com:8080/xxx/xxx.jsp

    协议子域名主域名端口号请求资源地址

    当协议、子域名、主域名、端口号中任意一个不相同时,都算作是不同域。

    不同域之间相互请求资源,就算作“跨域”。而这是被浏览器的安全机制所禁止的。

    2、这里要说的是处理跨域其中一个方法——jsonp

    jsonp可用于解决主流浏览器的跨域数据访问的问题,其中的原理是利用<script>元素的跨域能力

    科普基础知识:web页面上凡是拥有“src”这个属性的标签都拥有跨域的能力,比如<script>,<img>

    JSONP,JSON width Padding,采用json 作为传输数据的载体,具体的实现通过script标签跨域应用来完成。

    3、实现方法说明

    a,客户端(我的域名)页面代码控制

    b,服务端(提供服务和数据)的数据可控。

    4、举例实现方法

    <script type="text/javascript">

    //////////////////////////////////
    // jQuery的调用
    //////////////////////////////////
    $.ajax({
    crossDomain :true,
    url: 'http://s.weibo.com/ajax/jsonp/suggestion?key=a', //不同的域
    type: 'GET', // jsonp模式只有GET是合法的
    dataType: 'jsonp', // 数据类型
    jsonp: '_cb', // 指定回调函数名,与服务器端接收的一致,并回传回来
    success: function(data) {
    console.log(data);
    }
    });

    //////////////////////////////////
    // jsonp的原理
    //////////////////////////////////
    //服务器调用的全局函数,用来接受数据
    function getResult(o) {
    console.log(o.data);
    }

    </script>
    <script type="text/javascript" src="http://s.weibo.com/ajax/jsonp/suggestion?_cb=getResult"></script>

    例子中用的是微博API,查看更多http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI

  • 相关阅读:
    牛客小白月赛4-E-浮点数输出 字符串
    HDU 5319 Painter(模拟)
    AtCoder Regular Contest 098 D
    strchr函数的用法
    fgets()
    格式
    Uncaught TypeError: Cannot read property 'addEventListener' of null
    window cmd下常用操作
    nuxt导入css样式
    ERROR EPERM: operation not permitted, mkdir 'C:UsersAdministratorDesktop ext uxtasic.nuxtcomponents'
  • 原文地址:https://www.cnblogs.com/olivianate/p/5313783.html
Copyright © 2011-2022 走看看