Return data from webserver with ajax - php

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].

Answer 1

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.