Question

我正在尝试学习如何使用ajax，我似乎无法弄清楚为什么下面的代码不起作用。它只是在页面第一次加载时创建一个有效的XMLHttpRequest对象，然后将一些文本插入到页面div区域的一部分中。

Demo.js

var ajaxRequest;  // The variable that makes Ajax possible!
function newRequest()
{
    try
    {
        ajaxRequest = new XMLHttpRequest();
    ..
    }    
}

我通过使用以下内容来调用它：

Index.html

<script src="Demo.js" type="text/javascript"></script>
</head>
<body onload="newRequest()">
    <div class="page_Disp">
    </div>

然后我尝试使用以下JS函数将文件中的一些文本加载到页面中：

Demo.js

function openPage()
{
    ajaxRequest.onreadystatechange=function()
    {
        if (ajaxRequest.readyState==4 && ajaxRequest.status==200)
        {
            document.getElementById("page_Disp").innerHTML=ajaxRequest.responseText;
            ajaxRequest.open("GET","ajax_info.txt",true);
            ajaxRequest.send();
        }
    }
}

使用以下html代码调用上述内容：

<a onclick="openPage()">Load TXT</a>

任何人都可以看到导致脚本无法加载的问题，并将.txt中的数据插入到该部分中吗？

Answer 1

您在元素上使用class：

<div class="page_Disp">

但是正试图通过id来获取它：

document.getElementById("page_Disp")

因此您需要将其更改为id以填充它：

<div id="page_Disp">

Answer 2

我希望你的Demo.js看起来像这样

function openPage()
{
    ajaxRequest.onreadystatechange=function()
    {
        if (ajaxRequest.readyState==4 && ajaxRequest.status==200)
        {
            document.getElementById("page_Disp").innerHTML=ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET","ajax_info.txt",true);
    ajaxRequest.send();
}

否则ajaxRequest永远不会发送请求，因为它位于响应请求的代码中。

似乎无法运行此AJAX代码

2 个答案: