写了一小段代码，是用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. 移动App崩溃测试用例设计

    我们的日常生活中对移动设备越来越多的使用意味着移动App测试这个主题已成为需要考虑的一个无法避免的问题.根据最近的调查研究,用户难以容忍有bug的移动App. 移动App Bug的影响是用户体验差.A ...

  2. ios app架构设计系统文章

    三. iOS应用架构谈(三):网络层设计方案(上) http://www.infoq.com/cn/articles/ios-app-arch-3-1?utm_source=infoq&utm ...

  3. SqlServer 注入技巧

    一.SA权限执行命令,如何更快捷的获取结果? 有显示位 显示位 其实这里的关键并不是有无显示位.exec master..xp_cmdshell 'systeminfo'生成的数据写进一张表的时候,会 ...

  4. Android 动态加载 （二） 态加载机制 案例二

    探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法 重要说明 在实践的过程中大家都会发现资源引用的问题,这里重点声明两点: 1. 资源文件是不能直接inflate的,如果简单的话直接在程序 ...

  5. STL之stack栈

    栈(statck)这种数据结构在计算机中是相当出名的.栈中的数据是先进后出的(First In Last Out, FILO).栈只有一个出口,允许新增元素(只能在栈顶上增加).移出元素(只能移出栈顶 ...

  6. 查询Sqlserver数据库死锁的一个存储过程（转）

    链接 :http://www.cnblogs.com/mzhanker/archive/2011/06/04/2072739.html 使用sqlserver作为数据库的应用系统,都避免不了有时候会产 ...

  7. C语言 百炼成钢2

    //题目4:输入某年某月某日,判断这一天是这一年的第几天? #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<st ...

  8. Spring验证的错误返回------BindingResult

    Spring验证的错误返回------BindingResult 参考资料:http://www.mkyong.com/spring-mvc/spring-mvc-form-errors-tag-ex ...

  9. REST: C#调用REST API (zz)

    由于辞职的原因,最近正在忙于找工作.在这段期间收到了一家公司的上机测试题,一共两道题,其中一道题是关于REST API的应用.虽然在面试时,我已经说过,不懂REST,但那面试PM还是给了一道这题让我做 ...

  10. 信息安全系统设计基础exp_3

    详情请看搭档20135322郑伟博客,传送门如下:http://www.cnblogs.com/zhengwei0712/p/4996017.html