javascript - 在 Javascript 中使用委托（使用 XMLHttpRequest AJAX 请求的示例）

问题描述

我有一个从 GET 返回一些数据的 AJAX 页面。都好。我试图从 Javascript 调用它以响应用户更改名为ProductCode. 如果我的一些术语有点偏离，我来自 C# 世界。

Javascript：

function ProductCodeChange()
{               
    try
    {
        elProductCode = document.getElementById("ProductCode");
        ProductCode = elProductCode.value;
        
        var AJAX_MAGICTOKEN = "773d8626-6b78-4055-bf8b-4fbbaa725550";
        url = "AJAX_GetData.php?";
        url += "MagicToken=" + AJAX_MAGICTOKEN + "&";
        url += "Query=GetProduct&";
        url += "ProductCode=" + ProductCode;
        
        httpxml = new XMLHttpRequest();
        httpxml.onreadystatechange = PopulateProductCode(httpxml);
        alert(">httpxml.open");
        httpxml.open("GET", url, true);
        httpxml.send(null);
    }
    catch (e)
    {
        alert(e.message);
    }
}


function PopulateProductCode(httpxml)
{
    try
    {
        alert(">ProductCodePopulate");
        if (httpxml.readyState == 4 && httpxml.status == 200) 
        {
            data = httpxml.responseText;
            alert(data);
        }
        else
        {
            alert("readyState: " + httpxml.readyState.toString());
            alert("status: " + httpxml.status.toString());
        }
    }
    catch (e)
    {
        alert(e.message);
    }
}

HTML：

<select id="ProductCode" name="ProductCode" onchange="ProductCodeChange();">
<option value="AP1A" >Annual Licence</option>
<option value="AP1M" >Monthly Licence</option>
</select>

我已将对象配置为在事件触发时XMLHttpRequest调用。我对返回的数据有很多工作要做，并且希望在返回数据时调用一个单独的函数。PopulateProductCodeonreadystatechangeXMLHttpRequest

如果是我的 C# 世界，则该行httpxml.onreadystatechange = PopulateProductCode(httpxml);设置了带有委托的 httpxml 对象，以便在其就绪状态更改后调用。但是，在执行上面的代码时，事件的顺序是：

alert(">ProductCodePopulate");
alert(">httpxml.open");

所以我的委托在发送 GET 请求之前被调用。

我完全误解了这个对象是如何工作的吗？我怎样才能实现我想做的事情（即将功能保留在一个单独的函数中）？

如果您可以在答案中坚持使用香草 Javascript，那就太好了。我还不熟悉JQuery。谢谢。

编辑：另一种选择是：

httpxml.onreadystatechange =
function()
{
    if (this.readyState == 4 && this.status == 200) 
    {
       data = httpxml.responseText;
       alert(data);
       
    }
}

这确实可以正常工作，并且在返回数据之前不会执行。从下面的@James 回答中，第一个版本会立即执行，但上面的版本不会。我不明白两者之间有什么区别，除了第二个没有函数名。当然它们是同一件事，但是一个版本是无名的？为什么处理方式不同？

标签： javascriptxmlhttprequestdelegates

javascript - 在 Javascript 中使用委托（使用 XMLHttpRequest AJAX 请求的示例）

问题描述

解决方案

推荐阅读