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条件时调用的回调不能保证在达到main函数结束之前完成。要从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()中执行您想要的操作。

Javascript ajax返回错误的值

2 个答案: