Fatal编程技术网

Jquery和AJAX不使用Javascript头

javascript jquery html ajax dynamic

Jquery和AJAX不使用Javascript头,javascript,jquery,html,ajax,dynamic,Javascript,Jquery,Html,Ajax,Dynamic,我正在用AJAX加载一些html，它依赖于Javascript头 我在主页上有一个jquery驱动的幻灯片，在下一页有一个jquery驱动的图库 我的jquery幻灯片可以工作，但是当我单击loadXMLDoc链接时，jquery库将无法工作 这是我的主页和jquery幻灯片： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Photo Design</title> <scr

我正在用AJAX加载一些html，它依赖于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>


照片设计
函数loadXMLDoc（）
{
var-xmlhttp；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.body.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“ajax_info.php”，true）；
xmlhttp.send（）；
}
//库javascript内容
//幻灯片javascript内容
$（文档）.ready（函数（）{
$（“a[rel=example\u group]”）。fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“自动缩放”：正确，
“标题格式”：函数（标题、currentArray、currentIndex、currentOpts）{
返回“”；
}
});
});

    

  • 

  • 

  • 

  •
这是我的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>
如果您被卡住了，下面是您的
loadXMLDoc
函数的jQuery版本：


函数loadXMLDoc（）{
$.ajax({
url:'ajax_info.php'，
键入：“get”，
成功：函数（html）{
$（“body”）.html（html）；
}
});
}
这是函数的文档。

既然使用了jQuery，为什么要使用
window.XMLHttpRequest
？为什么要重新发明AJAX轮子，而jQuery为AJAX请求提供了各种实用程序，例如
$.AJAX
？感谢您为我指明了正确的方向。我是个阿贾克斯迷。 
<script type="text/javascript">
  function loadXMLDoc() {
    $.ajax({
      url: 'ajax_info.php',
      type: 'get',
      success: function (html) {
        $("body").html(html);
      }
    });
  }
</script>