jQuery 和 AJAX答案

【问题标题】：jQuery and AJAXjQuery 和 AJAX
【发布时间】：2010-05-04 17:20:23
【问题描述】：

任何人都可以帮助使用 jQuery sn-p 来使用 Ajax 在页面加载时拉入 XML 文件吗？

在没有 jQuery 的情况下，这种方式真的很笨拙：

<script type="text/javascript">
function  loadXMLDoc()
{
  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)
    {
      xmlDoc = xmlhttp.responseXML;
      var txt = "";
      x = mlDoc.getElementsByTagName("title");
      for (i=0;i<x.length;i++)
      {
        txt = txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("checkedIn").innerHTML=txt;
    }
  }
  xmlhttp.open("GET", "data.xml", true);
  xmlhttp.send();
}
</script>

理想情况下，点击生成列表会在页面加载时生成，显示 XML 中的字段（标题、作者以及是否签入）

会拥抱你以寻求解决方案

【问题讨论】：

标签： javascript jquery xml ajax

【解决方案1】：

$( function() {
 $.ajax( { 
     url: 'ajax.xml',
     type: 'GET',
     dataType: 'xml',
     success: function( response ) {
        var books = $( response ).find( 'book' );
        var list = $( '#booklist' );
        $( books ).each( function() {
            var checkedOut = ( $( this ).attr( 'checked-out' ) == '1' );
            var title = $( this ).find( 'title' );
            var li = $( '<li></li>');
            if( checkedOut ) {
               li.addClass( 'selected' );
            }
            li.html( title );
            list.append( li );
        });
     }
 });
});

【讨论】：

谢谢，在通过 jQuery 网站询问后不久偶然发现了这一点……非常有意义。但我对 JS 还不够熟悉，无法真正编写我的成功函数。我如何将 XML 文件中的所有结果显示为名为#booklist 的 ul 中的 li，然后检查 XML 中的是否有签入 =“0”或 1 并给它们一个不同的值在他们的 li 上上课？
@Banderdash，你的 XML 是什么样的？
@Banderdash，你想展示什么？
我只想在列表中显示 XML 中的标题，然后将一个类添加到该“书”已签出 =“1”的特定列表项中跨度>
我觉得我们很亲密，clients.pixelbleed.net/ajax-test 但不工作？

【解决方案2】：

为什么不使用 jquery 简单的 ajax 请求？

$(document).ready(function() {
    $.ajax({
        url: "file.xml",
        dataType: "xml",
        success: function() {
            // on success here
        }
    });
});

【讨论】：