zoukankan html css js c++ java

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>

不同对象请求相同页面：

查看全文

相关阅读:
干货—MySQL常见的面试题＋索引原理分析！
如何设计一个百万级的消息推送系统
 【金三银四跳槽季】Java工程师如何在1个月内做好面试准备？
Nginx实现请求的负载均衡 + keepalived实现Nginx的高可用
 java函数式编程之Supplier
SpringMVC + MyBatis + Mysql + Redis(作为二级缓存) 配置
 Redis创建集群报错
 阿里云服务器Tomcat无法从外部访问
 SSM框架学习之高并发秒杀业务--笔记5-- 并发优化
 在windows上部署使用Redis

原文地址：https://www.cnblogs.com/wjshan0808/p/3665319.html