CODEWITHSUNDEEP
javascriptjqueryajaxxmlhttprequest
johnohod
johnohod

Reputation: 494

responseText is empty, but shows on console?

This is probably a stupid error, but I'm using JQuery ajax against PHP backend, and I would like the PHP script to post progress back to the webpage.

It looks to be working fine, but I can't get the contents of e.target.responseText.

If i do console.log(e.target), I get the XMLHttpRequest object in the console. And I can see responseText: "1 av 1500 linjer"

But if I do console.log(e.target.responseText) it is empty.

Have I lost my mind?

This is my function:

$.ajax(
    {
        type: "POST",
        url: "modEcs/ajax/ecs.php?a=analyseExcel",
        processData: false,
        contentType: false,
        xhrFields: 
        {
        onprogress: function(e) 
        {               
            console.log(e.target);
            console.log(e.target.responseText);  
            }
        },
        success: function(data) 
        {

         },
         error: function (xhr, ajaxOptions, thrownError) { alert(xhr.statusText); }
    });

Data in console:

XMLHttpRequest
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: function(e)
onreadystatechange: null
ontimeout: null
readyState: 4
response: "1 av 1500 linjer"
responseText: "1 av 1500 linjer"
responseType: ""
responseURL: "xxx"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials: false
XMLHttpRequest-prototype

Upvotes: 8

Views: 2884

Answers (3)

Nick
Nick

Reputation: 465

Obviously it will be empty in onprogress, because server doesn't return any data during the progress. you can only read responseText in success function.

The reason you can see responseText in console(even though you called .log() in onprogress), is because server has actually returned the data already, and called success function too, since you are logging whole object with e.target, the object can get updated at any time, no matter where you logged it, and console will show you its Live version, and not the version which was at the exact moment of its console logging. When object is changed, it will be updated in console too, anywhere. But target.responseText is a primitive, its not an object, and console won't update its value when its changed.

Hope this helps future readers.

Upvotes: 0

ScanQR
ScanQR

Reputation: 3820

Try this,

$.ajax({
     type: "POST",
     url: "modEcs/ajax/ecs.php?a=analyseExcel",
     processData: false,
     contentType: false,
     xhr: function(){
        var xhr = new window.XMLHttpRequest();
        // Handle progress
        xhr.addEventListener("progress", function(evt){
        //Do some progress calculations
          console.log(xhr.responseText);
     }, false);

   return xhr;
  },
  complete:function(){
    console.log("Request finished.");
  }
});

Upvotes: 0

Rajesh Grandhi
Rajesh Grandhi

Reputation: 378

progress is only triggered during the XMLHTTPRequest, not at the end when the response was received 

readyState 3: "Downloading; responseText holds partial data."

Upvotes: 1

Related Questions