JQM - How to get dynamic data when page loads using XMLHttpRequest?

Question

I use pageinit to load page. I call an XMLHttpRequest to send and get request to PHP programs on Linux, using RESTful API on server side. The server side accept an array I send to it and echo an JSON back. It all work well. However, HTTP_GET functions returns back to page and displays content before it finished and got a response from server.

How can I prevent it from going back before it responded?

pageinit

$(document).on("pageinit","#quote_open1",function(){

             alert('pageinit quote_open1');
             openPage(); });

openPage

function openPage(url, jsontest){
    var jsonResponse=HTTP_GET( url, jsontest);
          alert('!!!!!!!!!!!!!!!!-->'+jsonResponse);
}

HTTP_GET

function HTTP_GET( url, jsonToSend){

   alert('START HTTP_GET');

   var jsonResponse;

    //send get request to server
    xhr = new XMLHttpRequest(); 
    xhr.open("GET",url+"jsonToSend",true);  //open server connection                
    xhr.send();//this is where json string will be sent out
   //  
    //this function send 

    xhr.onreadystatechange = function() 
      {
    if (xhr.readyState == 4)  //read server response
            {
            alert(xhr.readyState);
            jsonResponse=xhr.responseText;
            alert("!!!jsonResponse="+jsonResponse);
            alert("!!!xhr.responseText"+xhr.responseText);

            return "server returned a response 1"; //RETURNS this all the time
            }
        };  
   alert('END HTTP_GET');
   if (xhr.readyState == 4) return  "server returned a response 2"; //want to return this when leaves this function
   return "stil in progress returns before it's finished";
};

(this 3 functions are in different js)

Thanks.

Yes, you're doing an asynchronous ajax request, and I wouldn't recommand otherwise. Besides, for the sake of compatibility, I would rather use a jQuery ajax call. — Maurice Perry, Jan 19 '14 at 08:22

score 0 · Answer 1 · answered Jan 19 '14 at 02:04

what you miss here is the fact that xhr is asynchrone, so your function HTTP_GET returns before the request is done.

You could use a callback function like this :

  $(document).on("pageinit","#quote_open1",function(){

             console.log('pageinit quote_open1');
             openPage(); });



function openPage(){

var doTheJob = function(jsonResponse){ console.log('jsonResponse : '+jsonResponse); }

    HTTP_GET( url, doTheJob);

}

function HTTP_GET( url,callBackFunc){

   console.log('START HTTP_GET');

   var jsonResponse;

    //send get request to server
    xhr = new XMLHttpRequest(); 
    xhr.open("GET",url,true);  //open server connection                

    xhr.onreadystatechange = function() 
      {
    if (xhr.readyState == 4)  //read server response
            {


            callBackFunc(xhr.responseText);
            }
        }; 
   xhr.send();//this is where json string will be sent out
   //  

   console.log('END HTTP_GET');
};

I don't see how this solves the problem: the "pageinit" handler will still finish before the ajax request is done. — Maurice Perry, Jan 20 '14 at 06:41
Hi. Yes you're right, the json returned by the url will be performed briefly after the init is done, but i don't think that was the problem of op. In his code, the json returned by the url was never performed. — Arsnow, Jan 20 '14 at 10:21

JQM - How to get dynamic data when page loads using XMLHttpRequest?

1 Answers1