存在多个 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

欢迎留言讨论。