当前Ajax请求的最佳实践

Question

I code on the side, and I pulled out some old websites I built with a friend to get working again. I haven't done any AJAX for a while and as I try to figure out where my code is failing, I am finding that there are not a lot of resources showing up. I am guessing that it is because I am using old methods. I am trying to see if there is a quick change to my approach I should consider, or whether somebody knows a way to work with what I have to find the problem. These webpages use jQuery 1.4.4, so quite old.

Here is my old code:

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

I am seeing a lot of code more like:

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

My goal is to use the "success" or "onSuccess" to make sure the page was found and console.log something returned from the php file if possible.

Questions: -Is my method a security problem, needing major update? -If so, am I just going to need to bite the bullet and update jQuery, too? -If not, can somebody suggest how I can do some form of "success" call using my existing code? i.e. something like: ajaxRequest.success(console.log(something));

Answer 1

Your old code does not use JQuery to do the AJAX call, so whatever the 1.4 version was in there for, it wasn't for AJAX.

Your question really boils down to whether or not to use JQuery for this task. JQuery is nothing more than a JavaScript library that makes many tasks simpler to write. There is absolutely nothing that JQuery can do that you can't do without it because JQuery is JavaScript. If you were to use JQuery, then behind the scenes, JQuery would just be doing what your original code already did.

Your original code already has a "success" section, it's just not labelled that specifically. But, it does lack a second test for the request.status === 200 to know that the response from the request was a good one (200 is the HTTP status code for OK).

So, the original code should really have been this:

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

But, you can modernize the syntax here a bit to make it a bit more intuitive:

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

You can read about making XMLHttpRequests here.