让 AJAX 与 JavaScript 一起工作

Question

只是指出，我知道如何使用 jQuery 和 AngularJS 来做到这一点。我目前正在从事的项目要求我使用纯 JavaScript.

我正在尝试让 AJAX 与普通的 JavaScript 一起工作。我正在使用 Java/Spring 进行后端编程。这是我的 JavaScript 代码：

/** AJAX Function */
ajaxFunction = function(url) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.status == 200) {
            var JSONResponse = JSON.parse(xhttp.responseText);
            return JSONResponse;
        }
    }
    xhttp.open('GET', url, true);
    xhttp.send();
}

/** Call Function */
searchResults = function() {
    var test = ajaxFunction('http://123.456.78.90:8080/my/working/url');
    console.log(test);
}

/** When the page loads. */
window.onload = function() {
    searchResults();
}

值得注意的是，当我直接转到浏览器地址栏中的 URL 时（例如，如果我直接转到 link http://123.456.78.90:8080/my/working/url），我会得到一个 JSON 浏览器响应。

当我将鼠标悬停在 xhttp.status 上时，状态显示为 0，而不是 200，尽管我知道我正在呼叫的 link 有效。这是你必须在 Spring 的控制器中设置的东西吗？我不认为是这种情况，因为当我在“网络”选项卡中检查此 JS URL 调用时，它指出状态为 200。

总而言之，此响应返回为 undefined。我不知道为什么。我做错了什么？

Answer 1

XMLHttpRequest 是异步生成的，这意味着请求被触发，其余代码继续到运行。提供回调，当异步操作完成时调用回调函数。 onreadystatechange 函数在 AJAX 请求完成时调用。在您的示例中，ajaxFunction 将在 xhttp.send() 行执行后立即 return，因此您的 var test 不会像我假设的那样在其中包含 JSON .

为了在 AJAX 请求完成时执行某些操作，您需要使用回调函数。如果你想像上面那样将结果记录到控制台，你可以尝试如下操作：

var xhttp;

var handler = function() {
    if(xhttp.readyState === XMLHttpRequest.DONE) {     
        if (xhttp.status == 200) {
            var JSONResponse = JSON.parse(xhttp.responseText);
            console.log(JSONResponse);
        }
    }
};

/** AJAX Function */
var ajaxFunction = function(url) {
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = handler;
    xhttp.open('GET', url, true);
    xhttp.send();
};    

/** Call Function */
var searchResults = function() {
    ajaxFunction('http://123.456.78.90:8080/my/working/url');
};

/** When the page loads. */
window.onload = function() {
    searchResults();
};

如果您想了解更多关于 XMLHttpRequest 的工作原理，那么 MDN 是比我更好的老师:)

让 AJAX 与 JavaScript 一起工作

Getting AJAX to Work With JavaScript

javascript

java

ajax

spring

http-status-codes