JSP + ajx:使用innerhtml问题更新div

时间:2011-04-05 02:16:06

标签: ajax jsp innerhtml

在我的主页面上,我有一个div:

<div id = "content"><%@include file ="loadData.jsp" %></div>

loadData.jsp有一个<table> ... </table>,然后是一个名为pager的div来进行表分页:

<div id"pager"> ... </div>

所以,当我点击主页面上的某些链接时,ajax会设置加载此loadData.jsp的请求,我会做类似的事情

document.getElementById("content").innerHTML=xmlhttp.responseText;

更新div内容的内容。我现在的问题是它只适用于Chrome和Firefox,然后在IE中运行时会出现这个未知的运行时错误。我有谷歌这个问题主要是因为innerhtml因为我的输出有一个div调用寻呼机。有解决方案吗谢谢

var xmlhttp
function loadContent()
{
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
    {
        alert ("Your browser does not support Ajax HTTP");
        return;
    }
    var url="loadData.jsp";
    xmlhttp.onreadystatechange=getOutput;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}
function getOutput()
{
    if (xmlhttp.readyState==4)
    {
        document.getElementById("content").innerHTML=xmlhttp.responseText;
    }
}

function GetXmlHttpObject()
{
    if (window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    }
    if (window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}

所以在我的主文件中我有这个链接

 <a href="javascript:loadContent()>All</a>

然后有一个

<div id = "content"><%@include file ="loadData.jsp" %></div>

所以,当我点击链接时,这个内容会加载新数据,它可以在firefox和chrome中运行但不在IE中,在loadData里面我有这个

<table width="900" border="0" class="sortable" id="menuTable">
<thead>
  <tr align="left">
      <th width="60">ID</th>
       ...
      <th width="80">...</th>
  </tr>
</thead>
<tbody>

...
</table>
<div id="pager" class="pager">
               <form>
                  <select class="pagesize">
                      <option value="5">5 per page</option>
                      <option value="10" selected>10 per page</option>
                      <option value="15">15 per page</option>
                      <option value="20">20 per page</option>
                  </select>
              </form>
    </div>

1 个答案:

答案 0 :(得分:0)

我认为您的代码很好,添加一些断点或警报消息以了解问题所在。那么你最好在你的代码中尝试捕获这样的东西。

function GetXmlHttpObject() {
        var xmlHttp;
        try {
                // for firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
        } catch (e) {
                // InternetExplorer
                try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                        try {
                                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                                alert("Browser does not support AJAX!");
                                return null;
                        }
                }
        }
        return xmlHttp;
}

同样在getOutput检查xhr状态xmlhttp.status==200。在此函数中添加一些警告消息,以便您查看代码是否在此处传递。