区分同源与非同源
博客专区 > 沉非 的博客 > 博客详情
区分同源与非同源
沉非 发表于5个月前
区分同源与非同源
  • 发表于 5个月前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

JSONP和AJAX相同,都是客户端向服务器端发送请求:1、给服务器端传递内容2、从服务器端获取数据 的方式

AJAX属于同源策略

JSONP属于非同源策略(跨域请求) -> 实现跨域请求的方式有很多种,只不过JSONP是最常用的

区分同源和非同源:

当前页面的地址   &&  数据请求的接口地址

    1)协议  2)域名或者IP 3)端口号

    以上三部分完全相同属于同源策略,就是用AJAX技术请求数据,如果有一个不同就属于非同源策略,一般使用JSONP技术请求数据

JSONP的原理:JSONP请求一定需要对方的服务器做支持才可以

在script的世界中,没有同源跨域这一说,只要你给我src属性中的地址是一个合法的地址,script都可以把对应的内容请求回来,JSONP就是利用了script的这个原理
    1、首先把需要请求数据的那个跨域的API数据接口的地址赋值给script的src属性中

    2、把当前页面中的某一个函数名当做参数值传递给需要跨域请求数据的服务器(url问好传参:callback=fn)

    3、服务器接收到请求后,需要进行特殊的处理,把你传递进来的函数名和它需要给你数据拼接成一个字符串, 例如:我们传递进去的函数名是fn,它准备好的数据是"fn([{'name':'xxx'}])"

    4、最后服务器把准备的数据通过HTTP协议返回给我们客户端,客户端发现其实就是让我们的fn执行,而且还给fn传递了一堆的数据,那些数据就是我们想要的

jquery的ajax和JSONP的调用

    ajax:

    $.ajax({

        url:"",

        type:"",

        dataType:"json",

        data:null,

        async:true,

        timeout: 1000,  //设置超时时间,一般都设置3000ms

        cache:false, //设定get请求的时候不走缓存数据,原理就是在url后面加一个缓存数,默认值是true

        success:function(data){},

        error:function(data){}

    })

jsonp:都是GET和异步请求的,不存在其他的请求方式和同步请求,而且jquery会默认会给JSONP的请求清除缓存

$.ajax({

        url:"",

        dataType:"jsonp",

        timeout: 1000,  //设置超时时间,一般都设置3000ms

       jsonpCallback:"fn" //自定义传递给服务器的函数名,而不是jquery自动生成的

        jsonp:"cb"  //吧传递函数名的那个形参callback变为cb

    })

    

 

 

 

标签: JSONP 跨域请求
共有 人打赏支持
粉丝 0
博文 29
码字总数 21463
×
沉非
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: