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

Posted 2023-02-27

技术标签:

【中文标题】在 Javascript 中使用委托（使用 XMLHttpRequest AJAX 请求的示例）【英文标题】：Using delegates in Javascript (example using XMLHttpRequest AJAX request) 【发布时间】：2021-11-09 14:24:48 【问题描述】：

我有一个从 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 对象配置为在触发onreadystatechange 事件时调用PopulateProductCode。我对返回的数据有很多工作要做，并且希望在XMLHttpRequest 返回数据时调用一个单独的函数。

如果是我的 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 回答中，第一个版本会立即执行，但上面的版本不会。我不明白两者之间有什么区别，除了第二个没有函数名。当然它们是同一件事，但是一个版本是无名的？为什么处理方式不同？

【问题讨论】：

【参考方案1】：

在 Javascript 中，httpxml.onreadystatechange = PopulateProductCode(httpxml) 这一行首先使用 httpxml 参数调用 PopulateProductCode，并将其返回值指定为事件处理程序，以便在就绪状态更改时使用。

最简单的方法是将您对 PopulateProductCode 的调用封装在一个匿名函数中。

httpxml.onreadystatechange = () => PopulateProductCode(httpxml);

【讨论】：

谢谢@James。我真的不明白为什么会这样。我添加了一个能够确实正常工作的修改，但我不明白我的原始代码和修改后的版本在处理方式上的区别。能不能解释一下。谢谢。【参考方案2】：

我建议将方法更改为更新的实现。获取 API。它返回一个承诺。提高了代码的可读性，是当今更好的方法。