Read Xml data and display Jquary

<?xml version="1.0" encoding="utf-8" ?>

        <booklist>

            <book>

                <title>Naresh</title>

                <author>Naresh1</author>

                <genre>Classic</genre>

            </book>

            <book>

                <title>abc</title>

                <author>def</author>

                <genre>Classic</genre>

            </book>

            <book>

                <title>qqq</title>

                <author>asd</author>

                <genre>www</genre>

            </book>

          

        </booklist>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script>

            $(document).ready(function () {

                $("#contentArea").append("<ul></ul>");

                $.ajax({

                    type: "GET",

                    url: "data.xml",

                    dataType: "xml",

                    success: function (xml) {

                        $(xml).find('Book').each(function () {

                            var sTitle = $(this).find('Title').text();

                            var sAuthor = $(this).find('Author').text();

                            var sGenre = $(this).find('Genre').text();

                            $("<li></li>").html(sTitle + ", " + sAuthor + "," + sGenre).appendTo("#contentArea ul");

                        });

                    },

                    error: function () {

                        alert("An unexpected error has occurred during processing.");

                    }

                });

            });

        </script>

     

        <div id="contentArea">

        </div>