How to load XML file using jquery ajax ?

you can load the xml data by using  jquery ajax by below Demo.

This is code in data.XML File

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

NOTE:- You can just paste the above code to create a simple XML file

This is html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<script type="text/javascript" src=""></script>
<div id="tableWrapper">
<button id="loadDataTable">Load</button>

This is a jquery code. Just add this below jquery code in above html code. and you can load this xml file by clicking load button.

$(document).ready(function () {
            $('#loadDataTable').click(function () {
                $.get('example/data.xml', function (data) {
                    $('div#tableWrapper').append('<table id="ajaxTable"></table>');
                    $(document).ready(function () {
                        $(data).children('tabledata').children('row').each(function () {
                            var thisRow = this;
                            $(thisRow).children('column').each(function () {
                                var thisColumn = $(this).text();
                                $('table#ajaxTable').children('tbody').children('tr').last().append('<td style="border: 1px solid black">' + thisColumn + '</td>');



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s