Basicly AJAX is combination of JavaScript and XML. It helps developers to develop browser based applications and instead of sending a lot of request to server each time, we can call any specific file without refreshing all page.
For example, if you have registration page, when user post the form you need send request to server, check email or user id from database and if it is available, you send error message back and reload all page again. But with AJAX, you can post email or id controller page without reloading all page and while user filling form, you can show error message.
In fact, AJAX is based on XML but here I will show it very basic AJAX use to understand main point of AJAX.
We use XMLHttpRequest Object to send request to WEB server without reloading page.
<script type="JavaScript/text">
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest( url, qry, type , div) {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(type, url, true);
if(type == 'POST') {
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(qry);
} else {
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(div).innerHTML = xmlHttp.responseText;
}
} else {
document.getElementById(div).innerHTML = 'Loading...';
}
}
function checkEmail()
{
qry = '&email=' + document.getElementById("email").value;
startRequest('checkEmail.PHP',qry,'POST','expEmailCheck');
}
</script>
As you see at first I check whether WEB browser support XMLHttpRequest Object or not. If not, I usee ActiveXObject, else I create my xml object with XMLHttpRequest.
Now, lets assume that when user type his/her email and go to next inout field. I will add a specific JavaScript code to run my script when user leave email field.
<input type="text" name="email" id=email" onBlur="checkEmail();"><div id="expEmailCheck"></div>
When user leave email field, it will run checkEmail JavaScript function and I need to send url query, div id which I want to write message , type of request post or get and which PHP file I will request.
As you see as state change I call handleStateChange function and it has some status. Status 200 means it sends response text back, also during request, it will show loading message into div.
Lets see our PHP file.
<?PHP
$email = $_POST['email'];
$db->query("SELECT email FROM users WHERE email = ".$db->check($email)."");
If($db->num_rows()>0)
Echo 'Already Exists User Email';
Else
Echo 'Ok';
?>
As you see it is very simple. You can request any page with any data without reloading page. This is how to use AJAX without XML. I will explain how to use it with XML by next document.
To ask any question about AJAX, Click Here
