<!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>

    <title>jQuery讀取XML文件</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

        h1{color:Green;text-align:center;}

        body{ background-color:#EEEEEE ; font-family:微軟雅黑; }

        #showresult{width:600px;overflow:hidden;}

    </style>

    <script type="text/javascript" src="jquery/1.4.4/jquery.min.js"></script>   

    <script type="text/javascript">

        $(document).ready(function () {

            $("#read").click(function () {

                $.ajax({

                    //請求方式為get

                    type: "GET",

                    //xml文件位置

                    url: "sitemap.xml",

                    //返回?cái)?shù)據(jù)格式為xml

                    dataType: "xml",

                    //請求成功完成后要執(zhí)行的方法

                    success: function (xml) {

                        $(xml).find("url").each(function (i) {

                            //i從0開始，累加，如果要顯示所有數(shù)據(jù)，將判斷去除即可

                            if (i < 10) {

                                //鏈接地址

                                var location = $(this).find("loc").text();

                                //顯示文字

                                var text = $(this).find("loc").text();

                                //動態(tài)加載方法:鏈接地址

                                $("<a>").attr("href", location)

                                //顯示文字

                            .text(text)

                                //設(shè)置樣式

                            .css({ "width": "700px", "float": "left", "margin-bottom": "5px" })

                                //加載到div

                            .appendTo("#showresult");

                            }

                        })

                    }

                });

                return false;

            });

        });

    </script>

</head>

<body>

    <div id="showresult">

        <h1>jQuery讀取XML文件</h1>

        <a id="read" href="#" style="width:700px;">點(diǎn)擊讀取XML</a>

    </div>

</body>

</html>