1. 三个页面分别对应"自己“的异步对象(3个)
<title></title> <script type="text/javascript"> function GetXHR() { return new XMLHttpRequest(); }; var po = function () { var xhr = GetXHR(); xhr.open("get", "PageOne.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("po").innerHTML = xhr.response; } }; xhr.send(null); }; var pt = function () { var xhr = GetXHR(); xhr.open("get", "PageTwo.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("pt").innerHTML = xhr.response; } }; xhr.send(null); }; var pth = function () { var xhr = GetXHR(); xhr.open("get", "PageThree.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("pth").innerHTML = xhr.response; } }; xhr.send(null); }; window.onload = function () { pth();//Three po();//One pt();//Two }; </script> </head> <body> <div id="po" style="background-color: #ffd800;"></div> <div id="pt" style="background-color: #4cff00;"></div> <div id="pth" style="background-color: #b6ff00;"></div> </body>
//另外两个页面类似。
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //System.Threading.Thread.Sleep(1000); context.Response.Write("Hello World"); context.Response.Write("<br/>This is PageOne !!! <br/>" + "Second: " + DateTime.Now.Second + "<br/>Millisecond: " + DateTime.Now.Millisecond); }
结果：
改为一个对象
<script type="text/javascript"> var xhr = false; function GetXHR() { return new XMLHttpRequest(); }; var po = function () { //var xhr = GetXHR(); xhr.open("get", "PageOne.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("po").innerHTML = xhr.response; } }; xhr.send(null); }; var pt = function () { //var xhr = GetXHR(); xhr.open("get", "PageTwo.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("pt").innerHTML = xhr.response; } }; xhr.send(null); }; var pth = function () { //var xhr = GetXHR(); xhr.open("get", "PageThree.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("pth").innerHTML = xhr.response; } }; xhr.send(null); }; window.onload = function () { xhr = GetXHR(); pth();//Three po();//One pt();//Two }; </script> </head> <body> <div id="po" style="background-color: #ffd800;"></div> <div id="pt" style="background-color: #4cff00;"></div> <div id="pth" style="background-color: #b6ff00;"></div> </body>
结果：
调试：
请求都进目标页面了，却”没带回来“数据
如果慢慢的调试：
结果一样
一个对象（简短时间）多次请求同一个页面
<script type="text/javascript"> var xhr = false; function GetXHR() { return new XMLHttpRequest(); }; var po = function () { //var xhr = GetXHR(); xhr.open("get", "PageOne.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("po").innerHTML = xhr.response; } }; xhr.send(null); }; var pt = function () { //var xhr = GetXHR(); xhr.open("get", "PageOne.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("pt").innerHTML = xhr.response; } }; xhr.send(null); }; var pth = function () { //var xhr = GetXHR(); xhr.open("get", "PageOne.ashx", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("pth").innerHTML = xhr.response; } }; xhr.send(null); }; window.onload = function () { xhr = GetXHR(); pth();//Three po();//One pt();//Two }; </script> </head> <body> <div id="po" style="background-color: #ffd800;"></div> <div id="pt" style="background-color: #4cff00;"></div> <div id="pth" style="background-color: #b6ff00;"></div> </body>
不同对象请求相同页面：
