проблема синхронного вызова ajax - PullRequest
Новая
       17

проблема синхронного вызова ajax

0 голосов
/ 22 июля 2011

У меня есть функция Ajax, которая выглядит следующим образом: 

  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;
  }      
}

, тогда у меня есть очень простая функция загрузки (изображение загрузки должно появляться в центре страницы): 

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

затемкак я вызываю функцию ajax: 

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

но изображение загрузки не появится, это довольно просто, но я застрял здесь, как заставить его показать это изображение загрузки при запросе данных, а затем заменитьзагрузка изображения с загруженными данными.Спасибо

1 Ответ

1 голос
/ 22 июля 2011 
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";
    }
});

Используйте async = true в вызове .open.

Привязать обработчик событий к readystatechange.Если readystate равно 4 (ЗАГРУЗЛЕНО), то получите данные и отправьте их вашему обратному вызову.

Если AJAX не работает, вызовите обратный вызов с помощью null или false.

InВаш обратный вызов получает loadedData и либо отображает его, либо выдает ошибку, если данных нет.

...