CODEWITHSUNDEEP
javascriptphpajax
Muneem Habib
Muneem Habib

Reputation: 1104

Http request is sending 2 times through AJAX

My AJAX code is as follows:

data = new FormData();
   //  data="";
    paths = "";


    // Create a new HTTP requests, Form data item (data we will send to the server) and an empty string for the file paths.
    xhr = new XMLHttpRequest();


    // Set how to handle the response text from the server
    xhr.onreadystatechange = function(ev){
        //console.debug(xhr.responseText);
     //  console.log("success"+xhr.responseText);

    try{
      console.log($.parseJSON(xhr.responseText));

       var data=$.parseJSON(xhr.responseText);

      if(data.success=="yes"){

          projectCounter++;            
          var projectName=$.parseJSON(data.arguments);
          console.log(projectName.projectName);

          console.log('update table');

          if(projectCounter==2){

              UploadComplete(projectName.projectName);

          }


      }

     } 
     catch(e){}

    };

    // Loop through the file list
    for (var i in files){
        // Append the current file path to the paths variable (delimited by tripple hash signs - ###)
        paths += files[i].webkitRelativePath+"###";
        // Append current file to our FormData with the index of i
        data.append(i, files[i]);
    };
    // Append the paths variable to our FormData to be sent to the server
    // Currently, As far as I know, HTTP requests do not natively carry the path data
    // So we must add it to the request manually.
    data.append('paths', paths);
    // console.log(paths);   
    // Open and send HHTP requests to upload.php
    xhr.open('POST', "upload.php", true);
     console.log(data);   

    xhr.send(this.data);

the issue i am facing is that it is sending http request 2 times. I am recieving Http response 2 times. I have written console.log("update Table") and it is showing 2 times. I am very confused why i am recieving 2 times Http response instead of the fact that i am sending only 1 request?

Upvotes: 0

Views: 1772

Answers (3)

Peter Aron Zentai
Peter Aron Zentai

Reputation: 11750

You are receiving multiple readyState events in the course of a request. What you want here is to only be notified when the request completes.

Extend your handler with this:

if(xhr.readyState === 4  //ready) {

}

UPDATE: The original problem was solved with simple equality check (untyped), which leads to the assumption that in some browsers the readyState is a string typed field containing a number.

if(xhr.readyState == 4  //ready) {

}

Upvotes: 1

Udi Cohen
Udi Cohen

Reputation: 1289

I think the problem is you are not checking the readyState value of the xhr. The onreadystatechange callback code should be wrapped with an if statement:

if (xhr.readyState === 4) {
    // your code here...
}

Only when the readyState is 4, the request is actually done.

Regards, Udi

Upvotes: 0

Quentin
Quentin

Reputation: 944113

You aren't testing the readyState in your onreadystatechange handler. The function will fire every time the state changes. It is usual to abort the function (by returning) when the readyState isn't done.

xhr.onreadystatechange = function(ev){
    if (this.readyState !== 4) {
        return;
    }
    // ...

Upvotes: 1

Related Questions