完成上一个请求后如何重新发送Ajax请求

Question

I am trying execuiting a simple Ajax request to a web page (triggered by a onclick event on a button):

    // 1. crea un oggetto di tipo XMLHttpRequest
var myRequest = new XMLHttpRequest();
// 2. usa il metodo open per richiedere una risorsa sul sito remoto
myRequest.open('GET', 'http://www.classiperlo.altervista.org/File%20comuni/ora_ajax.php?y=' + Math.random(),true);
// 3. ogni volta che cambia lo stato dell'oggetto esegue una funzione
myRequest.onreadystatechange = function () { 
    // 4. readyState === 4 indica che il server ha risposto
    if (myRequest.readyState === 4) {
        // 5. inserisce il contenuto della risposta in un DIV
        document.getElementById('ajax-content').innerHTML = myRequest.responseText;
    }
};

function sendTheAJAX() {
    myRequest.send();
}

I don't understand why, when I click again, I receive always the same information from the server. I mean, my page ora_ajax.php simply displays current time in php and this information is not refreshed when I send a new request.

Where is my error? Thanks a lot for helping!

Answer 1

Try to put your 'request creation and open' code in another function and call that function when you want to send another request.

function sendRequest(){
  var myRequest = new XMLHttpRequest();
  ...
return myRequest;
}

function sendTheAJAX() { sendRequest(); }

Answer 2

Thanks for your kind help. Solved simply putting all the code inside the function triggered by onclick event:

function sendTheAJAX() {
// 1. crea un oggetto di tipo XMLHttpRequest
var myRequest = new XMLHttpRequest();
// 2. usa il metodo open per richiedere una risorsa sul sito remoto
myRequest.open('GET', 'http://www.classiperlo.altervista.org/File%20comuni/ora_ajax.php?y=' + Math.random(),true);
// 3. ogni volta che cambia lo stato dell'oggetto esegue una funzione
myRequest.onreadystatechange = function () { 
    // 4. readyState === 4 indica che il server ha risposto
    if (myRequest.readyState === 4) {
        // 5. inserisce il contenuto della risposta in un DIV
        document.getElementById('ajax-content').innerHTML = myRequest.responseText;
    }
};

    myRequest.send();
}

In this way a new object myRequest is created at every click on the button.

Answer 3

Put all of the XHR code inside sendTheAJAX above .send() , then call the entire thing, otherwise the Math.random() never changes.

After reading your comment, you can just remove that part. Seems you don't need it.

Note that if you were to use it Math.random() returns a number between 0 and 0.99999999, never 1.

function sendTheAJAX(successFunc, context){
  var xhr = new XMLHttpRequest, c = context || this;
  xhr.open('GET', 'http://www.classiperlo.altervista.org/File%20comuni/ora_ajax.php');
  if(xhr.readyState === 4 && xhr.status === 200){
    successFunc.call(c, xhr.responseText);
  }
  xhr.send();
  return xhr;
}
function yup(){
  sendTheAJAX(function(respTxt){
    document.getElementById('ajax-content').innerHTML = respTxt;
  });
}
yup(); // remove if you don't want call here
document.body.onclick = yup;