在浏览器端才有跨域安全限制一说,而在服务器端是没有跨域安全限制的。

在两个异构系统(开发语言不同)之间达到资源共享就需要发起一个跨域请求。

而浏览器的同源策略却限制了从一个源头的文档资源或脚本资源与来自另一个源头的资源进行交互。在请求协议、端口以及域名(主机)相同时才是同一个源,否则不是同一个源,js无法访问不是同源的资源。

通过js发起跨域请求需要进行改造,或先将请求发到同源的服务器中,然后服务器内部进行转发请求,再将数据转发到前端进行展示。

通过Jsonp发起跨域请求 >>

Jsonp是json的的一种使用模式,jsonp基于js,如果没有js的环境就没有jsonp。jsonp能简单的解决跨域问题,主要是利用了js的一个“漏洞”,使用<script>标签的src属性来连接到不同源的服务器,并接收后台返回的数据。

第一种用法:

利用<script>标签src属性发起请求。

<script>
//回调函数
function test (result) {
alert(result.key);
var data = JSON.stringify(result); //json对象转成字符串
alert(data);
}
$(document).ready(function () {
$("#btn").click(function () {
//向头部输入一个脚本,该脚本发起一个跨域请求 test 用来包裹json串
<script src='http://localhost:9090/student?callback=test'></script>
});
});
</script>

在另一端服务器接收"test"参数并处理请求,返回一个jsonp格式即可形成一个跨域请求。

返回数据格式:test({"key":"value"})

以上这种写法是基本写法,需要自己写脚本发起请求,还要写个函数来处理数据,比较麻烦。

第二种用法:

通过jQuery发起Ajax请求的方式。

<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:8080/itemData",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
jsonp: "callback", //指定参数名称(习惯一般用callback名,不写该行默认参数名就是callback参数)
jsonpCallback: "test", //指定回调函数名称
success: function (data) { //后台返回一个json数据
alert(data.key);
}
});
});
});
</script>

后台不改变还是以上的那种,需要拼接个jsonp格式的数据即可。

设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

第三中用法:

通过$.getJSONP() 方法。该方法是jQuery对ajax的一种高级封装。有些$.ajax api底层的参数就被封装而不可见了。

<script>
//第一参数链接,第二个参数函数名称自定义
$.getJSONP(url,test);
</script>

跨域请求方式之Jsonp形式的更多相关文章

  1. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  2. 跨域请求解决方法(JSONP, CORS)

    1.跨域 假设我们页面或者应用部署在 http://www.aaa.com 上了,而我们打算从 http://www.bbb.com 请求提取数据.一般情况下,如果我们直接使用 AJAX 来请求将会失 ...

  3. 使用jsonp进行跨域请求

    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...

  4. Javascript跨域请求的几种解决方法

    什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...

  5. jquery post跨域请求数据

    原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Co ...

  6. 【fetch跨域请求】cors

    当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing) 请求fetch const body = {name:"Good boy ...

  7. ajax本地跨域请求以及解决方法

    什么是跨域?   我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...

  8. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  9. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

随机推荐

  1. Qt ------- QMap和QHash的区别

    基本概念: QMap提供了一个从类项为key的键到类项为T的直的映射,通常所存储的数据类型是一个键对应一个值,并且按照Key的次序存储数据.同时这个类也支持一键多值的情况,用类QMultiMap可以实 ...

  2. 用HTML5 File API 实现截图粘贴上传、拖拽上传

    <!DOCTYPE html><html><head> <title>test chrome paste image</title> < ...

  3. 关于jmf不能播放mp3的问题解决

    想写个JAVA的MP3音乐管理器,使用JMF插件,但发现运行时总报一个异常: Unable to handle format: mpeglayer3, 44100.0 Hz, 16-bit, Ster ...

  4. Android数据过滤器:Filter

    类图: 通常可以将SearchView和ListView结合,实现数据的搜索和过滤. 1.监听SearchView,SearchView.setOnQueryTextListener(OnQueryT ...

  5. web性能优化方向

    1.服务器结构: ip负载均衡->缓存服务器->Nginx反向代理->应用服务器->数据库 2.博客链接:http://mp.weixin.qq.com/s?__biz=MzA ...

  6. LightOJ 1028 - Trailing Zeroes (I) 质因数分解/排列组合

    题意:10000组数据 问一个数n[1,1e12] 在k进制下有末尾0的k的个数. 思路:题意很明显,就是求n的因子个数,本来想直接预处理欧拉函数,然后拿它减n就行了.但注意是1e12次方法不可行.而 ...

  7. [Luogu 3973] TJOI2015 线性代数

    [Luogu 3973] TJOI2015 线性代数 这竟然是一道最小割模型. 据说是最大权闭合子图. 先把矩阵式子推出来. 然后,套路建模就好. #include <algorithm> ...

  8. 利用forEach循环Dom元素…

    大家都知道forEach是循环数组用的,而且很方便,可以丢掉for循环了,但是它不能循环Dom元素.其实我们可以利用call来完成forEach循环Dom; 假设有这样的HTML结构: <ul ...

  9. 【BZOJ】2502 清理雪道

    [算法]有源汇上下界最小流 [题解]上下界 初看以为是最小覆盖,发现边可以重复经过,不对. 要求所有边都经过……那就下界为1,上界为inf的可行流. 源汇……S连入度为0的点,T连出度为0的点?(反正 ...

  10. Python3 shelve模块(持久化)

    shelve模块 也可以序列化Python所有数据类型,而且可以多次序列化;shelve模块通过key-value方式持久化 1.序列化 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...