2015-10-12 |

ajax跨域JSONP教程

深入浅出-ajax跨域JSONP教程

什么是跨域?说直白点就是获取别人网站上的内容。但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子。

来看看跨域的例子,jquery+ajax是不能跨域请求的,因为受到浏览器的同源策略的限制,会报错。

Javascript - 由浅入深学习ajax跨域JSONP

错误:

Javascript - 由浅入深学习ajax跨域JSONP

但是script标签的src是具有跨域能力的,还有img的src属性一样,都能够获取从别人网站的内容。在没说道JSONP之前,我们可以用静态的script标签加上src去获取:

Javascript - 由浅入深学习ajax跨域JSONP

这里的a.js

Javascript - 由浅入深学习ajax跨域JSONP

结果:

Javascript - 由浅入深学习ajax跨域JSONP

在这里说明,a.js是在本地服务器里的,而测试文件并不在本地服务器中,也就是说他们的域是不同的。这段代码也相当于把跨域了的js文件加载到测试中间中了,相当于调用了这个函数。

而JSONP的原理也是类似的,只不过采用的是动态创建script标签:

Javascript - 由浅入深学习ajax跨域JSONP

将静态的替换为了动态的而已。这就是jsonp的原理了吧,我是这么认为的。原生的使用起来总是这么麻烦。

那么将其结合jquery来使用会是怎样?

Javascript - 由浅入深学习ajax跨域JSONP

这里的jsonpCallback是用来指定回调方法,这里我为什么填了一个aaa呢?因为是我随便填的,在这里并没有多大意义,因为我并没有定义aaa函数,所以,当我没有定义aaa函数的时候,jquery会自动匹配函数success:function(json){ }。但如果我定义了aaa呢?如图:

Javascript - 由浅入深学习ajax跨域JSONP

显示的结果没变,还是

Javascript - 由浅入深学习ajax跨域JSONP

因为涉及跨域的问题还有一个jquery方法可以实现,那就是$.getJSON,只不过不能指定回调函数,在这里就不演示了,用法都是一样的,来张图:

Javascript - 由浅入深学习ajax跨域JSONP

有的同学能会遇到这样的问题,就是返回的状态码已经是200了,并且也能看到返回的数据,但浏览器会报错,并且$.ajax执行的回调函数是error,并不是success

Javascript - 由浅入深学习ajax跨域JSONP

Javascript - 由浅入深学习ajax跨域JSONP

Javascript - 由浅入深学习ajax跨域JSONP

那是因为没有理解JSONP的运行原理,它的原理是把远程的数据当作javascript来运行的,到这里就很有必要说一下远程的php代码了,报错的同学的php代码可能是这样的,返回json格式数据

Javascript - 由浅入深学习ajax跨域JSONP

但你发现没有,在ajax请求的时候,我们发送给服务器一个回调函数的名字,默认都是callback,就是这句: jsonp: “callback”,有的同学刚开始肯定没理解,再看看正确的php代码:

Javascript - 由浅入深学习ajax跨域JSONP

我们默认就将callback函数发送过去了,并返回了形如 函数名(json数据),这也就是我们前端说的JSONP的原理所在,是以js代码运行的,就相当于把这个函数加载到文件中调用了这个回调函数,对吧?慢慢理解。

再来说说区别,ajax和jsonp,有人说(我之前也这么认为),ajax可以通过请求本地的php,用php去抓取别人网站的数据,再显示,那算不算跨域呢?我觉得算是,对此我也不很清楚,若有大侠见此,能否为我指点迷经。但是jsonp是直接请求跨域的php文件而不是本地,但说到底,ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

或许,也可以这样说,ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

我似乎还是没有理解透彻,希望大侠到此指点指点。致敬。

发表评论

    评价:
    验证码: 点击我更换图片