XMLHTTPRequest对象不能跨域获取数据？！

时间 2019-12-06

标签 xmlhttprequest 对象不能获取数据繁體版

原文原文链接

写了一小段代码，是用XMLHTTPRequest对象来获取数据的，在本地服务器中，运行的很顺利，可是转向实际服务器（实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来），运行就跑不起来了。web

这就涉及到跨域获取数据的问题了。json

我运行时的环境是这样的：跨域

本地服务器运行当前代码、转向http://gumball.wickedlysmart.com获取一个json文件过来。浏览器

结果：报错。安全

XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource.......服务器

什么是跨域获取对象呢？意思就是说，你如今所在的页面是属于本地服务器A的，可是你要获取远方的服务器B的数据，此时就属于跨域获取数据了。我刚才说的问题，转向实际服务器就不能够运行代码了。cookie

原来呢是由于这是浏览器安全策略，专门设计用来避免恶意的Javascript访问你的web页面和用户的cookie。因此呢，若是你的要访问的数据跟你的不是在同一个服务器下，使用XMLHTTPRequest是会被拦截住的。app

浏览器获取获取数据的两种流行方法：dom

XMLHTTPRequest、JSONPjsonp

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);
        
    }