2011-10-31 23 views
0

我使用AJAX加載一些html,這取決於Javascript標頭。Jquery和AJAX不能使用Javascript標頭

我在主頁上有一個jquery支持的幻燈片,以及下一頁上的jQuery動畫庫。

我的jquery幻燈片的作品,但後來當我點擊我的loadXMLDoc鏈接jquery畫廊將無法正常工作。

這裏是我的網頁上的jQuery的幻燈片:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Photo Design</title> 
<script type="text/javascript"> 
    function loadXMLDoc() 
    { 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
      } 
     else 
      {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     xmlhttp.onreadystatechange=function() 
      { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
      document.body.innerHTML=xmlhttp.responseText; 
      } 
      } 
     xmlhttp.open("GET","ajax_info.php",true); 
     xmlhttp.send(); 
    } 
</script> 

<link rel="stylesheet" type="text/css" href="style.css"/> 
<script type='text/javascript' src='js/jquery.js'></script> 


//Gallery javascript stuff 
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" /> 

//Slideshow javascript stuff 
<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>  
<script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script> 
<script type='text/javascript' src='js/jquery.aviaSlider.min.js'></script> 
<script type='text/javascript' src='js/custom.min.js'></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("a[rel=example_group]").fancybox({ 
      'transitionIn'  : 'elastic', 
      'transitionOut'  : 'elastic', 
      'autoScale'   : true, 
      'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) { 
       return ''; 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<a href="javascript:loadXMLDoc()">Gallery</a> 
<div id="content"> 
    <div id="centered"> 
     <ul class='aviaslider' id="frontpage-slider"> 
      <li><img src="photos/home/1.jpg" alt=""/></li> 
      <li><img src="photos/home/2.jpg" alt=""/></li> 
      <li><img src="photos/home/3.jpg" alt=""/></li> 
      <li><img src="photos/home/4.jpg" alt=""/></li> 
     </ul> 
    </div> 
</div> 
    </body> 
    </html> 

這裏是我的ajax_info.php頁:

<div id="content"> 
    <div id="gallery"> 
     <div class="thumbnails"> 
       <a rel="example_group" href="photos/seniors/10big.jpg"><img alt="" src="photos/seniors/10thumb.jpg"/></a> 
       <a rel="example_group" href="photos/seniors/11big.jpg"><img alt="" src="photos/seniors/11thumb.jpg"/></a> 
       <a rel="example_group" href="photos/seniors/12big.jpg"><img alt="" src="photos/seniors/12thumb.jpg"/></a> 
       <a rel="example_group" href="photos/seniors/13big.jpg"><img alt="" src="photos/seniors/13thumb.jpg"/></a> 
       <a rel="example_group" href="photos/seniors/14big.jpg"><img alt="" src="photos/seniors/14thumb.jpg"/></a> 
     </div> 
    </div> 
</div> 
+0

由於您使用jQuery,爲什麼使用'window.XMLHttpRequest'? – cherouvim

+0

爲什麼你重新發明了AJAX輪,而jQuery提供了各種AJAX請求的實用程序,比如'$ .ajax'? –

+0

感謝您指點我正確的方向。我是AJAX noob。 – user1022422

回答

0

在您遇到問題時,這裏是你的loadXMLDoc功能的jQuery的版本:

<script type="text/javascript"> 
    function loadXMLDoc() { 
    $.ajax({ 
     url: 'ajax_info.php', 
     type: 'get', 
     success: function (html) { 
     $("body").html(html); 
     } 
    }); 
    } 
</script> 

這裏是$.ajax函數的文檔。