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.