Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ajax跨域请求json数据

ajax跨域请求json数据

作者头像
HHTjim 部落格
发布于 2022-09-26 03:01:22
发布于 2022-09-26 03:01:22
1.7K00
代码可运行
举报
文章被收录于专栏:HHTjim'S 部落格HHTjim'S 部落格
运行总次数:0
代码可运行

ajax跨域请求json数据

作者:matrix 被围观: 5,840 次 发布时间:2014-03-13 分类:零零星星 | 20 条评论 »

这是一个创建于 3094 天前的主题,其中的信息可能已经有所发展或是发生改变。

刚开始仅仅想获取一个他域的json数据,没想到牵扯到很多的问题。

每次都请求失败:

chrome面板的status为(canceled)

在Request Header这里显示CAUTION Provisional headers are shown

后来才知道是ajax跨域问题导致:

也就是ajax同源策略(同源是指域名,协议,端口相同)。 跨域可以实现在自己的网站之间传递数据。但是如果你想用“跨域”盗取其它网站的数据,那还是放弃吧。除非目标网站有给你提供JSONP的接口,或者有某些可以利用的漏洞,要不然真没什么办法实现。 跨域问题的产生,最主要原因是COOKIE的安全问题。因为COOKIE是属于一个域的,如果允许跨域,客户端浏览器上储存的COOKIE就可以被它的所有者之外的程序访问到。举个例子吧,假如没有跨域问题,我现在就可以给百度发送个HTTP请求,获取你在百度上登录的用户名。或者获取SessionID,直接冒充你的帐号登录。为了避免这些问题,所以跨域访问的限制是非常有必要的。

利用jsonp跨域

要跨域必须要有回调函数的接口,这里用jsonp试试

接口

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ajax.load(
url, // 跨越请求的URL
success, // 回调函数,必须定义一个形参,用于接收后台返回的全局变量jsonp (约定后台返回如jsonp = {...}结构)
timestamp, // 传true会加一个时间戳,防止缓存,默认不加
);

示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="http://files.cnblogs.com/snandy/sjax_0.1.js"></script>

<input type="button" value="Get Name" />
<script type="text/javascript">  
    function clk(){  
        Sjax.load(  
            'http://files.cnblogs.com/snandy/jsonp.js',   
            function(){  
                document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.name;  
            }  
        );        
    }  
</script>

DEMO

城通网盘:http://www.400gb.com/file/59748143

百度网盘:http://link.hhtjim.com/bdwl/1535826478/3238236832/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82%E4%B9%8B[jsonp](https://www.hhtjim.com/tag/jsonp).htm

说明:

请求的后台json地址是http://files.cnblogs.com/snandy/[js](https://www.hhtjim.com/tag/js)onp.js

内容为:jsonp = {name:'jack'};

其必须有“jsonp =”(作为回调函数接口),这个变量jsonp就是一个js对象。

DEMO的html实现一个简单的前后台交互功能,点击按钮“Get Name”,将获取到后台json数据上的name值显示在黄色背景的P标签上。

参考:

代码来源的Github项目:https://github.com/snandy/io

http://www.cnblogs.com/snandy/archive/2011/05/03/2034229.html

ajax如何跨域请求静态json:http://www.oschina.net/question/782091_89860

http://www.zhihu.com/question/19618769

http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

http://www.web-tinker.com/article/20019.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
AJAX跨域请求JSONP 原
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
tianyawhl
2019/04/04
1.1K0
第113天:Ajax跨域请求解决方法
第五步:在监听函数中,判断readyState=4&&status=200表示请求成功
半指温柔乐
2018/09/11
1.7K0
解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现。                var url="http://freegeoip.net/json/";                //创建xhr对象                function createCORSXhr(url,method){                     var xhr=new XMLHttpRequest();                     if("withCred
欲休
2018/03/15
1K0
解决ajax跨域请求  (总结)
剖析跨域问题始末及其解决方案——前端必备交叉知识(一)
在前端开发的旅程中,跨域问题无疑是一道难以逾越的高山。无论是初入职场的新手,还是经验丰富的老手,都可能在这座山前止步不前。跨域问题不仅在调试阶段频繁出现,更在正式环境的部署中如影随形,让开发人员头疼不已。今天,就让我们一起深入探讨跨域问题的根源,剖析其表现形式,并逐一攻克常见的跨域难题。希望这篇文章能成为你的指南,帮助你全面理解跨域及其解决方案,提升解决实际问题的能力。
watermelo37
2025/02/02
2200
剖析跨域问题始末及其解决方案——前端必备交叉知识(一)
ajax跨域解决方案domain_js解决跨域问题
JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
全栈程序员站长
2022/09/23
2.8K0
ajax跨域解决方案domain_js解决跨域问题
ajax跨域的解决办法_java如何解决跨域问题
大家好,又见面了,我是你们的朋友全栈君。 什么是跨域问题? 跨域问题来源于JavaScript的”同源策略”,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScrip
全栈程序员站长
2022/09/23
7980
JQuery的Ajax跨域请求的
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/115609.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/10
8970
ajax跨域,这应该是最全的解决方案了
前端爱好者的知识盛宴 嗨 这里是IMWEB 一个想为更多的前端人 享知识  助发展 觅福利 有情怀有情调的公众号 欢迎关注转发 让更多的前端技友一起学习发展~ 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。 个人见识有限,如有差错,请多多见谅,欢迎提出issue,另外看到这个标题,请勿喷~ 提纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域
用户1097444
2022/06/29
8490
ajax跨域,这应该是最全的解决方案了
Django之跨域请求
同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过JSONP或者CORS来实现了。 JSONP 什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。 那么JSONP是什么呢?  首先抛
人生不如戏
2018/05/30
1.5K0
ajax跨域的基本流程
创建XMLHttpRequest对象,也就是创建一个异步调用对象;判断XHR对象属性;创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息;设置响应HTTP请求状态变化的函数;发送HTTP请求;获取异步调用返回的数据;使用JavaScript和DOM实现局部刷新。
行云博客
2020/07/13
1.1K0
ajax cors跨域_jquery跨域
Jsonp 的实现原理就是:创建一个回调函数,然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递,完成回调。
全栈程序员站长
2022/09/23
3.1K0
ajax跨域问题以及解决方案_js跨域请求的三种方法
鼠标离开用户名输入框时,检查是否符合要求,如果为空,则给提示,如果不为空,则异步查询数据库,后返回结果;
全栈程序员站长
2022/09/23
3.7K0
ajax跨域问题以及解决方案_js跨域请求的三种方法
什么是跨域跨域解决方法_500错误原因解决方法
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
全栈程序员站长
2022/08/02
2.2K0
什么是跨域跨域解决方法_500错误原因解决方法
跨域请求的常用方式及解释
同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个域加载的脚本去获取另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。 js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。 只要协议、域名、端口有任何一个不同,都被当作是不同的域。 下面介绍几种常用的跨域请求方式 默认端口为:8080
柴小智
2018/04/10
1.5K0
跨域请求的常用方式及解释
js ajax 跨域问题 解决方案[通俗易懂]
跨域问题来源于JavaScript的”同源策略”,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题。
全栈程序员站长
2022/09/25
1.9K0
js ajax 跨域问题 解决方案[通俗易懂]
AJAX跨域完全讲解
AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候
Java3y
2018/03/15
8320
AJAX跨域完全讲解
ajax跨域问题-web开发必会
ajax跨域问题 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。 解决方式 通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发。二者各有利弊,具体要使用哪种方式还需要具体的分析。 服务器设置响应头 服务器代理 客户端采用脚本回调机制。 方式一 Access-Control-Allow-Origin 关键字只有在
Java帮帮
2018/03/19
1.8K0
ajax跨域问题-web开发必会
网站跨域的五种解决方式
等带有src属性的标签可以从不同的域加载和执行资源。其他插件的同源策略:flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略,只是这些同源策略不属于浏览器原生的同源策略,如果有漏洞则可能被黑客利用,从而留下XSS攻击的后患
云扬四海
2019/06/05
1.4K0
跨域问题
测试URL为 http://localhost:80/home/allProductions 可以直接在浏览器console中执行
微醺
2019/01/17
1.6K0
ajax跨域解决方案_java如何解决跨域问题
从刚接触前端开发起, 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。
全栈程序员站长
2022/09/23
1.2K0
ajax跨域解决方案_java如何解决跨域问题
相关推荐
AJAX跨域请求JSONP 原
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档