· The full form of AJAX
· Ajax
· Ajax
· It is a combination of JavaScript and Xml favoring asynchronous communication.
· With AJAX
· Ajax
· Ajax
· Classic web pages, (which do not use AJAX
· In traditional JavaScript coding, if the user wants to get any information from a database or a file on the server, or want to send any user information to the server, the user will have to make a HTML form and use GET or POST method to transfer the data to the server.
· The user will have to click the submit button to send or get information, wait for the server to response and then a new page will be loaded with the results.
· Because the server returns a new page each time when the user submits input, web applications can run slowly and it tends to be less user friendly.
· With Ajax JavaScript communicates directly with the server through the XMLHttpRequest object.
· With a HttpRequest object a web page can make a request to, and get a response from the web server without reloading the page.
· The user will stay on the same page and he/she will not notice that scripts request pages or send data to the server.
· By using the XMLHttpRequest object a web developer can update a page with the data from the server after the page has loaded.
Ø XMLHttpRequest Object
- With Ajax JavaScript communicates directly with the server through the XMLHttpRequest object.
- With a HttpRequest object a web page can make a request to, and get a response from the web server without reloading the page.
- The XMLHttpRequest object is supported by almost all the browsers.
- All new browsers use the built-in JavaScript XMLHttpRequest object to create an XMLHttpRequest object.
- But IE5 and IE6 (Internet Explorer version 5 and 6) uses an ActiveXObject method to create an XMLHttpRequest object.
Ø readyState property
The readyState property holds the status of the server’s response. Each time when the value of readyState property changes then a onreadystatechange () function will be executed.
Possibility values for readyState property
0 – The request is not initialized
1 – The request has been set up
2 – The request has been sent
3 – The request is in process
4 – The request is complete
Ø responseText property
The data sent back from the server can be retrieved using responseText property. This property assures the responded data to our request.
Ø Sending a request to the server
· To send a request to the user the open() and send() method are used.
· The open() method takes three arguments.
1) The first argument specifies the method through which the data is to be send when sending the request i.e. the GET or POST method.
2) The second argument specifies the URL of the server-side script.
3) The third argument specifies whether the request should be handled asynchronously or not. Default value is true.
· The send() method is used to send the request to the server.
Example: html file
<html>
<head>
<script type="text/javascript">
var http=false;
if (navigator.appName == "Microsoft Internet Explorer")
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
http = new XMLHttpRequest();
}
function validate(user)
{
http.abort();
http.open("Get","ajax.php?name=" + user, true);
http.onreadystatechange = function()
{
if(http.readyState == 4)
{
document.getElementById('test').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body>
<h1> Please Enter your username:</h1>
<form>
<input type="text" onKeyUp="validate(this.value)" />
<div id="test"></div>
</form>
</body>
</html>
Example: PHP file
<?php
function validate($name)
{
if ($name == '')
{
return '';
}
if (strlen($name) < 3)
{
return "<span> Username too short </span>";
}
return "<span> Username ok </span>";
}
echo validate(trim($_REQUEST['name']));
?>
Ø Ajax
Example: html file
<html>
<head>
<script type="text/javascript">
var http=false;
if (navigator.appName == "Microsoft Internet Explorer")
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
http = new XMLHttpRequest();
}
function validate(user)
{
http.abort();
http.open("Get","ajax1.php?id=" + user, true);
http.onreadystatechange = function()
{
if(http.readyState == 4)
{
document.getElementById('test').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body>
<form>
<input type="text" onKeyUp="validate(this.value)" /> <br/>
<div id="test"></div>
</form>
</body>
</html>
Example: php file
<?php
$q=$_GET["id"];
if($q > 0 )
{
$link=mysql_connect("localhost","root","");
mysql_select_db("student", $link);
$query= "Select * from stud_info where id=".$q;
$rs=mysql_query($query);
$c = mysql_num_rows($rs);
if($c > 0)
{
echo "<br/>";
echo "<table border='1'>
<tr>
<th> Name </th>
<th> City </th>
</tr>";
while ($row=mysql_fetch_array($rs))
{
echo "<tr>";
echo "<td>". $row['name']. "</td>";
echo "<td>". $row['city']. "</td>";
echo "<tr>";
}
echo "</table>";
}
else
{
echo "No Record Available.";
}
}
?>
Posted By : Hemangi Zala
No comments:
Post a Comment