Понимание объекта запроса XHR в JavaScript ... (в замешательстве)

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 ПЕРЕД запросом VARIABLE, чтобы обратный вызов мог ссылаться на переменную ...

но почему в приведенном выше примере это сработало?это совпадение, если мы назовем переменную 'request', которая будет отображаться с глобальной переменной в методе createRequest?

Посмотрите на изображение ниже:

Почему это происходит?в одном примере var до использования переменной request и все в порядке, в другом примере var избегается, чтобы метод в обратном вызове мог получить к нему доступ, но как получается, что метод в обратном вызове обращается к переменной request вПервый пример ...

Это сбивает с толку, потому что есть 2 аналогичных примера с разными объяснениями ..

РЕДАКТИРОВАТЬ PS это говорит, что запрос должен быть глобальным?: o

Спасибо, ребята, Ура

Answer 1

вы правы, в первом примере функция createRequest не использует var, что означает, что вы создаете глобальную переменную request при извинении request = new XMLHttpRequest();.

Мы должны избегать использования gobal var в большинстве ситуаций.

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

Answer 2

В обоих примерах создаются неявные глобальные переменные, чтобы их можно было использовать совместно с обратным вызовом.Когда создается вторая переменная запроса, она создает локальную переменную внутри функции 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 );