JS XMLHttpRequest本地跨域问题,XMLHttpRequest.status==0

问题1
最近在学习AJAX,做小练习的时候,同一个AJAX请求,在Chrome里调试的时候就会提示跨域问题。如下

WechatIMG2.jpeg

查阅资料发现是因为Chrome的安全策略导致的,我的解决办法是通过打开一个新的可跨域的chrome窗口实现的:
1.打开终端
2.输入下面的命令( 需要替换路径中的yourname )

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/

这是在mac的根目录在建了一个叫MyChromeDevUserData的文件夹,用于保存关闭安全策略后的用户信息的,名字可以随意取,位置也可以随意放,只要路径是正确的就可以。
3.第一次打开chrome有黄色背景色的“--disable-web-security”相关的提示,说明浏览器设置跨域成功。

问题2
接着当我发现我的xmlhttprequest.status==0

if (xmlhttp.readyState == 4) {
        if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) {
            alert(xmlhttp.status);

http协议里可是没这个状态码的,这个时候如果还用if(xmlHttp.status==200)来判断运行,则会毫无结果。如果要在本地测试,最好写成if(xmlHttp.status== 200 || xmlHttp.status==0)

if (xmlhttp.readyState == 4) {
        if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 0) {
            alert(xmlhttp.status);

这时候就有返回结果了。

贴一下我的代码
CDShow.html

<!DOCTYPE html>
<html>

<head>
    <title>CD SHOW</title>
</head>

<body>
    <div id="copy">
        <button onclick="loadXMLDoc('xml/cd_catalog.xml')">Get CD INFO</button>
    </div>
    <script type="text/javascript" src="js/cd_show.js"></script>
</body>

</html>

cd_show.js

var xmlhttp;

function loadXMLDoc(url) {

    xmlhttp = null;
    if (window.XMLHttpRequest) {
        //code for IE7,Firefox,Mozilla,etc.
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        //code for IE5,IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xmlhttp != null) {
        xmlhttp.onreadystatechange = onResponse;
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);

    } else {
        alert("Your browser does not support XMLHTTP.");
    }
}

function onResponse() {
    if (xmlhttp.readyState == 4) {
        if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 0) {
            alert(xmlhttp.status);
            txt = "<table border='1'>";
            x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
            for (i = 0; i < x.length; i++) {
                txt = txt + "<tr>";
                xx = x[i].getElementsByTagName("TITLE");
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                } catch (er) {
                    txt = txt + "<td></td>";
                }
                xx = x[i].getElementsByTagName("ARTIST");
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                } catch (er) {
                    txt = txt + "<td></td>";
                }
                txt = txt + "</tr>";
            }
            txt = txt + "</table>";
            document.getElementById('copy').innerHTML = txt;
        }
    }
}

cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
         <TITLE>Empire Burlesque</TITLE>
         <ARTIST>Bob Dylan</ARTIST>
         <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
         <YEAR>1985</YEAR>
</CD>
<CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
</CATALOG>

结果:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 前言 目前在开发中前后端分离的模式比较普遍,那么跨域问题也就时常会遇到。网上资料都很片面,不全面,以及都没有说为什...
    江江的大猪阅读 1,420评论 0 11
  • 现在家长越来越重视家庭教育,想给孩子一个好的教育和引导,那么家长在教育的过程中应该怎么做呢?下面小编和大家分享“家...
    gaosijiaoyu阅读 177评论 0 0
  • 1.读一本书 2.看SQL基础
    弯弯家的土豆阅读 132评论 0 0