How To Read XML Data through Ajax in jQuery

Hello,
         Today Im gonna show you how you can read data on XML file in jQuery via Ajax

I'm using Visual Studio 2010 as my text editor you can use any editor you like

1. Open up Visual Studio and create a new Empty Website project
2. Now right click on your project and add a XML file name it "XMLFile1.xml"
3. Now inside your XML file paste the following code & save it

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

  <id>100</id>
  <name>Muhammad Taqi</name>
  <designation>Student</designation>

  <id>110</id>
  <name>Ali Raza</name>
  <designation>Software Engineer</designation>

  <id>786</id>
  <name>Muhammad Sagheer</name>
  <designation>Electrical Engineer</designation>
</data>

Now we will have to create a new web page in which we will call XML data using via Ajax using jQuery

5. Now right click on your project and add a New Web Page, name it whatever you want

6. Now just after the closing braces of <title> paste the following code

   1:  <script type="text/jscript" src="Scripts/jquery-1.9.1.js"></script>

   2:      <script type="text/jscript">

   3:          $(document).ready(function () {

   4:              $.ajax({

   5:                  url: "xmlfile1.xml",

   6:   

   7:                  dataType: "XML",

   8:   

   9:                  type: "GET",

  10:   

  11:                  success: FnSuccess,

  12:   

  13:                  error: FnError,

  14:   

  15:                  complete: FnComplete

  16:   

  17:              })

  18:          });  // .load closing

  19:   

  20:          function FnSuccess(result) {

  21:              var id = result.getElementsByTagName("id")[0];

  22:              var name = result.getElementsByTagName("name")[0];

  23:              var designation = result.getElementsByTagName("designation")[0];

  24:          }

  25:   

  26:          function FnError(result) {

  27:              alert("Error " + result.statusText);

  28:          }

  29:   

  30:          function FnComplete(result) {

  31:              alert("Operation has been completed " + result.status);

  32:          }

  33:      </script>

As you can see inside .Ajax method we have passed few parameters

URL This will be the url of your XML file

dataType We define what type of data do we expect in our case the returned data will of XML, if it's simple text we would have write text

type Here we can to define what method we are using either GET or POST

success Here we define a function called FnSuccess, this means if everything goes well than move to this function

error Here we define a function called FnError, this means if something goes wrong than move to this method

complete Here we define doesn't matter if operation is successful or not, when the request is completed than move to this method

You can download the completed project from HERE

I hope this was informative for you and I would like to thank you for reading