0

Fetch data from XML, JSON & MySQLi using jQuery Ajax & PHP

Ajax (Asynchronous JavaScript and XML) is a technique to exchange the data with the server, updating part of a web page without reloading the page again. Using Ajax we can fetch data from various sources like XML, Json, Jsonp or MySQL Database. In this article you can learn how to implement ajax feature on your webpage and fetch data from various sources like XML, Json and Mysql database and display the data. I will be using jQuery ajax() function to do this task.

Fetch data from XML, JSON & MySQLi using jQuery Ajax & PHP

 

Setting up the HTML first.

The first thing you need to do is to make sure you have jquery library attached to the page.

The next part is to make three buttons and bind them with a function using onclick event.
Don’t worry about the functions; you will come to know about that soon. Now the final part it’s to make three div containers with unique id to each. So each individual data will be placed on their specific container.

Fetching Data from XML file using Ajax

To fetch a data from XML file make sure you have an XML file with data on the server. In our example we have a sample.xml file with some countries and their capital names.

When you click on the button to fetch data from xml file the function fetchfromXMLfile(); will be fired and all the data will be fetch from that xml file. On successfully fetching the data, then you will have to display the data in a list format. Check the code below.

Fetching Data from Json file using Ajax

Json (JavaScript Object Notation) is a lightweight data-interchange format that is completely language independent also making it easy for humans to read and write. The technique to fetch data from Json is very similar to that of XML. Check a sample.json file below.

The Ajax code to fetch data from sample.json file and then iterate over the data and finally displaying it as a list.

Fetching Data from MySQL Database using Ajax

Fetching data from mysql requires the usual approach. First you need to be connected with the database and then execute a query to the mysql database. Finally iterating over the data and displaying as list for the users. In our example when you click on the button to fetch data from mysql table, the function fetchfromMysqlDatabase() fires an ajax event which in turn calls a getrecords.php file. This file executes the query to the database and returns the data in html list format.

The code of the php file which executes the query to the database and return the data in a list format.
Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I’m Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.