javascript - 当前 Ajax 请求的最佳实践

Question

我一边编码，一边拿出一些我和 friend 建立的旧网站来重新开始工作。我已经有一段时间没有做过任何 AJAX 了，当我试图找出我的代码失败的地方时，我发现没有显示很多资源。我猜这是因为我使用的是旧方法。我想看看我是否应该考虑对我的方法进行快速改变，或者是否有人知道一种方法来处理我必须找到的问题。这些网页使用 jQuery 1.4.4，所以相当老了。

这是我的旧代码:

var ajaxRequest = getAjaxRequest();
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4) {
        document.getElementById("apple").style.display = "block";
        setTimeout(function(){ document.getElementById("apple").style.display = "none"; },2000);
    }
}
ajaxRequest.open("GET", "url.php" + encodeURIComponent(appleObject), true);
ajaxRequest.send(null);

我看到很多代码更像是:

$.ajax({
    type: "GET",
    url: "url.php",
    success: function(something){
        something
    }
});

我的目标是使用“success”或“onSuccess”来确保找到页面，并在可能的情况下使用 console.log 从 php 文件返回的内容。

问题:-我的方法是否存在安全问题，需要重大更新？-如果是这样，我是否也需要硬着头皮更新 jQuery？-如果没有，有人可以建议我如何使用现有代码进行某种形式的“成功”调用吗？即类似:ajaxRequest.success(console.log(something));

Answer 1

您的旧代码不使用 JQuery 进行 AJAX 调用，因此无论 1.4 版本的用途是什么，它都不适用于 AJAX。

您的问题实际上归结为是否使用 JQuery 来完成此任务。 JQuery 只不过是一个 JavaScript 库，它使许多任务的编写变得更简单。绝对没有 JQuery 能做的事，没有它就做不到，因为 JQuery 就是 JavaScript。如果您要使用 JQuery，那么 JQuery 将在幕后执行您的原始代码已经执行的操作。

您的原始代码已经有一个“成功”部分，只是没有专门标记。但是，它确实缺少对 request.status === 200 的第二次测试。了解请求的响应是否良好(200 是 OK 的 HTTP 状态代码)。

所以，原始代码实际上应该是这样的:

var ajaxRequest = getAjaxRequest();
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4) {
      // Response received...
      if(ajaxRequest.status === 200){
        // Request was successful - returned data (if any)
        // is available via the xhr.responseText property
        document.getElementById("apple").style.display = "block";
        setTimeout(function(){ 
         document.getElementById("apple").style.display = "none"; 
        },2000);
      }
    }
}
ajaxRequest.open("GET", "url.php" + encodeURIComponent(appleObject), true);
ajaxRequest.send(null);

但是，您可以对此处的语法进行一些现代化，使其更加直观:

var ajaxRequest = getAjaxRequest();
ajaxRequest.addEventListener("load", function(data){
  // Request was successful - returned data (if any)
  // is available via the xhr.responseText property
  document.getElementById("apple").style.display = "block";
    setTimeout(function(){ 
      document.getElementById("apple").style.display = "none"; 
    },2000);
});

ajaxRequest.addEventListener("error", function(evt){
  // Request was unsuccessful
  console.log("ERROR", evt)
});

ajaxRequest.open("GET", "url.php" + encodeURIComponent(appleObject), true);
ajaxRequest.send(null);

您可以阅读有关 making XMLHttpRequests here的内容。