[英]ajax synchronous call problem
我有一個 Ajax function 看起來像:
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 (加載圖像必須出現在頁面中心):
function loadingImage(type)
{
document.getElementById("body").innerHTML = "<div class='loading'></div>";
}
那我怎么稱呼 ajax function:
var loadedData = getData("home");
if(loadedData)
{
document.getElementById("body").innerHTML = loadedData;
}
else
{
document.getElementById("body").innerHTML = "Error";
}
但是加載圖像不會出現,這很簡單,但我被困在這里,如何在請求數據時顯示加載圖像,然后用加載的數據替換加載圖像。 謝謝
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
。 如果readystate
為 4 (LOADED),則獲取數據並將其發送到您的回調。
如果 AJAX 失敗,則使用null
或false
調用回調。
在您的回調中獲取loadedData
並渲染它,或者如果沒有數據則拋出錯誤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.