PHP with Get Method-1
Reterive data from server without page refresh

In this section we are getting data from server by get method. in this section we create three page

1. HTML
2. Javascript
3. PHP

HTML Form

By this HTML Form User simply click on submit button. when user click on submit button then Javascript getvalue() function call.

Note :- ajax.js file must be write in Javascript Tag.

Create Form

<html>
<head>
<script type='text/javascript' src='ajax.js'></script>
<title>simple Ajax Example</title>
</head>
<body>
<input type="submit" onclick="getvalue();" value="Click Here"/>
<div id='txt'>
This is my div text.
</div>
</body>
</html>

Javascript file

This is simple Javascript file.

Here we first create object for XMLHttpRequest. and allocating memory.

After allocating memory we use property(onreadystatechange) of XMLHttpRequest Object. This property store value(0,1,2,3,4) from the function. When function this value became 4 means process complete.

When this property(onreadystatechange) set value 4 of readystate property and status 200. then if Condition is true and we reterive value from server through response text property and then we set the value of response text property to any html tag. like here use html div tag to show value.

Create Javascript file file must be save as ajax.js because we have write ajax.js in the above forms

function getvalue()
{
var XMLHttpRequestObject=false;

if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequestObject.onreadystatechange = function()
{
if(XMLHttpRequestObject.readyState == 4)
{
document.getElementById('txt').innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.open("GET", "data1.php", true);
XMLHttpRequestObject.send(null);
}

PHP page

Create PHP Page write this echo message. file must be save as data1.php

<?php
echo "This message come from server without reloading page";
?>


Previous
Next