在javascript中構建一個簡單的ajax類

Question

我想爲Chrome擴展創建一個簡單的ajax類。當我嘗試運行代碼時，出現未定義的錯誤Uncaught TypeError: Cannot read property 'readyState' of undefined。什麼似乎導致這個問題？

function ajax(arguments, callback) { 
    this.xhr = new XMLHttpRequest(); 
    this.xhr.open(arguments.requestType, arguments.requestUrl + arguments.requestParameters, true); 
    this.xhr.onreadystatechange = function() { 
     if (this.readyState === 4 && this.status === 200) { 
      requestedData = JSON.parse(this.responseText); 
      callback(requestedData); 
     } 
    } 
    this.xhr.send(); 
} 

var ajaxRequest = new ajax({ 
    requestType: 'GET', 
    requestUrl: 'http://ezswag.com/bots/terms.php', 
    requestParameters: ' ', 
    }, function(json) { 
     //console.log(json); => json {apple: "red", cheery: "red"} 
     return json; 
    }); 

    console.log(ajaxRequest); 

（更新代碼，工作）

Answer 1

this的值取決於函數如何被調用。

當您將ajax函數作爲構造函數調用時（請注意約定表示您應該用大寫字母來啓動構造函數函數名）this是正在創建的實例。

在readyState函數中，this是XMLHttpRequest對象。

你的所有的readyState函數裏面this.xhr引用應該是簡單this

Answer 2

你不能在函數內部使用this.xhr。這是對當前函數的引用，而不是你認爲的。

使用這樣一個臨時變量：

var self = this; 

this.xhr.onreadystatechange = function() { 
    if (self.xhr.readyState === 4 && self.xhr.status === 200) { 
     requestedData = JSON.parse(self.xhr.responseText); 
     console.log(requestedData); 
    } 
} 

Answer 3

在你onreadystatechange實現，this是不是你認爲它是。您需要捕獲您的ajax函數的範圍，並在回調中使用它。

function ajax(parameter) { 
    var that = this; 
    this.xhr = new XMLHttpRequest(); 
    this.xhr.open(parameter.requestType, parameter.requestUrl + parameter.requestParameters, true); 
    this.xhr.onreadystatechange = function() { 
     if (that.xhr.readyState === 4 && that.xhr.status === 200) { 
      requestedData = JSON.parse(that.xhr.responseText); 
      console.log(requestedData); 
     } 
    } 
    this.xhr.send(); 
}