• 存在多个 AJAX 任务


    实现的效果:

     这两个Ajax任务可同时实现,也可单独实现。

    标准的函数:

    var xmlhttp;
        function loadXMLDoc(url,ufunc){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest;
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
    
            xmlhttp.open("get",url,true);
            xmlhttp.send();
    
            xmlhttp.onreadystatechange = ufunc;
        }
        

    多个Ajax任务:

    function myFunction(){
            loadXMLDoc("../文档/2.txt",function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("myDiv").innerHTML = '<h2>' + xmlhttp.responseText + '</h2>';
                }
            });
        }
    
        function func(){
            loadXMLDoc("../文档/1.txt",function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("app").innerHTML = '<h2>' + xmlhttp.responseText + '</h2>';
                }
            });
        }

    在标准函数中:
    1.两个参数:url,cfunc,第一个参数表示请求服务器的文档,第二个参数表示服务器响应时onreadystatechange事件需调用的函数。
    2.创建XMLHttpRequest对象。
    3.向服务器发送请求,xmlhttp.open("GET",url,true);xmlhttp.send();
    4.增加onreadystatechange事件,xmlhttp.onreadystatechange=cfunc;

    如此,凡是执行Ajax任务的函数都可以使用该标准函数,只需要自己填写标准函数中的两个参数即可。

    多个Ajax任务:
    1.使用标准函数
    2.编写标准函数中的两个参数,这两个参数均可自行改变,即请求服务器的文档,服务器响应实现的方法都可不同。

    完整代码:

    <html>
    <head>
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url,ufunc){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest;
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
    
            xmlhttp.open("get",url,true);
            xmlhttp.send();
    
            xmlhttp.onreadystatechange = ufunc;
        }
        
        function myFunction(){
            loadXMLDoc("../文档/2.txt",function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("myDiv").innerHTML = '<h2>' + xmlhttp.responseText + '</h2>';
                }
            });
        }
    
        function func(){
            loadXMLDoc("../文档/1.txt",function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("app").innerHTML = '<h2>' + xmlhttp.responseText + '</h2>';
                }
            });
        }
    
    </script>
    </head>
    <body>
    
    
    <button type="button" onclick="myFunction()">一个Ajax</button>
    <button type="button" onclick="func()">另一个Ajax</button>
    <div id="myDiv"><h2>一个Ajax</h2></div>
    <div id="app"><h2>另一个Ajax</h2></div>
    
    
    </body>
    </html>
    View Code

    欢迎留言讨论。

  • 相关阅读:
    优化不易,且写且珍惜
    作为过来人的感悟:进了小公司的程序员如何翻身进入大公司
    腾讯/阿里/百度 BAT人才体系的职位层级、薪酬、晋升标准
    校招生向京东发起的“攻势”,做到他这样,你,也可以
    通过Java 线程堆栈进行性能瓶颈分析
    基于Spring Cloud的微服务落地
    多线程技术使用指南
    Android 处理含有EditText的Activity虚拟键盘
    Android ListView的监听事件
    Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用
  • 原文地址:https://www.cnblogs.com/5201314m/p/10038703.html
Copyright © 2020-2023  润新知