Fetching Data From MySQL With Ajax In PHP

This article explains fetching data from MySQL with Ajax in PHP.

Introduction

This article explains fetching data from MySQL with Ajax in PHP. To do that you will first create a table and store some data in it for retrieving with Ajax and transform the array data from MySQL to XML using a DOM element. Ajax will read the data from the MySQL server form of XML data using PHP code. First of all You will create a client-side file use of HTML with Ajax and then create a connection with your database in MySQL then create the PHP code.

table.jpg

Example

This is the "index.html" file.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<books>Ajax</books>

<script type="text/javascript">

var xml_http = xml_request_object();

function xml_request_object(){

  var xml_http;

  try

  { 

    xml_http = new XMLHttpRequest();   

  }

  catch(e)

  {

    try

    {

      xml_http = new ActiveXObject("Microsoft.XMLHTTP");

    }

    catch(e){ }

  }

  if (!xml_http)

    alert("Error creating the XMLHttpRequest Object");

  else

    return xml_http;

}

function get_ready()

{

  if(xml_http)

  {

    try

    {

      xml_http.open("Get","new_books.php", true);

      xml_http.onreadystatechange = RequestChange;

      xml_http.send(null);

    }

    catch(e)

    {

      alert("Can't connect to server\n" + e.toString());

    }

  }

}

function RequestChange()

{

  newDiv = document.getElementById("createDiv");

  if(xml_http.readyState == 1)

  {

    newDiv.innerHTML += "Loading your request one <br/>";

  }

  else if (xml_http.readyState == 2)

  {

    newDiv.innerHTML += "Loading your request two <br/>";

  }

  else if (xml_http.readyState == 3)

  {

    newDiv.innerHTML += "Request three intractive <br/>";    

  }

  else if (xml_http.readyState == 4)

  {

    if(xml_http.status == 200)

       {

         try

         {

           xmlData();

         }

         catch(e)

         {

           alert("Not response : " + e.toString());

         }

       }

       else

       {

         alert("Problem in getting data:" + xml_http.statusText);

       } 

  }

}

function xmlData()

{

  var response = xml_http.responseXML; 

  xmlRoot = response.documentElement;

  idArray = xmlRoot.getElementsByTagName("id"); 

  booksArray = xmlRoot.getElementsByTagName("books");

  written_byArray = xmlRoot.getElementsByTagName("written_by");    

  var html = "";

  for( var i=0; i<booksArray.length; i++)

  {

    html += idArray.item(i).firstChild.data + "- " + booksArray.item(i).firstChild.data +  ", " + written_byArray.item(i).firstChild.data + "<br/>";

  }

  newDiv = document.getElementById("createDiv");

  newDiv.innerHTML += "Final request: 4(complete). <br /> .Server said: <br />";  

  newDiv.innerHTML += html; 

}

</script>

</head>

<body onLoad="get_ready()">

Your records:

<div id="createDiv" />

</body>

</html>

 

And this is the "index.php" code and this file will create a XML document.
 

<?php

header('Content-type: text/xml');

mysql_connect('localhost','root','');

mysql_select_db('demo');

$query = "Select * from `data`";

$result   = mysql_query($query) or die(mysql_error());

$dom_elements = new DOMDocument();

$ddda = $dom_elements->createElement('ddda');

$dom_elements->appendChild($ddda);

while($r = mysql_fetch_array($result)){

  $id = $dom_elements->createElement('id');

  $idText = $dom_elements->createTextNode($r['id']);

  $id->appendChild($idText);

  $books = $dom_elements->createElement('books');

  $booksText = $dom_elements->createTextNode($r['books']);

  $books->appendChild($booksText);

  $written_by = $dom_elements->createElement('written_by');

  $written_byText = $dom_elements->createTextNode($r['written_by']);

  $written_by->appendChild($written_byText);

  $book = $dom_elements->createElement('book');

  $book->appendChild($id);

  $book->appendChild($books);

  $book->appendChild($written_by);

  $ddda->appendChild($book);

}

$string = $dom_elements->saveXML();

echo $string;

?>

Output

display data