javascript - 理解 javascript 中的 XHR 请求对象...(困惑)

Question

我正在看一本简单的书，它说:

function createRequest() 
{ 
    try 
    {  
        request = new XMLHttpRequest(); 
    } 
    catch (tryMS) 
    {  
        try 
        {   
            request = new ActiveXObject("Msxml2.XMLHTTP");  
        } 
        catch (otherMS) 
        {   
        try 
        {    
            request = new ActiveXObject("Microsoft.XMLHTTP");   
        } 
        catch (failed) 
        {    
            request = null;   
        }   
        }
    } 
 return request; 
 } 

function getDetails(itemName) 
{ 
    var request = createRequest();
    if (request==null) 
    {    alert("Unable to create request");  
        return;  
    } 
    var url= "getDetails.php?ImageID=" +    escape(itemName); 
    request.open("GET",url,true);  
    request.onreadystatechange = displayDetails; 
    request.send(null); 
}


function displayDetails() 
{  
    if (request.readyState == 4) 
    {    
        if (request.status == 200) 
        {      
            detailDiv = document.getElementById("description");      
            detailDiv.innerHTML = request.responseText;    
        }  
    } 
}

上面的所有代码都很好，对我来说没问题..但是几页之后它说:

在请求 VARIABLE 之前删除 VAR KEYWORD 非常重要，这样回调可以引用变量...

但是上面的例子是如何起作用的呢？如果我们调用一个变量 'request'，它会在 createRequest 方法中映射到全局变量，这是巧合吗？

请看下图:

为什么会这样？在一个示例中，在使用 request 变量之前使用 var 并且一切都很好，在另一个示例中，避免了 var，因此回调中的方法可能会访问它。但是回调中的方法怎么会在第一个示例中访问 request 变量...

这很令人困惑，因为有 2 个相似的例子，但解释不同..

编辑 P.S 它说请求必须是全局的？ :o

谢谢大家 干杯

Answer 1

在这两个示例中，都创建了隐式全局变量，以便它们可以与回调共享。 创建第二个请求变量时，它会在 getDetails 函数内创建一个局部变量。所以当 createRequest() 返回全局变量时，局部变量就变成了对它的引用。

这是相当糟糕的建议，表明作者缺乏理解。但它似乎是一个旧文本，因为 activeX 对象现在已被弃用，所以也许全局变量过去不那么令人不快。正确的方法是将 responseText 或 responseXML 作为参数发送给回调，或者将整个请求作为参数发送给回调。

也许作者不想让请求代码更复杂，但是恕我直言，这不是教人们东西的好方法。

function createRequest( method, url, callback, payload ) {
    var request = new XMLHttpRequest();
    if ( !request ) {
        alert( "Unable to create request" );  
        return null;
    }
    request.open( method, url );
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200 ) {
            callback( request.responseText );
        }
    };
    request.send( payload );
};
function getDetails( itemName, callback ) {
    createRequest( "GET", "getDetails.php?ImageID=" + escape(itemName), callback, null );
};
function displayDetails( detail ) {
    var detailDiv = document.getElementById("description");      
    detailDiv.innerHTML = detail;
};
getDetails( "someItemName", displayDetails );