更新于

JQ jsonp大揭秘(跨域真理)

发布于 / 分类: 锋利的JQuery / 暂无评论 / 阅读量: 790

如果要在jq里进行跨域,一般来说只有使用jsonp,另一种方式则是进行中间层欺骗,也就是所谓的反代。

这里我们主要讲讲json是怎么回事

基本json

实现jsonp全部都是使用带有src标签的元素,一般默认使用script元素,在src链接地址中,在地址后面加上?name=value&callbakc=hd;其中name=value是传值,而callbakc=hd则是回调,在本地js全局作用域下创建一个名为hd的函数。

var script = document.createElement("script");
script.src = "xxxx?callback=hd";
document.getElementsByTagName('head')[0].appendChild(script);


//回调函数
function hd(data) {
  console.log(data);
}

//或者使用变量名赋值
var hd = function(data) {
  console.log(data);
}

重点就是这个回调函数,hd带有一个参数,这个参数就是服务器通过动态创建并返回给你的,因为script元素在加载完毕后执行内部代码,而内部等于hd(data),就是一个执行hd的代码段,于是你之前创建的hd函数成为了回调函数并运行。

注意:因为json的文件格式js是支持的,所以回调函数执行后并不会提示警告,而如果服务器动态创建给你的是html类型的文件,那么虽然能通过script元素加载运行,但是会提示你(即使其 MIME 类型(“text/html”)不是有效的 JavaScript MIME 类型,仍已加载来自xxx的脚本)

这里就有人想了,那jq不是有一个dataType的属性吗,可以告诉服务器我期望返回的文件类型,然而这种想法是不对的,我们下面来讲到他真正的作用。

jq的jsonp

$.ajax({
     url:'xxx',
     type : 'GET',
     data:{
          key : "xxx",
          com : "xxx",
          no : "xx"
      },
    dataType : 'jsonp',
    success:function(data){
          console.log(data);
      }
})

这是一个标准的jq的jsonp格式,这里我们没有给url加上callback但是依旧会成功,原因就是我们声明了期望返回的格式为‘jsonp’,然而实际上并没有这种格式,jsonp只是一个名称,一般来说他应该是一个js文件,或者是一个json格式的文件,而我们设置jsonp实际上是给jq用于判断该用什么方式来获取。

那么jq会先创建一个script元素,其src=xxx?key=xxx&com=xxx&no=xxx&callback=?,然后插入head中,加载完毕运行后再remove()删除;

为此我还特意去截了下图:

这里我们可以看到callback=?变成了callback=JQueryxxxxx跟了一大串字符,这个实际上就是jq自己随机创建的回调函数名,在没有指定回调函数名的情况下,JQueryxxxxx == success 里的函数,如果指定了,那就等于指定的函数。

自定义jsonp回调函数

比如我指定他的回调函数要是qiaolima,那么使用jsonpCallback属性

$.ajax({
     url:'xxx',
     type : 'GET',
     data:{
          key : "xxx",
          com : "xxx",
          no : "xx"
      },
    dataType : 'jsonp',
    success:function(data){
          console.log(data);
      },
    jsonpCallback : 'qiaolima'
})

//注意这个函数必须为全局函数,不能写在
//$(document).ready(function(){//不能写在这里}),
//而是要在外面
function qiaolima(data) {
  alert(data)
}

这里再讲一下callback=?的效果,jq会自动判断,将?替换为函数,如果没有指定回调函数名,会自己随机生成一个名称,就是刚刚JQueryxxxx这一大段,然后这个函数就是success设置的函数,意思如下:

var JQueryxxxxx = function(data){
      console.log(data);
}
//这个赋值的匿名函数就是success的值

深层解析

到了这里就可以进行更深层的剖析,先看个例子

$.ajax({
   url:'xxxx?callback=?',
      data:{
          key : "xxx",
          com : "xxx",
          no : "xxx"
      },
  dataType : 'json',
  success:function(data){
          console.log(data);
      }
})

我使用这段代码依旧可以跨域成功,为什么?

不同处之

  1. 之前讲的dataType用于给jq来判断是不是jsonp,但是这里我没有使用
  2. 我们给url加上了callback=?

原理 :

dataType 是用来告诉jq我即将返回的数据类型是什么,从而使用对应的方法,而json和jsonp实际上都是可以在script执行的文件类型,jq则会使用script元素去获取,如果我们指定为xml,这次jsonp就会失败,因为jq不会用带有src的元素去get获取了,不信可以自己试试,你会发现head不会插入script元素。

根据我的测试,当我们指定dataType 为:jsonp/json的时候会采用script元素作为载体。

使用script只是其中的一小步,更重要的则是callback=?,jq会自动判断,如果当前的url有callback=?这段文字,就是自动将?替换为正确的函数名,上面也说过,可以指定或者jq自己创建名称。

于是这两个条件都达到了,便可以跨域成功。

拓展思维

我们知道$.get(),$.post(),$.getJSON(),这三个方法是基于$.ajax()而来的,加上他们的第三个参数data同样是一个发送到服务器的数据,使用{}对象的形式,那么上面的方式我们还可以这样写

$.get({
    url:'xxx',
    data:{
        key : xxx,
        com : xxx,
        no : xxx
    },
    dataType:"jsonp",
    success:function(data){
        console.log(data);
    }
});

虽然jq规定第一个参数url是必须的,但是如果我们只传一个对象,对象里面加上url依旧可以成功运行。

在使用$.getJSON()方法实现上面的效果我们设置可以省略书写dataType。(因为该方法默认dataType:‘json’)

而$.getScript()虽然也是基于$.ajax,但是他是使用xhr对象作为载体,然后加载完毕后用eval()方法运行,所以你看不到有额外的script元素加入dom中去,为此无法适用jsonp,包括给dataType设置为script也是不行的,他们是相等的效果,除非你把dataType设置为json或者jsonp,那样就没有必要了,强行是不可取的。

以上就是关于jq的jsonp跨域的理解,有需要可以一起探讨。

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有393条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买