Ajax
· AJAX
= Asynchronous JavaScript and XML.
· AJAX
is not a new programming language, but a new way to use existing standards.
· AJAX
is the art of exchanging data with a server, and updating parts of a web page -
without reloading the whole page.
AJAX is based on
internet standards, and uses a combination of:
- XMLHttpRequest object (to
exchange data asynchronously with a server)
- JavaScript/DOM (to
display/interact with the information)
- CSS (to style the data)
- XML (often used as the format
for transferring data)
The XMLHttpRequest
object is used to exchange data with a server behind the scenes. This means
that it is possible to update parts of a web page, without reloading the whole
page.
Create an XMLHttpRequest
Object
All modern browsers
(IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest
object.
Syntax for creating an
XMLHttpRequest object:
variable=new XMLHttpRequest();
Old versions of
Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new
ActiveXObject("Microsoft.XMLHTTP");
GET Requests
A simple GET request:
Example
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
xmlhttp.send();
In the example above,
you may get a cached result.
To avoid this, add a
unique ID to the URL:
Example
xmlhttp.open("GET","demo_get.asp?t="
+ Math.random(),true);
xmlhttp.send();
xmlhttp.send();
If you want to send
information with the GET method, add the information to the URL:
Example
xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();
xmlhttp.send();
POST Requests
A simple POST request:
Example
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
xmlhttp.send();
To POST data like an
HTML form, add an HTTP header with setRequestHeader(). Specify the data you
want to send in the send() method:
Example
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
The onreadystatechange event
When a request to a
server is sent, we want to perform some actions based on the response.
The onreadystatechange
event is triggered every time the readyState changes.
The readyState
property holds the status of the XMLHttpRequest.
Three important
properties of the XMLHttpRequest object:
|
onreadystatechange
|
Stores a function
(or the name of a function) to be called automatically each time the
readyState property changes
|
|
readyState
|
Holds the status of
the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
|
status
|
200: "OK"
404: Page not found |
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if
(window.XMLHttpRequest)
{// code for
IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new
XMLHttpRequest();
}
else
{// code for IE6,
IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if
(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a
name in the input field below:</h3>
<form
action="">
First name: <input
type="text" id="txt1"
onkeyup="showHint(this.value)" />
</form>
<p>Suggestions:
<span id="txtHint"></span></p>
</body>
</html>
No comments:
Post a Comment