写了一小段代码，是用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. UVA 12382 Grid of Lamps --贪心+优先队列

    题意:给出每行每列至少有的灯泡数,问最少有的灯泡数. 解法:要使灯泡数尽量小,说明要使交叉点尽量多,这样即抵了行,又抵了列,为最优的.所以可以用行来消去列,也可以用列来消去行,我这里是列来消去行.首先 ...

  2. npm install时报错 npm ERR！Windows_NT 6.1.7601

    解决办法:先设置代理为空 npm config set proxy null, 然后再npm install cnpm -g --registry=https://registry.npm.taoba ...

  3. Android网络之数据解析----SAX方式解析XML数据

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

  4. 怪物彈珠Monster Strike 攻略

    火>水>木>光>暗 1.每天的曜日素材本,周一暗光,周二火,周参水,周四木,周五光乌龟,都是可以打整天的 2.另外补充,升经验用暗乌龟,切忌切记要塞给他随便一只烂宠升等,再吃掉 ...

  5. 使用javascript获取url中的参数

    方法一: //取url参数 var type = request("type") function request() { var query = location.search; ...

  6. ViewPager -- Fragment 切换卡顿 性能优化

    当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快速切换ViewPager,即 Fragment需要加载UI内容,而又频繁地切换Fragment, ...

  7. 如何替换orcl实例下的四个数据库

    1,drop 数据库对应的用户 2,创建新的表空间 新的用户 3,导入新的数据库 imp grid_sysdb/sagis@klmy file=F:\data\addr_interestpoint.d ...

  8. Python中的sort()方法使用基础

    一.基本形式 sorted(iterable[, cmp[, key[, reverse]]]) iterable.sort(cmp[, key[, reverse]]) 参数解释: (1)itera ...

  9. C语言 百炼成钢11

    //题目31:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 //判断第二个字母. #define _CRT_SECURE_NO_WARNINGS #include<st ...

  10. C语言 百炼成钢4

    //题目10:打印楼梯,同时在楼梯上方打印两个笑脸. #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdli ...