Javascript Ajax前端調用asp.net C＃后端

Question

我正在嘗試完成簡單但似乎很復雜的任務。 我正在嘗試從純JavaScript（前端）到aspx頁面（后端）進行AJAX調用，但不包括旨在不在前端顯示asp頁面的任何asp ajax庫，即前端僅使用html + JS。

所以這是怎么回事，在前端，此js代碼將使用變量將異步調用發送到ASP頁面。 該變量來自文本框值。

 function handleRequest() {
    if (xhr.readyState < 4) {
        return; // The response is not available yet , we do nothing
    }
    if (xhr.status !== 200) {
        alert('Error!'); // error HTTP
        return;
    }
}
function getValue() {
    var textVal = document.getElementById("test1").value;
    xhr.open('GET', 'WebForm1.aspx?q=' + textVal , true);
    xhr.send();
    var response = xhr.responseText;
    document.getElementById("bdy").innerHTML = response;
}

var btn = document.querySelector("button");
var xhr = new XMLHttpRequest();
var body = document.getElementById("bdy");
xhr.onreadystatechange = handleRequest;
document.getElementById("header").innerHTML = Date();
btn.addEventListener('click', getValue, true);

現在，在后端的asp代碼將回顯帶有服務器時間戳的文本框值。

protected void Page_Load(object sender, EventArgs e)
        {
            string getRequest = Request.QueryString["q"];
            DateTime dt = DateTime.Now;
            string responseText = getRequest + dt.ToString();
            Response.Write(responseText);
        }

最終，當我進行同步調用時，此代碼非常完美，即xhr.open（'GET'，'WebForm1.aspx？q ='+ temp，false）; 但是如果我發送異步調用即xhr.open（'GET'，'WebForm1.aspx？q ='+ temp，true），則會失敗；

我將衷心感謝您的幫助。

Answer 1

使用異步操作獲得的數據的代碼應放在數據到達后調用的回調中。 您已經有這樣的回調函數handleRequest ：

function handleRequest() {
    if (xhr.readyState < 4) {
        return; // The response is not available yet , we do nothing
    }
    if (xhr.status !== 200) {
        alert('Error!'); // error HTTP
        return;
    }

    var response = xhr.responseText;
    document.getElementById("bdy").innerHTML = response;
}

function getValue() {
    var textVal = document.getElementById("test1").value;
    xhr.open('GET', 'WebForm1.aspx?q=' + textVal , true);
    xhr.send();
}

Answer 2

我找到了答案。 問題在於，在進行AJAX同步調用時，瀏覽器將等待服務器的響應，然后再將結果存儲到變量響應中，從而顯示結果。 但是，在進行異步調用時，瀏覽器不會等待響應，因此響應變量將為null，innerHTML將顯示內容。

通過在響應接收代碼行中添加延遲，代碼可以完美工作。 這是代碼。

setTimeout(function () {
    var response = xhr.response;
    document.getElementById("bdy").innerHTML = response;
}, 50);

謝謝