写了一小段代码，是用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对象不能跨域获取数据？！的更多相关文章

  1. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  2. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  3. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

  4. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  5. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

  6. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  7. jQuery使用ajax跨域获取数据

    var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld";  jQuery.support.cors = ...

  8. java之初识服务器跨域获取数据

    当一个项目膨大到无法进行整理时,而作为新负责维护的团队是非常苦恼的.对于想实现两个系统的数据访问,使用Ajax数据请求方式获取jsonp格式的数据 需要有前端jquery库文件. 前端代码通过jque ...

  9. .net mvc 几种跨域获取数据方案

    方案一: 在web.conflg配置文件system.webServer节点中添加以下节点配置 <!--允许 "所有网站" 跨域访问写法:--><httpProt ...

随机推荐

  1. 保存带有emoji的文本报错解决方案

    今天偶然遇到一个错误,就是保存文本的时候带有了emoji表情,报错了 java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x8A\ ...

  2. RabbitMQ 一二事(3) - 订阅模式（微信公众号模式）的应用

    之前讲的消费者互相可以把队列中的消息全部读取,但是不是读完整的所有信息 那么采用订阅模式就行,这就是微信公众号的模式, 比如10个人订阅了我的公众号"BeJavaGod",当我发送 ...

  3. Git版本控制工具（一）----git的安装及创建版本库

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  4. Hibernate Java、Hibernate、SQL 之间数据类型转换

    Hibernate映射类型 Java类型 标准SQL类型  integer  java.lang.Integer  integer  long  java.lang.Long  bigint  sho ...

  5. sqlzoo.net刷题

    只发后面提升题目的题解,前面的太简单,写下来也没有意义 12.查找尤金•奧尼爾EUGENE O'NEILL得獎的所有細節 Find all details of the prize won by EU ...

  6. php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项

    php 上传大文件主要涉及配置 upload_max_filesize 和post_max_size两个选项   今天在做上传的时候出现一个非常怪的问题,有时候表单提交可以获取到值,有时候就获取不到了 ...

  7. 【转】【C#】【Thread】【Parallel】并行计算

    并行计算 沿用微软的写法,System.Threading.Tasks.Parallel类,提供对并行循环和区域的支持. 我们会用到的方法有For,ForEach,Invoke. Program.Da ...

  8. Linux Shell编程二

    以"``"符号包含的内容不是字符串,而是代表这是一个shell命令. echo "today is" `date` 前面是字符,后面`date`表示执行date ...

  9. Linux非root用户安装jdk和tomcat

    转载自:http://blog.csdn.net/wuyigong111/article/details/17410661,进行部分修改 创建一个用户 sgmm,并在其用户目录里面安装 jdk和tom ...

  10. QuickFIX/J常见问题汇总

    最近在搞QuickFIX/J,网上的资料不算很多,遇到一些简单的问题都需要google一阵才能找到解决方法,因此做点记录: 错误:Rejecting invalid message: quickfix ...