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 == 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>

不同对象请求相同页面：

posted @ 2014-04-15 01:40 wjshan0808 阅读(3588) 评论(0) 收藏举报

刷新页面返回顶部