Question

我是JavaScript的新手，并尝试使用一些Ajax将HTML动态加载到<div>元素中。我有一个PHP页面，用于插入JSON，其中包含插入<div>所需的HTML。我一直在测试，无法接到工作电话。我开始在我的readystate上做警报，然后我得到0，然后没有别的。根据我的理解，函数sendData()应该在每次状态更改时调用，但它似乎只执行一次，或者就绪状态永远不会更改，所以它只被调用一次......？

这是我的PHP

<?php
    $array['html'] = '<p>hello, menu here</p>';
    header('Content-type: application/json');
    echo json_encode($array);
?>

这是我的HTML

<!DOCTYPE html>
<html>
<head>
<title>Veolia Water - Solutions and Technologies Dashboard</title>  
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
<meta name="description" content="Veolia Water - Dashboard"/>
<meta http-equiv="imagetoolbar" content="no" />
<meta author="Nathan Sizemore"/>
<link rel="stylesheet" href="./css/stylo.css" media="screen"/>
</head>
<body>
    <div id="menu">
    </div>
    <div id="content">
    </div>
</body>
<script src="./js/dashboard.js"></script>
</html>

这是我的JavaScript

var request;
window.onload = function() 
{
     load_menu();
}

//Load menu function
function load_menu()
{   
    request = getHTTPObject();
    alert(request.readyState);
    request.onreadystatechange = sendData();
    request.open("GET", "./php/menu.php", true);
    request.send(null);
}

function getHTTPObject()
{
    var xhr = false;
    if (window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) 
    {
        try
        {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xhr = false;
            }
        }
    }
    return xhr;
}

function sendData()
{
    alert(request.readyState);
    // if request object received response
    if (request.readyState == 4)
    {
        var json = JSON.parse(request.responseText);
        document.getElementById('menu').innerHTML = json.html;
        alert(json.html);
    }
}

提前感谢您的帮助！

森

Answer 1

使用此：

request.onreadystatechange = sendData;

请注意，()已从sendData()

中删除

之前您所做的是立即执行sendData并将结果返回onreadystatechange。由于实际上没有任何内容return，因此值为undefined。它实际上并没有为onreadystatechange设置任何内容，因此在state更改时实际上并没有执行任何操作。 onreadystatechange属性需要对函数的引用...这正是sendData的原因。

在您的代码中，由于sendData执行了一次（意外），报告的状态为0（XHR的初始状态）。

Answer 2

更改此行

request.onreadystatechange = sendData();

到此

request.onreadystatechange = sendData;

第一个代码调用sendData并将结果指定为处理程序第二个分配函数本身。

Answer 3

request.onreadystatechange = sendData();

应该是

request.onreadystatechange = sendData;

您正在立即调用sendData并使用该函数的结果作为侦听器，而不是使用函数本身。

请求就绪状态总是返回0？

3 个答案: