理解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;    
        }  
    } 
}

上面所有这些代码都很好，对我来说没问题..但几页后它说：

在请求变量之前删除 VAR 关键字非常重要，以便回调可以引用变量......

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

看看下面的图片：

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

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

编辑 PS 它说 request 必须是全球性的？ :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 );

Answer 2

你是对的，在你的第一个例子中，函数createRequest没有使用var ，这意味着你在执行request = new XMLHttpRequest();时创建了一个全局变量request request = new XMLHttpRequest(); .

在大多数情况下，我们应该避免使用全局变量。

function createRequest() {
    try {
        // add var so it's not global variable
        var 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);  

    // create anonymous function to call your callback and pass `request` as local variable
    request.onreadystatechange = function(){
        displayDetails(request);
    }; 
    request.send(null); 
}

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