当前针对Ajax请求的最佳实践

Question

我在一边编写代码，然后拔出了我与朋友建立的一些旧网站，以重新开始工作。 我已经有一段时间没有做任何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
    }
});

我的目标是使用“成功”或“ 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);

您可以在此处阅读有关制作XMLHttpRequests的信息 。