XMLHttpRequest對象上缺少onreadystatechange（）

Question

(function (send) { 

    XMLHttpRequest.prototype.send = function() { 

     console.log(this.onreadystatechange); //null 
     send.apply(this, arguments); 
    }; 

})(XMLHttpRequest.prototype.send); 

爲什麼this.onreadystatechange爲空？根據this它應該存在並且類型爲function。

Answer 1

onreadystatechange確實存在 ...這就是爲什麼它是null。如果它不存在，那將是undefined。這一切都取決於它是否已經設置。這顯然已經是一個財產，因爲它是null ...如果它不是，那將是undefined ...或至少"onreadystatechange" in this將是false。

下面是一個例子：

var a = new XMLHttpRequest(); 
a.onreadystatechange = function() { 
}; 
a.send(); 

您的控制檯將記錄一個function。

如果您有：

var b = new XMLHttpRequest(); 
b.send(); 

您的控制檯將日誌null。

這裏有這種情況發生的演示：http://jsfiddle.net/3XKx7/

（我清楚地離開了其他步驟出了Ajax請求，這只是爲了說明）

我不是想暗示有一個null和undefined之間的關係 - 我只是說在創建新的XMLHttpRequest時，onreadystatechange將在內部設置爲null。無論您是否將其設置爲功能，都取決於您。

UPDATE：

創建/發送XHR方式，一般是這樣的順序：

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { // This and `open` could be flip-flopped 
    // whatever 
}; 
xhr.open("POST", url, true); 
xhr.send("data=data"); 

我總是告訴/顯示創建新XMLHttpRequest，那麼無論設置onreadystatechange的順序並打電話open，但只有在這兩個應該我打電話send。

所以，如果總是做，onreadystatechange（如果實際設置）不會null並且將是一個function。

既然你提到你使用jQuery，我決定重寫send方法像你想，並使一個jQuery $.ajax通話測試（不手動發送XMLHttpRequest）。下面是我的測試 - http://jsfiddle.net/3XKx7/1/

它沒有意義，爲什麼onreadystatechange會null，因爲jQuery 有是結合該事件，以請求和完成時的狀態就知道了。所以我決定看看jQuery源代碼。而我發現的是，他們稱之爲事物的順序是：

xhr.open() 
xhr.send() 
xhr.onreadystatechange = function() { 

}; 

這意味着，當你重寫send方法，onreadystatechange是null因爲jQuery的不調用send之前設置它。我不知道他們的理由......可能是爲了防止像你正在做的事情......但我從來沒有聽說過或看到這個慣例被使用。

所以你得到它的值作爲null的原因是因爲jQuery調用send後設置onreadystatechange。這意味着當您覆蓋send並嘗試訪問onreadystatechange屬性時，它尚未設置。

希望這是一個例子，可以幫助您瞭解：http://jsfiddle.net/dMP6q/16/

Answer 2

你應該自己設置它，當狀態改變時這個函數會被調用。這就像其他的事件處理程序，如document.onload，yourelement.onclick等

古典你做

var httpRequest = new XMLHttpRequest(); 
    httpRequest.onreadystatechange = function() { 
     if (httpRequest.readyState === 4) { 
       if (httpRequest.status === 200) { 
        // use httpRequest.responseText 
       } 
     } 
    }; 
    httpRequest.open('GET', url); 
    httpRequest.send();