2009-01-19 18 views
1

在JavaScript下面的代碼給我的錯誤「this.callback不是一個函數如何回調函數添加到一個javascript類?

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

爲什麼不開法治療回調參數作爲函數?

如果確實如此,那麼爲什麼我不能把它稱爲onstatechange功能?

如何使這項工作?

回答

9

的原因是因爲onstatechange被稱爲作爲事件處理程序,並且this指針可能指向事件觸發的對象,而不是指向ajaxRequest對象,如您所期望的那樣。

下面的重寫將this變量存儲在onstatechange()函數有權訪問的執行上下文中名爲that的變量中。這應該解決問題。

長期和短期的這一切,如果你不完全理解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; 
     } 
    } 
} 
相關問題