javascript 调用写法的区别

今天遇到一个bug

问题复现：

用jsp去包含另一个jsp页面，另一个jsp页面里面有ajax异步调用

举个列子，a.jsp包含b.jsp，b.jsp里面有ajax异步调用，

当a.jsp包含多次b.jsp的时候，只会调用一次b.jsp的ajax；

当我用另一个demo测试的时候，发现包含多次会调用多次，而不是一次

最后对比两个文件，发现是ajax的js调用写法所致

代码如下：

这是只会调用一次的写法

<script type="text/javascript">
    var xmlhttp;
    var url = "${pageContext.request.contextPath}/gameTypeInfo.do?typeId=${param.type}";
    //doAjax
    window.onload = function doAjax() {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                } catch (e) {
                    console.log("浏览器不支持");
                }
            }
        }

        xmlhttp.open("get", url, true);
        //如果以post方式请求，必须要添加
        //xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(null);
        xmlhttp.onreadystatechange = processRequest;

        function processRequest() {

            if (xmlhttp.readyState == 4)
                if (xmlhttp.status == 200) {
                    //responseText表示请求完成后，返回的字符串信息
                    if (xmlhttp.responseText == "false")
                        console.log("aaa");
                    else
                        console.log("bbb");
                } else {
                    console.log("请求处理返回的数据有错误");
                }
        }
    }

</script>

这是引用几次，就会调用几次的写

<script type="text/javascript">
    var xmlhttp;
    var url = "${pageContext.request.contextPath}/gameTypeInfo?typeId=${param.type}";
    //doAjax
    //window.onload = doAjax();这样写可以单页面调用多次
    // window.onload = function(){ }这样写单页面只能调用一次
    window.onload = doAjax();
    function doAjax() {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                } catch (e) {
                    console.log("浏览器不支持");
                }
            }
        }

        xmlhttp.open("get", url, true);
        //如果以post方式请求，必须要添加
        //xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(null);
        xmlhttp.onreadystatechange = processRequest;

        function processRequest() {

            if (xmlhttp.readyState == 4)
                if (xmlhttp.status == 200) {
                    //responseText表示请求完成后，返回的字符串信息
                    if (xmlhttp.responseText == "false")
                        console.log("aaa");
                    else
                        console.log("bbb");
                } else {
                    console.log("请求处理返回的数据有错误");
                }
        }
    }

</script>

总结：当用到window.onload的时候，调用匿名函数onload赋值会覆盖前面的赋值，所以只会调用一次，当显示写多个window.onload = 具体函数时，会当做语句执行完，所以就引用几次，就会调用几次。