html ajax doesn't load in firefox_问答_开发者_运维开发者技术经验分享

I'm a total newbie at web programming but I have to make a home page for college and i'm stuck. I have an html file that loads a .jsp page inside a div using ajax. I have a couple of links that load different files. My problem is that Firefox doesn't respond when I click on the links(No error message nor visible activity). In Internet Explorer on the other hand the first link(About Me) works just fine(loads the .jsp inside the div). My second link however (Photos) should load a .jsp containing javascript and that doesn't work on either browsers. In IE, the .jsp loads but the javascript doesnt`t work. I would really appreciate some help. Here's my code:

mainPage:

<head>
<title>Titi's HomePage</title>
<link rel="stylesheet" type="text/css" href="homeStyle.css"/>
<script type="text/javascript">
    function loadXMLDoc(file, div)
    {
        if(window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest();
        }
        else
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById(div).innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", file, true);
        xmlhttp.send();
    }
</script>
</head>

<body class="body">
<div align="center"><img src="images/header2.jpg" width="1074" height="162" /></div>
<div align="center">
  <table width="1075" height="41" border="1" class="mainTable">
    <tr>
      <th width="215" scope="col"><a href="javascript:loadXMLDoc('http://localhost:8000/HomePage/aboutMe.jsp', 'display');">About Me</a></th>
      <th width="227" scope="col"><a href="javascript:loadXMLDoc('http://localhost:8000/HomePage/Photos.jsp', 'display');">Photos</a></th>
    </tr>
  </table>
  <table class="displayTable">
    <tr>
        <td><div id="display"></td>
    </tr>
  </table>
</div>
</body>

Photos.jsp

<head>
<title>Photos</title>
<SCRIPT language=JavaScript>
theImages = new Array("images/Constanta/c1.jpg", "images/Constanta/c2.jpg", "images/Constanta/c3.jpg","imag开发者_JAVA技巧es/Constanta/c4.jpg");
function displayImages() {
for(x in theImages){
    document.write('<img SRC="' +theImages[x]+' " width=80, height =80 onmouseover=addSource(\"'+theImages[x]+'\") onmouseout =removeSource()>');
}
}
function addSource(name){
document.getElementById("biggie").src = name;
var newImg = new Image();
newImg.src = name;
document.getElementById("biggie").height = newImg.height;
document.getElementById("biggie").width = newImg.width;

}
function removeSource(){
document.getElementById("biggie").src = "";
document.getElementById("biggie").height = 0;
document.getElementById("biggie").width =  0;
}
</SCRIPT>
</head>

<body>
<SCRIPT language=JavaScript>
displayImages();
</SCRIPT>
<br/>
<center><img src="" id="biggie" width="0" height="0" align="middle"></center>
</body>

if I load directly the Photos.jsp then it works just fine with both IE and FireFox but not through the links of the main page. What am i doing wrong?? Keep in mind that I'm totally new to this so feel free to tutor me on anything :D

Thanks in advance!

You should try using something like this - but i am shure that is jQuery the best solution

I adjusted the code, so, now you have that what you need (like function which you suggested). Main problem is callback function, because ajax call is asynchronous (there is option in jQuery where it can be synchronous call) and function returns undefined value before ajax call complete.

Now, in this function 'div' name is passed as function parameter, so you don't need function callback.

This code is tested on my computer in Firefox 3.6.13

    function isIE(){return/msie/i.test(navigator.userAgent)&&!/opera/i.test(navigator.userAgent);}

function loadXMLDoc(filename, div)
 {
     try
     {
         if (isIE())
         {
             var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         else
         {
             var xmlhttp = false;
         }
         if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
         {
             try
             {
                 xmlhttp = new XMLHttpRequest();
             }
             catch (e)
             {
                 xmlhttp = false;
             }
         }
         if (!xmlhttp && window.createRequest)
         {
             try
             {
                 xmlhttp = window.createRequest();
             }
             catch (e)
             {
                 xmlhttp = false;
             }
         }
         xmlhttp.open("GET", filename);
         xmlhttp.onreadystatechange = function()
         {
             if (xmlhttp.readyState == 4)
             {
                 document.getElementById(div).innerHTML = xmlhttp.responseText;
             }
         }
         xmlhttp.send(null);
     }
     catch (e)
     {
         alert(e);
     }
 }