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
    }
});

我的目标是使用＆＃34;成功＆＃34;或者＆＃34; onSuccess＆＃34;确保找到页面，如果可能的话，从php文件中返回console.log。

问题： - 我的方法是一个安全问题，需要重大更新？ - 如果是这样，我是否需要咬紧牙关并更新jQuery？ - 如果没有，有人可以建议我如何做某种形式的成功＆＃34;使用我现有的代码打电话？例如：ajaxRequest.success(console.log(something));

Answer 1

您的旧代码不使用JQuery来执行AJAX调用，因此无论1.4版本在哪里，都不适用于AJAX。

您的问题实际上归结为是否使用JQuery执行此任务。 JQuery只不过是一个JavaScript库，它使许多任务更容易编写。由于JQuery 是 JavaScript，因此JQuery绝对没有任何东西可以做到这一点。如果您要使用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 。

Ajax请求的当前最佳实践

1 个答案: