AJAX 学习笔记[五] AJAX 如何处理多个异步请求

简介:

前面的示例中,都是通过1个全局变量的xmlHttp 异步对象对所有异步请求进行处理的。这样做通常会存在一些问题。比如:当第1个异步请求尚未完成,很可能就已经被第2个异步请求所覆盖

解决办法:通常是将xmlHttp 对象作为局部变量来处理,并且在收到服务器端的返回值后手动将其删除

客户端(9-6.html)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多个异步对象</title>
<script language="javascript">
function createQueryString(oText){
var sInput = document.getElementById(oText).value;
var queryString = "oText=" + sInput;
return queryString;
}
function getData(oServer, oText, oSpan){
var xmlHttp; //处理为局部变量
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
var queryString = oServer + "?";
queryString += createQueryString(oText) + "&timestamp=" + new Date().getTime();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var responseSpan = document.getElementById(oSpan);
responseSpan.innerHTML = xmlHttp.responseText;
delete xmlHttp; //收到返回结果后手动删除
xmlHttp = null;
}
}
xmlHttp.open("GET",queryString);
xmlHttp.send(null);
}
function test(){
//同时发送两个不同的异步请求
getData('9-5.aspx','first','firstSpan');
getData('9-5.aspx','second','secondSpan');
}
</script>
</head>
<body>
<form>
first: <input type="text" id="first">
<span id="firstSpan"></span>
<br>
second: <input type="text" id="second">
<span id="secondSpan"></span>
<br>
<input type="button" value="发送" onclick="test()">
</form>
</body>
</html>

由于函数中的局部变量是每次调用时单独建立的,函数执行完便自动销毁。所以,这时测试多个异步请求便不会发生冲突和数据覆盖的情况了。

服务器端(9-5.aspx)

代码如下:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.Write(Request["oText"]);
%>

完毕。

作者: XuGang 网名:钢钢


本文转自钢钢博客园博客,原文链接:http://www.cnblogs.com/xugang/archive/2010/08/07/1794748.html,如需转载请自行联系原作者
相关文章
|
6月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
6月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
6月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
XML JSON 前端开发
【Java】数据交换 Json 和 异步请求 Ajax
JSON: JavaScript Object Notation(JavaScript 对象标记法)。 JSON 是一种存储和交换数据的语法。 JSON 是通过 JavaScript 对象标记法书写的文本。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式 (String) JSON易于阅读和编写的文本形式表示数据 JSON数据使用键值对的方式进行组织,并且可以包含数组、对象和简单的数据类型(例如字符串、数字、布尔值和null)
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
73 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
63 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
60 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
51 0
|
前端开发 JavaScript 应用服务中间件
JQury实现ajax异步请求
JQury实现ajax异步请求
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
99 0