正文
new XMLHttpRequest()和页面关系
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
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 == && xhr.status == ) {
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 == && xhr.status == ) {
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 == && xhr.status == ) {
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 == && xhr.status == ) {
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 == && xhr.status == ) {
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 == && xhr.status == ) {
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>
不同对象请求相同页面：
