XMLHttpRequest.onreadystatechange與addEventListener

Question

閱讀XMLHttpRequest以在Google Chrome擴展中使用，並且遇到問題。

MDN specifies usingXMLHttpRequest.addEventListener，而Google usesXMLHttpRequest.onreadystatechange在他們的例子中。

向Google Apps腳本發出GET請求時，這兩種方法之間是否有偏好？我是新來的異步JavaScript，在此之前，我剛剛在GAS工作。

Answer 1

首選項是瀏覽器兼容性。來自MSN上的XMLHttpRequest API文檔。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties

onreadystatechange爲XMLHttpRequest實例的屬性在所有瀏覽器的支持。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Events

更多最新的瀏覽器，包括Firefox，還支持收聽通過標準的API addEventListener的XMLHttpRequest事件除了on*屬性設置爲一個處理函數。

由於Google Apps腳本Web應用程序很快將只支持現代瀏覽器（如本地和模擬模式貶值），你可以使用。

Answer 2

onreadystatechange火災太多，你可能不需要聽它。使用loadend（所有情況包括失敗/中止），load（成功），error，abort事件代替。

查看https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest瞭解更多信息。

Answer 3

另外，如果你有瀏覽器類型/版本控制，您可以使用傳遞給onreadystatechange的funcion對象做了填充工具：

var oReq = new XMLHttpRequest(); 
// This part for modern browsers 
oReq.addEventListener("progress", updateProgress, false); 
oReq.addEventListener("load", transferComplete, false); 
oReq.addEventListener("error", transferFailed, false); 
oReq.addEventListener("abort", transferCanceled, false); 
// This part for old ones 
oReq.onreadystatechange = functionSwitch; 

凡functionSwitch將調用正確的函數（會的UpdateProgress，transferComplete之間選擇，...），所以避免了雙重代碼。

我見過使用Windows XP的人，可能任何addEventListener都不起作用。看看：addEventListener Compatibility。我沒有通過addEventListener找到特定的xmlhttprequest事件列表。