这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

直接用ajax调用不同域的数据:

调用的文件

文件内容


<html>
<head>
<title>跨域测试_ajax</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script> $(function() {
$("#but").click(function(){
$.ajax({
type:"post",
url:"http://localhost:8081/category2.json",
success:function(data){
/* console(data); */
$("#text").html(data);
}
})
}) })
</script> </head>
<body>
<button type="button" id="but">获取跨域的数据</button> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body>
</html>

 

报错:Failed to load http://localhost:8081/category2.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9003' is therefore not allowed access.

跨域请求被拒绝,其实数据已经获取成功了,只不过是被浏览器给拒绝了

通过js引用将数据引进来:

 <html>
<head>
<title>跨域测试-引用js片段的形式将数据引进来</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script>
//回调函数
function service (result) {
var data = JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}
</script> </head>
<body> 跨域的数据:<textarea id="text" style="width: 400px; height: 100px;"></textarea> <!-- 要在上面的回调函数、文本域标签加载完了再跨域引用 -->
<script src='http://localhost:8081/category2.json'></script>
</body>
</html>

页面

数据获取成功

所以通过http://localhost:8081/category2.json得到的js文件,就是我们之前定义的service函数,并且它的参数就是我们需要的json数据,这样我们就跨域获得了我们需要的数据。

这样jsonp的原理就很清楚了,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

其实ajax有对jsonp的访问进行处理:

<html>
<head>
<title>跨域测试_ajax</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script> $(function() {
$("#but").click(function(){
$.ajax({
url:"http://localhost:8081/category2.json",
dataType: 'jsonp',
// jsonp: 'callback', //为服务端准备的参数
jsonpCallback: 'service', //回调函数
success:function(){
/* console(data); */ }
})
})
})
function service(data){
var str=JSON.stringify(data);
$("#text").text(str);
}
</script> </head>
<body>
<button type="button" id="but">获取跨域的数据1111</button> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body>
</html>

这样也可以获取到数据

js跨域请求jsonp解决方案-最简单的小demo的更多相关文章

  1. JS跨域请求 JSONP B/S全代码

    Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...

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

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

  3. 第四节:跨域请求的解决方案和WebApi特有的处理方式

    一. 简介 前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...

  4. js跨域请求的5中解决方式

    跨域请求数据解决方案主要有如下解决方法: ? 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.J ...

  5. JS跨域:jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  6. jquery跨域请求jsonp

    服务端PHP代码  header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...

  7. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  8. 浏览器同源策略,跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  9. js跨域请求解决方案

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.&l ...

随机推荐

  1. http协议以及get和post请求

    HTTP协议是网络传输信息的一种规范. 就好比两个人之间的交流,甲只会讲英语,乙只会说汉语,结果是他们必然无法开怀畅谈. HTTP协议也类   GET 请求获取 Request-URI 所标识的资源 ...

  2. ESP32 DAC

    ESP32有两个DAC通道,通道1链接GPIO25, 通道2链接GPIO26; 当DAC设置为 “built-in DAC mode”的时候,I2S可以通过DAC发送数据: 使用示例: dac_out ...

  3. 软概(lesson 1):Javaweb实现用户登录界面

    一.问题描述 二.网站系统开发所需要的技术 网站界面开发:html 后台所需要的技术:java基本内容,数据库语句,连接数据库实现增删改查 本题所用技术:数据库链接以及增加功能,基本html语句 技术 ...

  4. [04] 高级映射 association和collection

    之前我们提到的映射,都是简单的字段和对象属性一对一,假设对象的属性也是一个对象,即涉及到两个表的关联,此时应该如何进行映射处理? 先看两张表,author 和 book:    业务上对应关系为,一个 ...

  5. 初学Python,对于开发工具不是很了解?一文带你选择适合你的开发工具

    工欲善其事必先利其器!想要获取更多的开发工具安装包.安装教程,可以加群:725479218, 开发Python用什么工具好呢?其实刚学Python的话,使用IDLE就够了,虽然调试不是特别方便,但是对 ...

  6. 欧拉函数(小于或等于n的数中与n互质的数的数目)&& 欧拉函数线性筛法

    [欧拉函数] 在数论,对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命名,它又称为Euler’s totient function.φ函数.欧拉商数等. 例如φ( ...

  7. CentOS 7 安装Redis

    Linux安装Redis 一.下载并安装 $ wget http://download.redis.io/releases/redis-2.8.17.tar.gz $ tar xzf redis-2. ...

  8. Aop笔记

    参考: https://blog.csdn.net/bombSKLK/article/details/79143145 示例 拦截的 注解的方法 @Around("@annotation(c ...

  9. 针对Nginx日志的相关运维操作记录

    在分析服务器运行情况和业务数据时,nginx日志是非常可靠的数据来源,而掌握常用的nginx日志分析命令的应用技巧则有着事半功倍的作用,可以快速进行定位和统计. 1)Nginx日志的标准格式(可参考: ...

  10. wordcount程序

    wordcount程序算是相比于前几次作业来说比较难得一个作业了.进行了一次真的自己编写程序.WC程序实现了对txt文件中的数据的计数,算出程序中有多少单词.字符数以及行数.这次的程序编程是采用的C语 ...