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 ...
随机推荐
- codeforces 711A A. Bus to Udayland(水题)
题目链接: A. Bus to Udayland 题意: 找一对空位坐下来,水; 思路: AC代码: #include <iostream> #include <cstdio> ...
- POJ 1754 Splay
单点更新,区间最值,用来练Splay刚好. 将位置作为排序的规则,利用Splay不会改变顺序的特点,求某一段区间[l,r]的最值时,将l-1伸展到根,将r+1伸展到l-1的右子树,这时r+1的左子树就 ...
- 获取WIN10技术预览版
说明 这是一款预发行软件 在进行商业发行之前,我们可能会对 Windows Technical Preview 进行大量修改. Microsoft 不对此处提供的信息作任何明示或默示的担保. 有些产品 ...
- 酷派5890 ROM教程
一.前言 ROM出处:http://www.in189.com/thread-975035-1-1.html 名称:酷派5890官方056精简优化包V2.2,G卡可用+已ROOT+可用大运存 更新日期 ...
- java9-8 局部内部类
1. 局部内部类 A:可以直接访问外部类的成员 B:在局部位置,可以创建内部类对象,通过对象调用内部类方法,来使用局部内部类功能 面试题: 局部内部类访问局部变量的注意事项? A:局部内部类访问局部变 ...
- Ruby Web实时消息后台服务器推送技术---GoEasy
越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推 ...
- [应用层]mail邮件协议
转:http://***/chapter-14/ 以前老记不住这smtp和pop3谁收谁发. 简单邮件传输协议(SMTP),用来发送或中转发出的电子邮件,占用tcp 25端口. 第三版邮局协议(POP ...
- bootstrap modal的data-dismiss属性
<button type="button" class="btn default" data-dismiss="modal">关 ...
- Android开发探秘之二：导入存在的项目及其注意事项
网上看到有jsoup写的例子,就下载下来进行了研究,但是发现不会导入,于是就百度一下,发现了方法:也就是依次点击“File”->“Import”->“General”->“Exist ...
- 如何加速MATLAB代码运行
学习笔记 V1.0 2015/4/17 如何加速MATLAB代码运行 概述 本文源于LDPCC的MATLAB代码,即<CCSDS标准的LDPC编译码仿真>.由于代码的问题,在信息位长度很长 ...