XMLHTTPRequest对象不能跨域获取数据？！
写了一小段代码，是用XMLHTTPRequest对象来获取数据的，在本地服务器中，运行的很顺利，但是转向实际服务器（实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来），运行就跑不起来了。
这就涉及到跨域获取数据的问题了。
我运行时的环境是这样的：
本地服务器运行当前代码、转向http://gumball.wickedlysmart.com获取一个json文件过来。
结果：报错。
XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource.......
什么是跨域获取对象呢？意思就是说，你现在所在的页面是属于本地服务器A的，但是你要获取远方的服务器B的数据，此时就属于跨域获取数据了。我刚才说的问题，转向实际服务器就不可以运行代码了。
原来呢是因为这是浏览器安全策略，专门设计用来避免恶意的Javascript访问你的web页面和用户的cookie。所以呢，如果你的要访问的数据跟你的不是在同一个服务器下，使用XMLHTTPRequest是会被拦截住的。
浏览器获取获取数据的两种流行方法：
XMLHTTPRequest、JSONP
XMLHTTPRequest获取过来的是字串，需要使用JSON.parse()解析结果；
JSONP是使用HTML中的<script>标记来获取数据，返回的是对象；
既然使用XMLHTTPRequest不能获取到数据，所以就使用其他方法，使用JSONP来获取数据更加好。为什么呢？原因就是JSONP是基于Javascript的，返回到的就是一个对象。
这是处理更新的一个方法：
function handleRefresh(){
var url = "http://gumball.wickedlysmart.com" + //此时我们把url写在了这个方法，而不是在<head>中的<script>标记中写入url地址
"?callback=updateSales" +
"&lastreporttime=" + lastReportTime +
"&random=" + (new Date()).getTime();
var newScriptElement = document.createElement("script"); //需要动态创建<script>，因为每次一个就只能发送一个请求，由于需要时时更新，所以就使用动态创建
newScriptElement.setAttribute("src", url);
newScriptElement.setAttribute("id", "jsonp");
var oldScriptElement = document.getElementById("jsonp");
var head = document.getElementsByTagName("head")[0];
if(oldScriptElement == null){ //判断是追加或者是替换
head.appendChild(newScriptElement);
}else{
head.replaceChild(newScriptElement,oldScriptElement);
}
XMLHTTPRequest对象不能跨域获取数据？！的更多相关文章
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- jsonp跨域获取数据小解
jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...
- jsonp跨域获取数据实现百度搜索
本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...
- jQuery使用ajax跨域获取数据
var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = ...
- java之初识服务器跨域获取数据
当一个项目膨大到无法进行整理时,而作为新负责维护的团队是非常苦恼的.对于想实现两个系统的数据访问,使用Ajax数据请求方式获取jsonp格式的数据 需要有前端jquery库文件. 前端代码通过jque ...
- .net mvc 几种跨域获取数据方案
方案一: 在web.conflg配置文件system.webServer节点中添加以下节点配置 <!--允许 "所有网站" 跨域访问写法:--><httpProt ...
随机推荐
- [Hadoop]如何安装Hadoop
Hadoop是一个分布式系统基础架构,他使得用户可以在不了解分布式底层细节的情况下,开发分布式程序. Hadoop的重要核心:HDFS和MapReduce.HDFS负责储存,MapReduce负责计算 ...
- UESTC 918 WHITE ALBUM --生成树变形
最小生成树变形. 题目已经说得很清楚,要求到达每个房间,只需求一个最小生成树,这时边权和一定是最小的,并且那k个房间一定与所有点都有通路,即一定都可以逃脱. 但是有可能当所有点都有了该去的安全房间以后 ...
- C/C++学习----C语言简介
[开发环境] 物理机版本:Win 7 旗舰版(64位) IDE版本:Visual Studio 2013简体中文旗舰版(cn_visual_studio_ultimate_2013_with_upda ...
- AC日记——导弹拦截 洛谷 P1020 (dp+模拟)
题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...
- GetComponent
GetComponent 的几种写法: 1.AutoRotation cmp1=(AutoRotation) GetComponent(typeof(AutoRotation)); 2.AutoRot ...
- NSDictionary(key与value)
1.key与value关系,用一个key的值控制整个模型 NSDictionary *dic = @{@"channelKey":channelModel,@"chann ...
- ssh scp 复制文件和文件夹
三,复制文件或目录命令: 复制文件: (1)将本地文件拷贝到远程 scp 文件名用户名@计算机IP或者计算机名称:远程路径 本地192.168.1.8客户端 scp /root/install ...
- 以下是关于ASP.NET中保存各种信息的对象的比较，理解这些对象的原理，对制作完善的程序来说是相当有必要的(摘至互联网,并非原创--xukunping)
在ASP.NET中,有很多种保存信息的对象.例如:APPlication,Session,Cookie,ViewState和Cache等,那么它们有什么区别呢?每一种对象应用的环境是什么? 为了 ...
- js控制只能输入数字和小数点
非常好用,代码示例如下: <input onkeypress = "return event.keyCode>=48&&event.keyCode<=57 ...
- python大数据工作流程
本文作者:hhh5460 大数据分析,内存不够用怎么办? 当然,你可以升级你的电脑为超级电脑. 另外,你也可以采用硬盘操作. 本文示范了硬盘操作的一种可能的方式. 本文基于:win10(64) + p ...