Javascript Ajax返回錯誤值

Question

問題：如果我調用ajax函數，我將無法獲得返回值。

以下是我的簡單javascript和ajax文件。

Javascript Ajax

<script type="text/javascript">
    function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                return this.responseText;
            }
        };
        xhttp.open("GET", "testAjax.php", true);
        xhttp.send();
    }
    alert(loadDoc());
</script>

的PHP

<?php
    echo "Hello World !!!";
?>

synchronous或asynchronous概念對這個問題有用嗎？

謝謝。

Answer 1

問題是ajax請求的異步特性和代碼的執行流程。 當滿足onreadystatechange的條件時，不能保證在達到主要功能的結束之前完成回調。 為了從ajax函數獲得回報，您需要使用Promises

let oPromise = new Promise( ( resolve, reject ) => {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            resolve( this.response );
        }
    };
    xhttp.open('GET', 'testAjax.php', true);
    xhttp.send();
});

oPromise.then( ( data ) => {
  alert('Whoohoo! -> ' + data );
});

在某種程度上，上面的語法是不熟悉的，也許有些混亂-可以用更熟悉/傳統的方式重寫它，如下所示：

let oPromise = new Promise( function( resolve,reject ){
    var xhr = new XMLHttpRequest();
    xhr.onload=function(){
        resolve( this.response )
    };
    xhr.onerror=function(){
        reject( this.readyState )
    };
    xhr.open('GET', 'testAjax.php', true);
    xhr.send();
});
oPromise.then( function( response ){
     alert('Whoohoo! -> ' + response );
});

Answer 2

您需要像這樣更改邏輯：

function doJobWhenAjaxResultIsReturned(ajaxData){
    // alrt(ajaxData);
}
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      doJobWhenAjaxResultIsReturned(this.responseText);
    }
  };
  xhttp.open("GET", "testAjax.php", true);
  xhttp.send();
}
loadDoc();

然后在doJobWhenAjaxResultIsReturned()執行您想要的doJobWhenAjaxResultIsReturned() 。