如何使用jquery和ajax读取,解析和显示xml

时间:2015-06-04 07:11:11

标签: javascript jquery ajax xml

我正在尝试使用jquery和ajax读取,解析和显示xml文件。但是在尝试这样做的时候我得到一个错误,因为我无法在

时解析xml

这是我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
 $(document).ready(function(){
    $("#dvContent").append("<ul></ul>");
    $.ajax({
        type: "GET",
        url: "http://localhost/BookList.xml",
        dataType: "xml",
        success: function(xml){
            $(xml).find('Book').each(function(){
            var sTitle = $(this).find('Title').text();
            var sPublisher = $(this).find('Publisher').text();
            $("<li></li>").html(sTitle + ", " + sPublisher).appendTo("#dvContent ul");
        });
        },
        error: function() {
        alert("An error occurred while processing XML file.");
         }
     });
   });    
  </script>
      <style type="text/css">
      body
      {
      font-family  : Arial;
      font-size  : 10pt;
       }
       </style>
       </head>
        <body>
        <form id="form1" runat="server">
        <div id="dvContent">

</div>
</form>

和我的xml文件如下所示

<?xml version="1.0" encoding="utf-8"?>
<BookList>
<Book>
 <Title>jQuery: Novice to Ninja</Title>
 <Publisher>Site point</Publisher>
</Book>
<Book>
 <Title>Learning jQuery</Title>
 <Publisher>PACKT</Publisher>
</Book>
<Book>
<Title>Head First jQuery</Title>
<Publisher>O'Reilly</Publisher>
</Book>
<Book>
<Title>jQuery UI 1.8</Title>
<Publisher>PACKT</Publisher>
</Book>
</BookList>

我得到的错误是

  

XMLHttpRequest无法加载http://localhost/booklist.xml。 No&#39; Access-Control-Allow-Origin&#39;标头出现在请求的资源上。起源&#39; null&#39;因此不允许访问。

现在我不知道如何为xml文件添加access-control-allow-origin。如果它是php我可以做到但在这里我被卡住了。

1 个答案:

答案 0 :(得分:2)

错误是因为发出请求的域与接收请求的域不匹配。检查您正在查看该网站的网址,并确保该网址匹配,直至协议和端口号,例如http://localhost:8080

如果失败,您可以将请求设为相对的:

$.ajax({
    type: "GET",
    url: "/BookList.xml", // leading slash indicates the URL is relative to the root
    // the rest of your code....