Ajax同一页面同时执行多个XMLHTTP (1)

最新推荐文章于 2024-01-14 15:30:03 发布

jia520

最新推荐文章于 2024-01-14 15:30:03 发布

阅读量169

点赞数

分类专栏： AJAX 文章标签： Ajax Firefox Microsoft JSP

AJAX 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用AJAX在同一页面上并发处理多个请求的方法。通过延时启动第二个请求来确保第一个请求完成后再进行后续操作，有效防止了请求被覆盖的问题。文章提供了具体的JavaScript代码实现，并展示了如何通过回调函数更新页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=red]1.第二个请求延时几秒执行，可避免第一个请求还没执行完就被覆盖[/color]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX同一页面加载多个测试</title>
<script language="JavaScript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.XMLHttpRequest){ //FireFox
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
}catch(e){
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE7
}catch (e){
alert('对不起，本页面只支持IE6,IE7,FireFox');
}
}
}
}
function startRequest(tn,what) {
createXMLHttpRequest();
if(what=='msg1'){
alert('第一次开始了');
}else{
alert('第二次开始了');
}
xmlHttp.onreadystatechange = function(){handleStateChange(what);};
xmlHttp.open("GET", "test2.jsp?tn="+tn, true);
xmlHttp.send(null);
}
function handleStateChange(what) {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if(what=='msg1'){
alert('第一次回调');
}else{
alert('第二次回调');
}
var result = xmlHttp.responseText;
document.getElementById(what).innerHTML = result;
}
}
else {
document.getElementById(what).innerHTML = "正在载入...";
}
}
function myload(){
startRequest('sort_jiaoyi','msg1');
[color=red] setTimeout("startRequest('sort_fangwu','msg2')",2000); //延时2秒后执行,在IE7下竟然不需要延时处理...[/color]
}
</script>
</head>
<body onLoad="myload();">
<table>
<tr><td>
<div id="msg1" style="width:300px; background:#0099FF"></div>
</td></tr>
<tr><td>
<div id="msg2" style="width:300px; background:#66FF33"></div>
</td></tr>
</table>
</body>
</html>