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 ...
随机推荐
- bootstrap学习总结-css组件(三)
今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...
- flex+AS3编程规范
flex+AS3编程规范 Flex+AS3编码规范 http://www.cnblogs.com/jiahuafu/ 1. 缩写: 尽量避免使用缩写,使用缩写时尽量和Flex保持一致.但要记住一 ...
- Jenkins遇到问题三：调整jdk版本不生效的解决办法
由于项目统一环境的需要,需要将jdk版本从1.7降到1.6,通过修改“系统管理”菜单下的“系统设置”下的jdk环境变量: 将红圈中的路径修改为jdk6,如图所示:保存退出:发现通过”读取设置“和重启j ...
- java9-9 匿名内部类
1. 匿名内部类 就是内部类的简化写法. 前提:存在一个类或者接口 这里的类可以是具体类也可以是抽象类. 格式: new 类名或者接口名(){ 重写方法; } new Xxx()是创建了一个对象,而抽 ...
- 给 IIS Express 配置虚拟目录
使用 vs2015 打开旧项目,之前使用 iis 配置站点,然后在 vs 中附加 w3wp.exe 进行开发和调试的. 由于种种原因 iis 上配置站点各种失败. 之后发现,其实在 vs2015 中按 ...
- LUA 协程
LUA协程和C#协程非常相似,功能与用法更强大.基础用法: coco = coroutine.create(function (a,b) print("resume args:". ...
- Python自动化测试 (二) ConfigParser模块读写配置文件
ConfigParser 是Python自带的模块, 用来读写配置文件, 用法及其简单. 直接上代码,不解释,不多说. 配置文件的格式是: []包含的叫section, section 下有op ...
- HTTP协议简介1
概念 HTTP协议:超文本传输协议,用于服务端传输超文本到客户端的传输协议.是一个应用层协议. 工作流程 一次http请求就是一个事务.过程可分为四步: 1.客户端与服务器建立链接.页面上单击某个链接 ...
- 在matlab中进行遥感影像地理坐标的相互转换
在matlab中进行图像处理,一般使用的都是图像本地坐标,以左上角(1,1)开始.处理完成后,如果要将结果在带地理坐标的遥感影像中显示,或者需要输出成shp文件,就需要涉及到本地坐标和地理坐标的转换, ...
- C语言操作符优先级
C语言操作符优先级 优先级 运算符 含 义 要求运算 对象的个数 结合方向 1 () [] -> . 圆括号 下标运算符 指向结构体成员运算符 结构体成员运算符 自左至右 2 ! 逻辑非运 ...