ajax synchronous call problem

Question

I have an Ajax function which looks like :

  function getData(p) {
  loadingImage();
  p = p.replace("frame_", "");
  if (window.XMLHttpRequest) {              
    AJAX=new XMLHttpRequest();              
  } else {                                  
    AJAX=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (AJAX) {
     var __page =encodeURIComponent(p);
     AJAX.open("GET", "page.php?page="+__page, false);                             
     AJAX.send(null);
     var __data = AJAX.responseText.match(/<data>[\s\S]*?<\/data>/gmi);
     if(!__data) { return false; }
     return __data;      
  } else {
     return false;
  }      
}

then i have very simple loading function ( an loading image must appear in center of page ) :

function loadingImage(type)
{
   document.getElementById("body").innerHTML = "<div class='loading'></div>";
}

then how i call ajax function :

 var loadedData = getData("home");
 if(loadedData)
 {
   document.getElementById("body").innerHTML = loadedData;
 }
 else
 {
  document.getElementById("body").innerHTML = "Error";
 }

but the loading image won't appear, it's quite simple, but i'm stuck here , how make it to show that loading image while requesting data, then to replace loading image with loaded data. Thanks

_Asynchronous_ JAX. Use the `onreadystatechange` event handler — Raynos, Jul 22 '11 at 10:31
@John: see [Synchronous v. Asynchronous](http://yuiblog.com/blog/2006/04/04/synchronous-v-asynchronous/) for why you shouldn't use SJAX and how to handle asynchronous requests. — outis, Jul 22 '11 at 10:33
@Raynos at beginning of the getData function ( edited now, from loading() to loadingImage() ) — John, Jul 22 '11 at 10:38
@outis thanks, i will try to find an solution, last time when i used Ajax it returned 'undefined' result — John, Jul 22 '11 at 10:39

score 1 · Accepted Answer · answered Jul 22 '11 at 10:44

function getData(p, cb) {
    loadingImage();
    p = p.replace("frame_", "");
    if (window.XMLHttpRequest) {
        AJAX = new XMLHttpRequest();
    } else {
        AJAX = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (AJAX) {
        var __page = encodeURIComponent(p);
        AJAX.open("GET", "page.php?page=" + __page, true);
        AJAX.onreadystatechange = function(e) {
            if (AJAX.readystate === 4) {
                var __data = AJAX.responseText.match(/<data>[\s\S]*?<\/data>/gmi);
                cb(data);
            }
        };
        AJAX.send(null);
    } else {
        cb(null);
    }
}

getData("home", function(loadedData) {
    if (loadedData) {
        document.getElementById("body").innerHTML = loadedData;
    }
    else {
        document.getElementById("body").innerHTML = "Error";
    }
});

Use async = true in the .open call.

Bind an eventhandler to readystatechange. If the readystate is 4 (LOADED) then get the data and send it to your callback.

If the AJAX fails call the callback with null or false.

In your callback get the loadedData and either render it or throw an error if there is no data.

ajax synchronous call problem

1 Answers1