2011-07-22 27 views
0

私はのように見えるのAjax機能を持っていますどのように私は、AJAX機能を呼び出す:AJAX同期呼び出し問題

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

が、読み込み画像が表示されません、それは非常に簡単だが、私ここでは、データを要求している間に画像を読み込んでから、読み込んだ画像を読み込んだデータに置き換える方法を示しています。おかげ

+0

はなぜですか?...そして、どの方法が – John

+0

_Asynchronous_ JAXを使用します。あなたは 'loadingImage'関数を呼び出している' onreadystatechange'イベントハンドラ – Raynos

+0

を使用しますか? –

答えて

1
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"; 
    } 
}); 

.openコールで使用async = true

バインドreadystatechangeへのEventHandler。 readystateが4(LOADED)の場合、データを取得してコールバックに送信します。

AJAXがコールバックに失敗した場合は、nullまたはfalseでコールバックしてください。あなたのコールバックで

loadedDataを取得し、それをレンダリングするか、データが存在しない場合はエラーをスローいずれか。

関連する問題