AJAX Introduction

12th Jan 2010 at 1:54 PM | Posted in AJAX LEARNING | 3 Comments

AJAX = Asynchronous JavaScript and XML.
AJAX is based on JavaScript and HTTP requests.
AJAX is not a new programming language, but a new way to use existing standards.
With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page.

Internet-applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop.
However, Internet-applications are not always as “rich” and user-friendly as traditional desktop applications.
With AJAX, Internet applications can be made richer and more user-friendly.

AJAX uses the XMLHttpRequest object

To get or send information from/to a database or a file on the server with traditional JavaScript, you will have to make an HTML form, and a user will have to click the “Submit” button to send/get the information, wait for the server to respond, then a new page will load with the results. Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.

Advertisements

My 1st ajax script

12th Jan 2010 at 1:50 PM | Posted in AJAX LEARNING | Leave a comment

/************ starts ***************/
1st create a div:
<div id=”test”>
<h2>Click to let AJAX change this text</h2>
</div>
Add two buttons &  add a onclick function.
<button type=”button” onclick=”loadXMLDoc(‘test1.txt’)”>Click Me</button>
<button type=”button” onclick=”loadXMLDoc(‘test2.txt’)”>Click Me</button>

Finally place the script into head section.
<script type=”text/javascript”>
function loadXMLDoc(url)
{
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)
{document.getElementById(‘test’).innerHTML=xmlhttp.responseText}
}
xmlhttp.open(“GET”,url,false);
xmlhttp.send(null);
document.getElementById(‘test’).innerHTML=xmlhttp.responseText;
}
</script>
Now you need two .txt file.
create “test1.txt” &amp; “test2.txt” &amp; write any thing in those page. Save them in same directory where the script is saved.
/*********** ends *********************/

Ajax responseText

12th Jan 2010 at 1:34 PM | Posted in AJAX LEARNING | Leave a comment

Sending an AJAX Request to a Server(Methodes open()/send()):
To send a request to a web server, we use the open() and send() methods.
The open() method takes three arguments. The first argument defines which method to use (GET or POST). The second argument specifies the name of the server resource (URL). The third argument specifies if the request should be handled asynchronously.
The send() method sends the request off to the server. If we assume that requested a file called “time.asp”, the code would be:

Get the responsetext by xmlhttp.responseText &amp; put this in the div whose id is test.

By changing the third parameter in the open call to “true”, you tell the XMLHttpRequest object to continue the execution after the request to the server has been sent.
Because you cannot simply start using the response from the server request before you are sure the request has been completed, you need to set the onreadystatechange property of the XMLHttpRequest, to a function (or name of a function) to be executed after completion.
In this onreadystatechange function you must test the readyState property before you can use the result of the server call.

State Description
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

AJAX Suggest

12th Jan 2010 at 1:18 PM | Posted in AJAX LEARNING | 2 Comments

http://www.w3schools.com/ajax/ajax_source.asp

Blog at WordPress.com.
Entries and comments feeds.