Как добавить функцию обратного вызова в класс javascript? - PullRequest
Новая
       12

Как добавить функцию обратного вызова в класс javascript?

1 голос
/ 19 января 2009

Следующий код в javascript выдает мне ошибку "this.callback не является функцией 

function ajaxRequest()
{
    var httpObject;

    this.open = open;
    this.callback = function(){};

    function getHTTPObject()
    {
        if (window.ActiveXObject) 
            return new ActiveXObject("Microsoft.XMLHTTP");
        else if (window.XMLHttpRequest)
            return new XMLHttpRequest();
        else 
        {
            alert("Your browser does not support AJAX.");
            return null;
        }
    }

    function onstatechange()
    {
        if(httpObject.readyState == 4)
        {
            this.callback(httpObject.responseText);
        }

    }


    function open(url, callback)
    {
        httpObject = getHTTPObject();
        if (httpObject != null) 
        {
            httpObject.open("GET", url, true);
            httpObject.send(null);
            this.callback = callback;
            httpObject.onreadystatechange = onstatechange;
        }
    }
}

почему метод open не обрабатывает параметр обратного вызова как функцию?

Если это так, то почему я не могу вызвать его в функции onstatechange?

Как мне сделать эту работу?

1 Ответ

9 голосов
/ 19 января 2009

Причина в том, что onstatechange вызывается как обработчик события, а указатель this, скорее всего, указывает на объект, с которым сработало событие, а не на объект ajaxRequest, как вы ожидаете.

При переписывании ниже переменная this сохраняется в переменной с именем that в контексте выполнения, к которому имеет доступ функция onstatechange (). Это должно решить проблему.

Самое длинное и короткое из этого - если вы не совсем понимаете контексты закрытия Javascript и контексты выполнения, и даже если вы это понимаете, вам гораздо лучше использовать инфраструктуру для выполнения ваших запросов AJAX. JQuery и Prototype - хороший выбор. 

function ajaxRequest()
{
    var httpObject;

    this.open = open;
    this.callback = function(){};
    var that = this;

    function getHTTPObject()
    {
        if (window.ActiveXObject) 
                return new ActiveXObject("Microsoft.XMLHTTP");
        else if (window.XMLHttpRequest)
                return new XMLHttpRequest();
        else 
        {
                alert("Your browser does not support AJAX.");
                return null;
        }
    }

    function onstatechange()
    {
        if(httpObject.readyState == 4)
        {
                that.callback(httpObject.responseText);
        }

    }


    function open(url, callback)
    {
        httpObject = getHTTPObject();
        if (httpObject != null) 
        {
                httpObject.open("GET", url, true);
                httpObject.send(null);
                this.callback = callback;
                httpObject.onreadystatechange = onstatechange;
        }
    }
}
...