javascript - how can I show my loading icon after my ajax is finished -

javascript - how can I show my loading icon after my ajax is finished -

i have simple javascript function so:

function showhint() { var xmlhttp = new xmlhttprequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { //extract info here } } xmlhttp.open("get", "articles.php?q=" + cat + "&year1=" + start_year + "&year2=" + end_year, true); xmlhttp.send(); }

i want able show loading icon after ajax finishes. show loading icon @ origin of js using:

$.mobile.loading("show");

which shows icon nicely (using jquery mobile). however, need hide icon after ajax finished. i've attempted utilize .done() in jquery don't think i'm using properly:

xmlhttp.onreadystatechange.done(function(){ $.mobile.loading("hide"); });

you need utilize onreadystatechange callback function.

xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { $.mobile.loading("hide"); } }

as using jquery. can utilize jquery.get() like

$.mobile.loading("show"); $.get("articles.php?q=" + cat + "&year1=" + start_year + "&year2=" + end_year, function(data) { //do }).done(function() { $.mobile.loading("hide"); });

javascript jquery ajax jquery-mobile