ajax同步调用问题
ajax synchronous call problem
我有一个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";
}
但是加载图像不会出现,这很简单,但我被困在这里,如何在请求数据时显示加载图像,然后用加载的数据替换加载图像。感谢
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
,如果没有数据,则渲染它或抛出错误。
相关文章:
- d3-js快速事件调用问题
- 运行Infinite Scroll后调用函数时出现问题
- "访问控制允许起源”;通过javascript从http页面调用同一网站的httpsurl时出现问题
- Meteor HTTP调用出现问题
- JQuery FullCalendar在从ajax成功调用rerenderEvents时遇到问题
- 使用setInterval调用原型函数时出现问题
- 在HTML中调用函数时出现问题
- 在javascript中调用自定义谷歌搜索标签时出现问题
- setTimeout调用自身的任何问题
- Node.js-异步方法调用问题
- 客户端和服务器端调用 asp 按钮的问题
- 递归承诺调用 - 内存范围变量问题
- 在单击按钮时调用 jquery 函数时出现问题
- JS onclick问题调用css精灵的图片
- 节点/快速路由问题-调用不正确的路径
- 数据源查询回调问题(调用顺序,改变全局变量的能力)
- 更新面板中的中继器- itemcommand代码问题-调用javascript函数与ScriptManager在代码后面
- android:从java问题调用javascript
- 同源策略问题调用sharepoint web服务
- 从 Java 脚本安全问题调用已签名的 Java 小程序