javascript 调用写法的区别

我就是我 2023-07-19 05:47 7阅读 0赞

今天遇到一个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 = 具体函数时，会当做语句执行完，所以就引用几次，就会调用几次。**

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 java重载和重写的区别实际用法

在Java中，重载（Overloading）和重写（Overriding）是两个重要的概念，它们在方法的行为和用途上有明显的区别。重载（Overloading）：重载是在同

约定不等于承诺〃/ 2024年02月05日 22:23/ 0 赞/ 53 阅读

相关 JavaScript运算符||、&&、空值合并、?.的区别和用法

文章目录 \`||\`和\`&&\`运算符 ??空值合并运算符 ?. 可选链总结 `||`、 `&&`是JS一直就有的运算符，虽然是逻辑

本是古典何须时尚/ 2023年09月30日 00:58/ 0 赞/ 10 阅读

相关 javascript 调用写法的区别

今天遇到一个bug 问题复现：用jsp去包含另一个jsp页面，另一个jsp页面里面有ajax异步调用举个列子，a.jsp包含b.jsp，b.jsp里面有ajax异步调

我就是我/ 2023年07月19日 05:47/ 0 赞/ 8 阅读

相关【JavaScript】typeof和instanceof的区别及用法

1. 前言之前对于 `typeof` 和 `instanceof` 用法的印象仅停留在可以使用它们对变量的类型进行检测，但是具体的差别并不很熟悉，如果你和我有同样的

系统管理员/ 2022年10月11日 00:42/ 0 赞/ 287 阅读

相关 html中函数的调用方法的区别,javascript中的引用和调用函数的区别是什么？

javascript中的引用函数和调用函数的区别是什么？下面本篇文章给大家介绍一下JavaScript中的引用函数、调用函数的区别。有一定的参考价值，有需要的朋友可以参考一下，

刺骨的言语ヽ痛彻心扉/ 2022年10月06日 10:56/ 0 赞/ 177 阅读

相关 javascript的函数调用

<html> <head> <title>document.write</title> <script>

怼烎@/ 2022年09月19日 05:19/ 0 赞/ 218 阅读

相关 javascript函数调用的时候加不加括号的区别

JavaScript函数后面加不加括号的区别 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

待我称王封你为后i/ 2022年07月15日 06:28/ 0 赞/ 236 阅读

相关 JavaScript 写在head, body的区别

一般来说，放在<head></head>里的会比放在<body></body>先执行。在head标签里的代码会在页面还未开始绘制之前解析并执行，在body里的代码则会在页面渲染

本是古典何须时尚/ 2022年05月31日 07:35/ 0 赞/ 158 阅读

相关 JavaScript中undefined和null的用法与区别

一、undefined 　　undefined类型只有一个值，就是undefined。当声明的变量未初始化时，该变量的默认值是undefined。所以一般地，undefi

短命女/ 2022年05月16日 04:22/ 0 赞/ 281 阅读

相关 JavaScript定时器及回调用法

JavaScript定时器及回调用法 -------------------- 循环定时任务 // 假设现在有这样一个需求：我需要请求一个接口，根据返回结

￡神魔★判官ぃ/ 2021年11月16日 08:54/ 0 赞/ 314 阅读