AJAX的onreadystatechange函數調用

爲什麼不工作的代碼（調用handleRequestStateChange功能時）?:AJAX的onreadystatechange函數調用

function ajaxRequest(){ 
var xmlObj = new XMLHttpRequest(); 
xmlObj.open("GET","1.php",true); 
xmlObj.onreadystatechange = handleRequestStateChange; 
xmlObj.send(null); 
} 

var handleRequestStateChange = function(){ 
    if(xmlObj.readyState == 4 && xmlObj.status==200){ 
     alert("if loaded"); 
    } 
}

但是這一個（不調用handleRequestStateChange功能）：

function ajaxRequest(){ 

var xmlObj = new XMLHttpRequest(); 
xmlObj.open("GET","1.php",true); 

xmlObj.onreadystatechange = function(){ 
    if(xmlObj.readyState == 4 && xmlObj.status==200){ 
      alert("if loaded"); 
    } 
} 
xmlObj.send(null);}

來源

2014-05-12 denispr00

在第一個例子中，當你說'xmlObj.onreadystatechange = handleRequestStateChange;'時，變量'handleRequestStateChange;'沒有值。當你聲明它是一個函數時，它只會在稍後的幾個語句中賦值。 –

我不確定@JonathanM是否正確，因爲通過變量提升/延遲調用回調可以根據何時調用'ajaxRequest'來定義，但是在'handleRequestStateChange'中引用'xmlObj'並且即使請求被正確添加，該變量超出了範圍，因此未定義。 – lemieuxster

在這種特殊情況下，問題只是在變量的範圍內，在這種情況下，ajaxRequest可以「看到」handleRequestStateChange，但handleRequestStateChange不能「看到」xmlObj。在第二個示例中，匿名函數可以看到xmlObject，因爲它在「內部」ajaxRequest中。

一個好的開始是這個計算器的答案。 https://stackoverflow.com/a/500459/1480215

例如，刪除var實際上修復了第一個代碼（這不是一個好主意）。

function ajaxRequest(){ 
    xmlObj = new XMLHttpRequest(); //suddenly global scope 
    xmlObj.open("GET","1.php",true); 
    xmlObj.onreadystatechange = handleRequestStateChange; 
    xmlObj.send(null); 
} 

var handleRequestStateChange = function(){ 
    if(xmlObj.readyState == 4 && xmlObj.status==200){ 
    alert("if loaded"); 
    } 
}

下面的代碼也將工作

function ajaxRequest(){ 
    var xmlObj = new XMLHttpRequest(); 
    var handleRequestStateChange = function(){ 
    if(xmlObj.readyState == 4 && xmlObj.status==200){ 
     alert("if loaded"); 
    } 
    } 
    xmlObj.open("GET","1.php",true); 
    xmlObj.onreadystatechange = handleRequestStateChange; 
    xmlObj.send(null); 
    //but not if var handleRequestStateChange is here 
    //due to https://stackoverflow.com/a/336868/1480215 
}

對於完整性我還將包括下面這應該工作

function ajaxRequest(){ 
    var xmlObj = new XMLHttpRequest(); 

    xmlObj.open("GET","fragments.htm",true); 
    xmlObj.onreadystatechange = handleRequestStateChange; 
    xmlObj.send(null); 

    function handleRequestStateChange(){ //this will work instead of var funcName=function(){} 
    if(xmlObj.readyState == 4 && xmlObj.status==200){ 
     alert("if loaded"); 
    } 
    }  
}

如果我們談論的是嚴格xmlHttpRequest事件的片段（或一般事件），那麼也可以使用傳遞的事件參數。

function ajaxRequest(){ 
    var xmlObj = new XMLHttpRequest(); 
    xmlObj.open("GET","1.php",true); 
    xmlObj.onreadystatechange = handleRequestStateChange; 
    xmlObj.send(null); 
} 

var handleRequestStateChange=function(event){ //event handlers passes this, generally 
    var xmlObj=event.target || event.srcElement //for compatibility 
    //but just having XMLHttpRequest(), is not fully cross-platform anyway 
    if(xmlObj.readyState == 4 && xmlObj.status==200){ 
    alert("if loaded"); 
    } 
}

展望未來，我認爲這可能是使用一個現有的小型AJAX片段或圖書館像http://www.openjs.com/scripts/jx/一個好主意。也許甚至包含RPC的jQuery（包括<script>可以包含來自沒有COR的其他域的腳本）

來源

2014-05-13 07:53:10 mfirdaus

太棒了，它的作品！感謝您的解釋 – denispr00

AJAX的onreadystatechange函數調用

回答

相關問題