1

私が書いたいくつかの古い JavaScript を乾燥させようとしています。

テスト（）

function test() {
    var output = function() {
        return ajaxPost("test.php", "testvar=bananas");
    }
    document.getElementById("main").innerHTML = output;
}

ajaxPost()

function ajaxPost(file,stuff) {
    var xmlhttp;
    var actionFile = file;
    var ajaxVars = stuff;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            return xmlhttp.responseText;
        } else {
            // Waiting...
        }
    }

    xmlhttp.open("POST", actionFile, true);

    //Send the proper header information along with the request
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlhttp.send(ajaxVars);
}

私が受け取っている出力は次のとおりです。

<div id="main">
    function () { return ajaxPost("test.php", "testvar=bananas"); }
</div>

関数が実際に行うべきことではなく、関数をdivに貼り付けている理由がわかりません。何かご意見は？

4

1 に答える 1

6

追加()して関数を実行する必要があります。そうしないと、関数本体を受け取ります!

function test() {
    var output = function() {
        return ajaxPost("test.php", "testvar=bananas");
    }
    document.getElementById("main").innerHTML = output();
}

さらに、ここで AJAX 呼び出しから値を返そうとします

 return xmlhttp.responseText;

非同期呼び出しでは戻り値をキャッチするものがないため、これは機能しません! 戻り値を使用するある種のコールバックを呼び出す必要があります。

編集

これは、コードに似たコールバック アプローチになります。

function test( data ) {
    document.getElementById("main").innerHTML = data;
}

function ajaxPost(file,stuff,cb) {

    // ...

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            cb( xmlhttp.responseText );
        } else {
            // Waiting...
        }
    }
    // ...
}

// make the actual call
ajaxPost("test.php", "testvar=bananas", test);
于 2013-04-09T15:42:09.440 に答える