How to Fetch and Show Data from XML file using Jquery

Step - 1: Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add an XML file into Project.

Right Click on Solution Explorer > Add > New existing item > Select XML File > Add.

Step-3: Add a Webpage and Design for fetch and show data using Jquery.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

Jquery Code 

     <script src="Scripts/jquery-1.7.1.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnGetData").click(function () {
                $("#UpdatePanel").html("Please wait...");
                $.ajax({
                    url: "/cd_catalog.xml",
                    type: "GET",
                    dataType: "xml",
                    success: OnSuccess,
                    error: OnError
                });
            });
        });
 
        function OnSuccess(xml) {
            var tableContent = "<table border='1' cellspacing='0' cellpadding='5'>" +
                                "<tr>" +
                                    "<th>TITLE</th>" +
                                    "<th>ARTIST</th>" +
                                    "<th>COUNTRY</th>" +
                                    "<th>COMPANY</th>" +
                                    "<th>PRICE</th>" +
                                    "<th>YEAR</th>" +
                                "</tr>";
            $(xml).find('CD').each(function () {
                tableContent += "<tr>" +
                                    "<td>" + $(this).find('TITLE').text() + "</td>" +
                                    "<td>" + $(this).find('ARTIST').text() + "</td>" +
                                    "<td>" + $(this).find('COUNTRY').text() + "</td>" +
                                    "<td>" + $(this).find('COMPANY').text() + "</td>" +
                                    "<td>" + $(this).find('PRICE').text() + "</td>" +
                                    "<td>" + $(this).find('YEAR').text() + "</td>" +
                                "</tr>";
            });
            tableContent += "</table>";
            $("#UpdatePanel").html(tableContent);
        }
 
        function OnError(data) {
            $("#UpdatePanel").html("Error! Please try again.");
        }
 
    </script>
        

HTML Code 

    <h3>Populate Data from XML file using Jquery</h3>
    <input id="btnGetData" type="button" value="Populate Data from XML File" />
    <div id="UpdatePanel" style="padding:20px 10px">
        
    </div>
        

Step-4: Run Application.