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 = 具體函數時，會當做語句執行完，所以就引用幾次，就會調用幾次。