在没有Web服务器的情况下在本地运行AJAX

时间:2014-03-26 01:15:19

标签: javascript html ajax

我一直在寻找一个月的答案。我正在尝试在本地运行以下脚本并获取"访问被拒绝"错误。

浏览器:IE 8 环境:本地,内联网

请分享您对此的看法。谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSDAssist</title>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
        page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else return false
    page_request.onreadystatechange=function(){
        loadpage(page_request, containerid)
    }
    page_request.open('GET', url, true)
    page_request.send(null)
}

function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
        document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
    if (!document.getElementById)
        return
    for (i=0; i<arguments.length; i++){
        var file=arguments[i]
        var fileref=""
        if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
            if (file.indexOf(".js")!=-1){ //If object is a js file
                fileref=document.createElement('script')
                fileref.setAttribute("type","text/javascript");
                fileref.setAttribute("src", file);
            }
            else if (file.indexOf(".css")!=-1){ //If object is a css file
                fileref=document.createElement("link")
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file);
            }
        }
        if (fileref!=""){
            document.getElementsByTagName("head").item(0).appendChild(fileref)
            loadedobjects+=file+" " //Remember this object as being already added to page
        }
    }
}

</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>GSDAssist</title>
</head>

<body style>

<div id="headerBar">
<marquee id="newsTicker" behavior="scroll" direction="left"><h4>Process Updates: Tickets trashed has to be moved to DBSP RECYCLE TICKET Assignment group</h4></marquee>
</div>

<div id="main">


<div style="width:300px; height:80px; margin-left:5px; margin-bottom:10px; float:left;">
    <img style="padding:5px; float:left;" src="img/logo.png" width="60" />
    <h2 style="float:left; margin-left:5px;">GSDAssist</h2>
</div>

<div style="clear:both; float:left; border-bottom: 1px solid #CCCCCC;">

<a href="javascript:ajaxpage('01/1.html', 'contentarea');" class="btn">#</a>
<a href="javascript:ajaxpage('a/a.html', 'contentarea');" class="btn">A</a>
<a href="javascript:ajaxpage('b/b.html', 'contentarea');" class="btn">B</a>
<a href="javascript:ajaxpage('c.html', 'contentarea');" class="btn">C</a>
<a href="javascript:ajaxpage('d.html', 'contentarea');" class="btn">D</a>
<a href="javascript:ajaxpage('e.html', 'contentarea');" class="btn">E</a>
<a href="javascript:ajaxpage('f.html', 'contentarea');" class="btn">F</a>
<a href="javascript:ajaxpage('g.html', 'contentarea');" class="btn">G</a>
<a href="javascript:ajaxpage('h.html', 'contentarea');" class="btn">H</a>
<a href="javascript:ajaxpage('i.html', 'contentarea');" class="btn">I</a>
<a href="javascript:ajaxpage('j.html', 'contentarea');" class="btn">J</a>
<a href="javascript:ajaxpage('k.html', 'contentarea');" class="btn">K</a>
<a href="javascript:ajaxpage('l.html', 'contentarea');" class="btn">L</a>
<a href="javascript:ajaxpage('m.html', 'contentarea');" class="btn">M</a>
<a href="javascript:ajaxpage('n.html', 'contentarea');" class="btn">N</a>
<a href="javascript:ajaxpage('o.html', 'contentarea');" class="btn">O</a>
<a href="javascript:ajaxpage('p.html', 'contentarea');" class="btn">P</a>
<a href="javascript:ajaxpage('q.html', 'contentarea');" class="btn">Q</a>
<a href="javascript:ajaxpage('r.html', 'contentarea');" class="btn">R</a>
<a href="javascript:ajaxpage('s.html', 'contentarea');" class="btn">S</a>
<a href="javascript:ajaxpage('t.html', 'contentarea');" class="btn">T</a>
<a href="javascript:ajaxpage('u.html', 'contentarea');" class="btn">U</a>
<a href="javascript:ajaxpage('v.html', 'contentarea');" class="btn">V</a>
<a href="javascript:ajaxpage('w.html', 'contentarea');" class="btn">W</a>
<a href="javascript:ajaxpage('x.html', 'contentarea');" class="btn">X</a>
<a href="javascript:ajaxpage('y.html', 'contentarea');" class="btn">Y</a>
<a href="javascript:ajaxpage('z.html', 'contentarea');" class="btn">Z</a>

<br>
<br>
</div>
<div id="contentarea" style="clear:both; float:left;"><h3>Welcome to GSDAssist,</h3><p><h3>Choose the starting letter of the application to get started!</h3></div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我对此的看法是,它无法运作。

XHR调用受相同域安全策略的约束(CORS是一个例外,但如果不控制服务器,这几乎是不可能的,无论如何,这需要服务器,这是你的问题开始)。

重点是浏览器已设置安全策略,这意味着您必须在浏览器当前处于<​​strong> 同一域 时请求XHR数据。

file:///是一种与http://完全不同的协议,即便如此,浏览器安全性也会阻止本地提供的HTML页面以异步方式访问file://内容(以防止页面访问您硬盘上的所有内容,并将您的所有数据发送到世界任何地方。)

此时几乎所有以网络为中心的编程语言都包含一个快速启动服务器(NodeJS除外,但在Node中编写一个简单的服务器也很容易)。

诀窍是设置一个可在您的Intranet上使用的服务器,而无需修改域。