Return data from webserver with ajax

Question

I use this code to upload file with ajax.

$('form').submit(function(e) {
  e.preventDefault();
  var fd = new FormData(this);
  $.ajax({url: $(this).attr('action'),
          xhr: function() { // custom xhr (is the best)
    var xhr = new XMLHttpRequest();
    //load
    xhr.upload.addEventListener("load", function(evt) {
      $("#msg").text(evt.target.responseText);
    }, false);
    return xhr;
  },
  type: 'post',
  processData: false,
  contentType: false,
  data: fd,
  success: function(data) {
    // do something...    
  }});
});

I want to display a message in the #msg div when the upload is complete. The message is printed server side using php. Normally evt.target.responseText contains the data from the server, but it contains [object XMLHttpRequestProgressEvent] (which in turn gets written to #msg). I tried printing evt.responseText and evt.response but both also return [object XMLHttpRequestProgressEvent].

I accidentally changed the title to Return data from webserver with java instead of Return data from webserver with ajax because I am dumb. Can anyone fix this real quick? — molenzwiebel
– molenzwiebel, Commented Jan 12, 2015 at 15:42

Schien · Accepted Answer · 2015-01-12 15:51:43Z

2

Move the line to the "success" callback function block.

An AJAX request call, or its underlying XMLHttpRequestObject (XHR) call is executed asynchronously. The "load" is a Level 3 event that notifies the calling script the progress of the execution. The evt object can be interrogated for use cases such as a file uploader progressbar.

The "success" event is mapped to readyState==4, which is checked by the onreadystatechange callback function.

Using raw XHR:

xhr = new XMLHttpRequest();
xhr.open('GET', your_url, true);
xhr.onreadystatechange=function(){
  if (xhr.readyState==4){
    document.getElementById('res').innerHTML=xhr.responseText;
  } else {
    document.getElementById('res').innerHTML='loading...';
  }
}

xhr.send(null);

Realistically you can just display the loading text before the XHR call.

Tracking file uploading progress is different:

xhr.upload.onprogress=function(e){
    if (e.lengthComputable)
       document.getElementById('res').innerHTML=Math.round(e.loaded*100/e.total)+'%';
    else document.getElementById('res').innerHTML='uploading...';
};

xhr.onload=function(e){
  //display success message
}

Make sure that xhr.upload is not null. If it is, then you don't have Level 3 AJAX support on the browser.

edited Jan 12, 2015 at 15:51

answered Jan 12, 2015 at 15:38

Schien

3,9231 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

adib16 Over a year ago

i test in success callback and that work but i want to get data from server in "progress" event.

Schien Over a year ago

let me edit the answer to reflect that... what do you want to show during loading though. partial result or a "loading" notification/animation?

adib16 Over a year ago

i want to show the left time for uploading.and in the server side calculate internet speed .so i want to get internet speed in every ajax request

Schien Over a year ago

you should have mentioned it's for a file upload; because the handling of upload progress is different. let me update the answer again...

Schien Over a year ago

use the elapsed time and progress percentage to calculate instead of measuring network speed. the speed is cancelled out mathematically. let the uploader run for a bit first to gather more accurate stats. it also prevents zero division. there's a reason many uploaders you've seen will only give you an estimate after a while.

|

Collectives™ on Stack Overflow

Return data from webserver with ajax

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related