写了一小段代码，是用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. java 为啥变量名前要加个m?

    用m_开头表示类的成员变量,member的意思如果是全局变量,则由g_开头还有常量c_开头 静态变量s_开头

  2. JMeter学习（三十一）Access Log Sampler

    前提: 在tomcat\conf\server.xml默认情况下,会有一段代码: <Valve className="org.apache.catalina.valves.Access ...

  3. $apply方法的作用

    $apply方法是用来触发脏检查,它在控制器里监听一个变量,每当这个变量的值改变的时候,它会去与最初的值做一次比较,然后HTML页面就会及时更新该变量的值(将最新的值赋值到html页面的view层或M ...

  4. Window.open()方法参数详解

    Window.open()方法参数详解 1, 最基本的弹出窗口代码   window.open('page.html'); 2, 经过设置后的弹出窗口   window.open('page.html ...

  5. f2fs解析（七）node管理器中的 free_nid 结构体

    除了node_info之外, node管理器中还有还有个重要的数据结构: struct free_nid { struct list_head list; /* for free node id li ...

  6. [转]redis.conf的配置解析

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...

  7. react native 布局注意点

    一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...

  8. 卫星轨道和两行数据TLE

    最近由于Sino-2和北斗的关系,很多网友贴了表示卫星运行轨道的TLE数据.这里想对卫星轨道参数和TLE的格式做一个简单介绍.虽然实际上没有人直接读TLE数据,而都是借助软件来获得卫星轨道和位置信息, ...

  9. C#使用IrisSkin2.dll美化WinForm程序界面

    一.添加控件IrisSkin2.dll. 方法:         1.右键“工具箱”.“添加选项卡”,取名“皮肤”.         2.右键“皮肤”,“选择项”弹出对话框        3.点击“浏 ...

  10. [C#]動態叫用Web Service

    http://www.dotblogs.com.tw/jimmyyu/archive/2009/04/22/8139.aspx 摘要 Web Service對大家來說想必都不陌生,也大都了解Web S ...