javaweb ajax+div实现左边菜单右边内容时点击菜单应该触发事件但是右边没反应

javaweb ajax+div实现左边菜单右边内容时点击菜单应该触发事件但是右边没反应

问题描述:

这样写点击左边菜单时无论怎么点击,叫content那个div都没有内容都不会更新,我猜是不是css的问题
这是代码,请问在此基础上要怎么写才能实现左边菜单右边内容呢

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

        <title>JSP Page</title>

    </head>
    <body>
        <a id="top"></a>
    <div id="container" style="width:100% " >
        <div id="header" style="background-color:#ACCCCD;height:20%">
            <div id="systemTitle">
                <h1>22222333333</h1>
                <h2>2233</h2>
            </div>
        </div>
            <div id="maintain" style="float: left; display: inline; height:70%;width: 100%">
        <div id="sitebar" style="background-color:red;width:20%;float: left">

                    <ul >
                  <li><a href="#repMenu">&nbsp;00</a></li>
                  <li><ul id="repMenu">
                  <li><a href="###" onclick="showAtRight('mod1.jsp')">01</a></li>
                  <li><a href="###" onclick="showAtRight('mod2.jsp')">02</a></li>
                 </ul></li>

                 <li><a href="###" onclick="showAtRight('Info.jsp')">1</a></li>

                     <li><a href="###" onclick="showAtRight('mod3.jsp')">2</a><li>
                   <li><a href="###" onclick="showAtRight('check.jsp')">3</a></li>
                 <li><a href="###" onclick="showAtRight('adduser.jsp')">4</a></li>

                    </ul>

        </div>
        <div id="content" style="background-color:#8BC34A;width:80%;float: right">
                    //此处显示内容
        </div>
            </div>
          <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;height:10%">
底部部分
                <a href="#top">链接到标题</a>
       </div>
    </div>
   <script type="text/javascript">
            function showAtRight(url){
                var XHR;
                if (window.xmlHttpRequest){
                    XHR=new XMLHttpRequest();
                }
                else if (window.ActiveXObject){
                    try{XHR= new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XHR= new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}
                }
                XHR.onreadystatechange=function(){
                    if (XHR.readyState===4){
                        if(XHR.status===200){
                            document.getElementById("content").innerHTML=XHR.responseText;
                            executeScript(XHR.responseText);
                                                    }
                                                    else if(XHR.status===404){
                                                        alert("出错了☹   (错误代码:404 Not Found),……!");return;
                                                    }
                                                    else if (XHR.status===403){
                                                        alert("出错了☹   (错误代码:403 Forbidden),……!");return;
                                                    }
                    }
                };
                XHR.open("GET",url,true);
                XHR.send(null);
            }
     </script>

    </body>
</html>

看我加粗和斜体字部分,写的判断有问题,你的if就没有执行,没有创建XHR对象。
改成 if (!window.xmlHttpRequest){
XHR=new XMLHttpRequest();
}

建议把方法中的if 语句修改一下
我用谷歌浏览器运行的时候 两个if 判断都为false 因为对象没有创建所以无法正常调用请求

function showAtRight(url){
var XHR;

            if (window.ActiveXObject){
                try{XHR= new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XHR= new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}
            } else {
                XHR=new XMLHttpRequest();
            }

            XHR.onreadystatechange=function(){
                if (XHR.readyState===4){
                    if(XHR.status===200){
                        document.getElementById("content").innerHTML=XHR.responseText;
                        executeScript(XHR.responseText);
                                                }
                                                else if(XHR.status===404){
                                                    alert("出错了☹   (错误代码:404 Not Found),……!");return;
                                                }
                                                else if (XHR.status===403){
                                                    alert("出错了☹   (错误代码:403 Forbidden),……!");return;
                                                }
                }
            };
            XHR.open("GET",url,true);
            XHR.send(null);
        }

浏览器的差异和版本变化都比较快,建议使用内嵌式框架简单处理,兼容性更好。

看我加粗和斜体字部分,写的判断有问题


    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

    <title>JSP Page</title>

</head>
<body>
    <a id="top"></a>
<div id="container" style="width:100% " >
    <div id="header" style="background-color:#ACCCCD;height:20%">
        <div id="systemTitle">
            <h1>22222333333</h1>
            <h2>2233</h2>
        </div>
    </div>
        <div id="maintain" style="float: left; display: inline; height:70%;width: 100%">
    <div id="sitebar" style="background-color:red;width:20%;float: left">

                <ul >
              <li><a href="#repMenu">&nbsp;00</a></li>
              <li><ul id="repMenu">
              <li><a href="###" onclick="showAtRight('mod1.jsp')">01</a></li>
              <li><a href="###" onclick="showAtRight('mod2.jsp')">02</a></li>
             </ul></li>

             <li><a href="###" onclick="showAtRight('Info.jsp')">1</a></li>

                 <li><a href="###" onclick="showAtRight('mod3.jsp')">2</a><li>
               <li><a href="###" onclick="showAtRight('check.jsp')">3</a></li>
             <li><a href="###" onclick="showAtRight('adduser.jsp')">4</a></li>

                </ul>

    </div>
    <div id="content" style="background-color:#8BC34A;width:80%;float: right">
                //此处显示内容
    </div>
        </div>
      <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;height:10%">

底部部分
链接到标题


<br> function showAtRight(url){<br> var XHR;<br> if (**_window.xmlHttpRequest_**){//此处应该写成 !window.xmlHttpRequest<br> XHR=new XMLHttpRequest();<br> }<br> else if (window.ActiveXObject){<br> try{XHR= new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);}catch(e){try{XHR= new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);}catch(e){}}<br> }<br> XHR.onreadystatechange=function(){<br> if (XHR.readyState===4){<br> if(XHR.status===200){<br> document.getElementById(&quot;content&quot;).innerHTML=XHR.responseText;<br> executeScript(XHR.responseText);<br> }<br> else if(XHR.status===404){<br> alert(&quot;出错了☹ (错误代码:404 Not Found),……!&quot;);return;<br> }<br> else if (XHR.status===403){<br> alert(&quot;出错了☹ (错误代码:403 Forbidden),……!&quot;);return;<br> }<br> }<br> };<br> XHR.open(&quot;GET&quot;,url,true);<br> XHR.send(null);<br> }<br>

</body>