AJAX学习笔记之 处理多个异步请求
2010-04-02 14:58
633 查看
首先来看一个实例:
9-5.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">
var xmlHttp; //全局变量
function createQueryString(oText){
var sInput = document.getElementById(oText).value;
var queryString = "oText=" + sInput;
return queryString;
}
function getData(oServer, oText, oSpan){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
var queryString = oServer + "?";
queryString += createQueryString(oText) + "×tamp=" + new Date().getTime();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var responseSpan = document.getElementById(oSpan);
responseSpan.innerHTML = xmlHttp.responseText;
}
}
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"]);
%>
运行效果：
第一个请求被覆盖
出现这个问题是xmlHttp被作为一个全局变量而存在，第一个请求未完成，已经被之后的请求所覆盖。
解决方法是将xmlHttp对象作为局部变量来处理，并且在收到服务器的返回值后手动将其删除。
修改getData()代码如下：
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) + "×tamp=" + 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);
}
运行效果：
处理多个异步请求
9-5.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">
var xmlHttp; //全局变量
function createQueryString(oText){
var sInput = document.getElementById(oText).value;
var queryString = "oText=" + sInput;
return queryString;
}
function getData(oServer, oText, oSpan){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
var queryString = oServer + "?";
queryString += createQueryString(oText) + "×tamp=" + new Date().getTime();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var responseSpan = document.getElementById(oSpan);
responseSpan.innerHTML = xmlHttp.responseText;
}
}
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"]);
%>
运行效果：
第一个请求被覆盖
出现这个问题是xmlHttp被作为一个全局变量而存在，第一个请求未完成，已经被之后的请求所覆盖。
解决方法是将xmlHttp对象作为局部变量来处理，并且在收到服务器的返回值后手动将其删除。
修改getData()代码如下：
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) + "×tamp=" + 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);
}
运行效果：
处理多个异步请求
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX 学习笔记[五] AJAX 如何处理多个异步请求
- java web 学习笔记四 使用ajax响应异步请求
- 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回
- php学习笔记（三十）ajax请求和接收参数的实现方式（包括json数据格式的简单处理）
- ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）
- AJAX 学习笔记(5) 处理XML文档的DOM元素属性和遍历DOM元素方法
- shiro安全框架扩展教程--如何扩展异步(ajax)请求认证失败处理
- 实现ajax异步请求笔记
- PHP学习笔记5-PHP-AJAX请求、文件上传、验证码
- ajax实战：（ajax异步下载文件）请求二进制流进行处理
- Fiori2.0学习笔记-Ajax数据请求
- JSP&&SERVLET学习笔记（五）：请求参数编码处理
- session失效时间设置、过期处理、ajax同步异步请求处理
- dojo学习二 ajax异步请求之绑定列表
- angularjs学习笔记之一（ajax请求）
- 按钮的type会对ajax的异步请求处理有影响
- 学习笔记之利用ajax请求xml文件，解析其中内容
- struts2学习笔记--使用struts2插件实现ajax处理(返回json数据)
- AJAX 学习笔记[四] AJAX 对服务器返回的XML 的处理
- Android深入浅出学习笔记之多线程及异步处理