Question

我正在为一个客户端的网站工作，我正在使用ajax来获取文件的内容，特别是html，然后我试图将该html插入到div中以便我可以显示内容。我知道我正在获取文件的内容，因为我设置了警报以显示请求的readyState，status和responseText，并且它显示警报中文件的内容。但是当我使用这一行将它插入div时：document.getElementsByClassName('content').innerHTML = response;没有任何反应。任何人都可以帮我解决这个问题吗？

CODE：

JAVASCRIPT：

<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
    alert(request.status);
    document.getElementsByClassName('content').innerHTML = response;

}
function processData(){
    response = request.responseText;
    /*if (request.readyState==4){
        if (request.status==200){
            try{
                document.getElementsByClassName('content').innerHTML = response;
            } catch(e){
                alert("Error: " +e.description);
            }
        }
        else{
            alert("An error has occured making the request");
        }
    }*/
}
function home() {
    getData("home");
}
function about() {
    getData('about');
}
function proof() {
    getData('contact');
}
function contact() {
    getData('proof');
}
function ajaxRequest(){
    var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
    if (window.XMLHttpRequest)
        return new XMLHttpRequest();
    else if (window.ActiveXObject){ 
        for (var i=0; i<activexmodes.length; i++){
            try{
                return new ActiveXObject(activexmodes[i]);
            }
            catch(e){
                alert(e.description);
            }
        }
    }
    else
        return false
}

HTML：

<body>
<div class="container">
    <div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home --> 
        <span  id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about --> 
        <span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof --> 
        <span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->

        <div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
        <div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
        <div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
        <div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div class="content"></div><!-- end content -->   
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->

CSS：

    @charset "UTF-8";
/* CSS Document */

* {
    margin:auto;
}

html, body {
    height: 100%;
}

.container {
    position:relative;
    min-height: 100%;
    width:800px;
}

.logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

.content {
    position:relative;
    top:0px;
    left:0px;
    padding-top:20px;
    padding-bottom: 75px !important;
}  

.footer {
    position:relative;
    height: 75px;
    margin-top:-75px;
    background-color:#06F;
    bottom:0px;
    left:0px;
}

.large{
    font-size:36px;
}

.fltright {
    position:relative;
    float:right;
    top:0px;
    left:0px;
    width:auto;
    height:auto;
}

.fltleft {
    position:relative;
    float:left;
    top:0px;
    left:0px;
    width:auto;
    height:auto;
}

span.glow {
    text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
    color:#999;
    text-align:center;
}

span.noglow {
    color:#999;
    text-align:center;
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
    line-height:20px;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;
}

#link-home{
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:419px;
}

#link-about{
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:515px;
}

#link-proof{
    position:absolute;
    width:75px;
    height:30px;
    top:100px;
    left:609px;
}

#link-contact{
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:708px;
}


#home-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:131px;
    left:442px;
    background:url(images/home-flower.png);
}

#about-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:135px;
    left:540px;
    background:url(images/about-flower.png);
}

#proof-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:131px;
    left:635px;
    background:url(images/proof-flower.png);
}

#contact-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:135px;
    left:733px;
    background:url(images/contact-flower.png);
}

Answer 1

document.getElementByClassName返回一个数组。你不能设置你需要循环遍历数组的数组的innerHtml并将每个单独的元素设置为内部html;

工作示例：http://jsfiddle.net/CYZUL/

function processData(){
    response = request.responseText;
    /*if (request.readyState==4){
        if (request.status==200){
            try{
               var elements = document.getElementsByClassName('content');
               for(var x=0; x < elements.length; x++)
               {
                 elements[x].innerHTML = response;
               }
            } catch(e){
                alert("Error: " +e.description);
            }
        }
        else{
            alert("An error has occured making the request");
        }
    }*/
}

function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
    alert(request.status);
    var elements = document.getElementsByClassName('content');
    for(var x=0; x < elements.length; x++)
    {
       elements[x].innerHTML = response;
    }
}

Answer 2

为什么不使用jQuery的$ .load（）;功能，为自己节省很多痛苦和时间

javascript没有设置innerHTML

2 个答案: