ajax跨域请求

作者: 鹿鹿鹿鹿鹿鹿鹿鹿鹿鹿鹿鹿鹿 | 来源:发表于2016-07-07 11:46 被阅读159次

ajax跨域请求(jsonp)

利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQuery

跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过

程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。

什么是跨域?

简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕

过同源策略限制,实现不同服务器之间通信的效果。

具体策略限制情况可看下表:

URL

说明

允许通信

http://www.a.com/a.js

http://www.a.com/b.js同一域名下

允许

http://www.a.com/lab/a.js

http://www.a.com/script/b.js同一域名下不同文件夹

允许

http://www.a.com:8000/a.js

http://www.a.com/b.js同一域名,不同端口

不允许

http://www.a.com/a.js

https://www.a.com/b.js同一域名,不同协议

不允许

http://www.a.com/a.js

http://127.0.0.100/b.js域名和域名对应ip

不允许

http://www.a.com/a.js

http://script.a.com/b.js主域相同,子域不同

不允许

http://www.a.com/a.js

http://a.com/b.js同一域名,不同二级域名(同上)

不允许

http://www.a.com/a.js

http://www.b.com/b.js不同域名

不允许

什么是JSONP?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模

式”,通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通

过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正

常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段

可执行的JavaScript代码。

举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:

1.{"id":123,"name":张三,"age":17}

那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:

当然,如果服务端考虑得更加充分,返回的数据可能如下:

这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo:

便可以使用foo函数来调用返回的数据了。

第一种方法是在ajax函数中设置dataType为'jsonp':

第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:

也可以简单地使用getScript方法:

在jQuery中如何通过JSONP来跨域获取数据

1.

2.

3.

4.

5.

6.

7.

$.ajax({

dataType:'jsonp',

url:'http://www.a.com/user?id=123',success:function(data){

}

});

//处理data数据

1.$.getJSON('http://www.a.com/user?id=123&callback=?',function(data){2.//处理data数据

3.});

//此时也可以在函数外定义foo方法

functionfoo(data){

//处理data数据

}

$.getJSON('http://www.a.com/user?id=123&callback=foo');

JSONP的应用

JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上而不是在

新浪微博的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博

开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。

function GetAjaxData() {

$.ajax({

type: "get",

async: false,

url: "http://localhost:4071/SearchBook.ashx",

dataType: "jsonp",

jsonp: "callback",//传递给请求处理程序或页面的,标识jsonp回调函数名(一般为:callback)jsonpCallback: "GetData",//callback的function名称

success: function (data) {

alert(data.BookName + " " + data.Pages);

},

error: function () {

alert('fail');

}

});

}

相关文章

  • 彻底让你明白跨域(服务器端为node)

    跨域只是针对ajax请求的。 如果产生跨域,那么将请求不到数据。 发起ajax请求所依赖的html页面的url地址...

  • 前端跨域

    什么是ajax跨域 ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参...

  • Ajax跨域请求与SpringMVC结合的一些坑

    Ajax跨域的概念就不在这边陈述了... Ajax跨域请求真正的请求之前会进行一次预请求OPTIONS请求,为了让...

  • SpringMVC 进行ajax跨域请求访问

    关于 springmvc 3.x 版本对ajax跨域请求访问 ajax 请求后,浏览器出现跨域的问题那么在当前环境...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 跨域

    什么是跨域? 为什么会发生ajax跨域?浏览器限制跨域【发出的请求不是本域】XHR请求【json】 解决思路:1:...

  • AJAX、Servlet允许跨域请求

    1.AJAX 2.Servlet允许跨域请求 1.AJAX AJAX = Asynchronous JavaSc...

  • 跨域CORS

    CORS全称是跨域资源共享(Cross-Origin Resource Sharing),用来解决AJAX跨域请求...

  • 跨域实战解决方案

    一.跨域方案 1.JSONP跨域 (1)前端发起jQuery ajax 的get请求 $.getJSON...

  • [JavaScript] jsonp

    由于同源策略的限制,ajax不能发送跨域请求。即,www.google.com域内的js,无法用ajax请求不是w...

网友评论

    本文标题:ajax跨域请求

    本文链接:https://www.haomeiwen.com/subject/nghljttx.html