AJAX学习笔记之处理多个异步请求

最新推荐文章于 2021-12-22 11:17:38 发布

milk1626

最新推荐文章于 2021-12-22 11:17:38 发布

阅读量530

点赞数

分类专栏： AJAX 读书笔记文章标签： ajax xmlhttprequest function xhtml javascript null

本文链接：https://blog.csdn.net/milk1626/article/details/5444893

版权

读书笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

AJAX

13 篇文章 0 订阅

订阅专栏

首先来看一个实例:

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) + "&timestamp=" + 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="发送" οnclick="test()">
</form>
</body>
</html>

9-5.aspx:

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

运行效果：

第一个请求被覆盖