How to write an Ajax call in PHP

sachin · 05-08-2011, 02:29 PM

Let us try to understand about ajax call

Ajax is called in program whenever we want to extract the data from server or whenever we want to submit or post the data to server without submitting or refreshing whole web page

Let us begin by creating a scripting file. In our case, we have created a php file with name ajax.php
Following are few lines for ajax call

PHP Code:


			
    <?php

    if(isset($_GET['book'])) {

       echo 'Value entered was : '.$_GET['book'];

       exit();

    }

    ?>

    <script language="javascript">

    function ajaxFunction(prmValue) {

       var ajaxRequest;  // The variable that makes Ajax possible!

       try{

          // Opera 8.0+, Firefox, Safari

          ajaxRequest = new XMLHttpRequest();

       } catch (e){

          // Internet Explorer Browsers

          try{

             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

          } catch (e) {

             try{

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

             } catch (e){

                // Something went wrong

                alert("Your browser broke!");

                return false;

             }

          }

       }

       document.getElementById('damru').innerHTML = '<font color="Red"><b>Please Wait..!</b></font>';



       // Create a function that will receive data sent from the server

       ajaxRequest.onreadystatechange = function() {

          if(ajaxRequest.readyState == 4) {

             serverResponse = ajaxRequest.responseText;

             document.getElementById('result').value = serverResponse;

             document.getElementById('damru').innerHTML = "";



          }

       }

       ajaxRequest.open("GET", 'ajax.php?book='+prmValue, true);

       ajaxRequest.send(null);

    }

    </script>

    <div id="damru"></div>

    <br>

    Enter Book Name :

    <input type="text" name="book" onblur="ajaxFunction(this.value);">

    <br>

    Result :

    <input type="text" name="result" id="result" readonly size="100">

In the above coding, we have written some php coding in top of the lines These lines will check whether the request was simple page load or from ajax call. Lets first try to understand HTML and javascript part.
In HTML part, i have created to input boxes with name "book" and "result". In book text box, i have called a javascript function "ajaxFunction(this.value)" by passing text field value.

Now lets study about javascript part.
Depending on the browser, i have written different commands to create ajax object with name "ajaxRequest". After that i have written some HTML "please wait..." in the div so that while posting and extracting the data from server, atleast user can see that processing is going on.

After that, keeping in mind the ready state of ajax request, i have captured the value returned by ajax (from server side) with the command ajaxRequest.responseText and assigned the value in "result" text field.

I have used get method to post the ajax data to the server by following commands
ajaxRequest.open("GET", 'ajax.php?book='+prmValue, true);
ajaxRequest.send(null);

Besides this, we can also use POST method (depending upon our requirement). We can also send multiple values from server side to ajax (depending upon the requiremetns). If server returns the multiple values then we can send these values by using XML or by inserting special character. In case of special character insertion, we can further split ajaxRequest.responseText values into array and use these values
Cheers, code is ready to use. Just enjoy.

Please feel free to ask questions on ajax call. You valuable suggestions are invited for further improvement in the coding

Thanks.

sharma.s.prakash · 20-08-2011, 12:59 PM

thanx for sharing this but also share using post if you have

kaman · 03-09-2011, 12:10 PM

Very useful code.

05-08-2011, 02:29 PM	#1
sachin Senior Member Join Date: Aug 2011 Posts: 131	How to write an Ajax call in PHP Let us try to understand about ajax call Ajax is called in program whenever we want to extract the data from server or whenever we want to submit or post the data to server without submitting or refreshing whole web page Let us begin by creating a scripting file. In our case, we have created a php file with name ajax.php Following are few lines for ajax call PHP Code: <?php if(isset($_GET['book'])) { echo 'Value entered was : '.$_GET['book']; exit(); } ?> <script language="javascript"> function ajaxFunction(prmValue) { var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } document.getElementById('damru').innerHTML = '<font color="Red"><b>Please Wait..!</b></font>'; // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function() { if(ajaxRequest.readyState == 4) { serverResponse = ajaxRequest.responseText; document.getElementById('result').value = serverResponse; document.getElementById('damru').innerHTML = ""; } } ajaxRequest.open("GET", 'ajax.php?book='+prmValue, true); ajaxRequest.send(null); } </script> <div id="damru"></div> <br> Enter Book Name : <input type="text" name="book" onblur="ajaxFunction(this.value);"> <br> Result : <input type="text" name="result" id="result" readonly size="100"> In the above coding, we have written some php coding in top of the lines These lines will check whether the request was simple page load or from ajax call. Lets first try to understand HTML and javascript part. In HTML part, i have created to input boxes with name "book" and "result". In book text box, i have called a javascript function "ajaxFunction(this.value)" by passing text field value. Now lets study about javascript part. Depending on the browser, i have written different commands to create ajax object with name "ajaxRequest". After that i have written some HTML "please wait..." in the div so that while posting and extracting the data from server, atleast user can see that processing is going on. After that, keeping in mind the ready state of ajax request, i have captured the value returned by ajax (from server side) with the command ajaxRequest.responseText and assigned the value in "result" text field. I have used get method to post the ajax data to the server by following commands ajaxRequest.open("GET", 'ajax.php?book='+prmValue, true); ajaxRequest.send(null); Besides this, we can also use POST method (depending upon our requirement). We can also send multiple values from server side to ajax (depending upon the requiremetns). If server returns the multiple values then we can send these values by using XML or by inserting special character. In case of special character insertion, we can further split ajaxRequest.responseText values into array and use these values Cheers, code is ready to use. Just enjoy. Please feel free to ask questions on ajax call. You valuable suggestions are invited for further improvement in the coding Thanks.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

20-08-2011, 12:59 PM	#2
sharma.s.prakash Senior Member Join Date: Aug 2011 Posts: 110	thanx for sharing this but also share using post if you have

03-09-2011, 12:10 PM	#3
kaman Senior Member Join Date: Aug 2011 Posts: 111	Very useful code.