2. So…. What is Ajax?
Ajax stands for: Asynchronous JavaScript and XML
It is a set of techniques for creating highly interactive web sites and web
applications.
Examples?
http://www.aia.gr/traveler/flight-info/rtfi/
http://peteranswers.com/
3. Main idea
The idea is to make what’s on the Web appear to be local by giving you a
rich user experience, offering you features that usually only appear in
desktop applications.
4. Is Ajax a technology?
Ajax is NOT a technology. It’s a combination of several technologies:
standards-based presentation using XHTML and CSS;
dynamic display, interaction using the Document Object Model (DOM);
data interchange and manipulation using XML and JSON;
asynchronous data retrieval using XMLHttpRequest object;
and JavaScript binding everything together.
5. A little bit of History
Microsoft Outlook Web Access team implemented Ajax in 1998
Google maps and Gmail used it in 2005
James Garret wrote an article combining the techniques that google used
and that’s how the term Ajax was coined (2005)
W3C released the first draft specification for the XMLHttpRequest object in
an attempt to create an official web standard in 2006
6. Hands on code…
HTML - CSS
<H1>An Ajax example</H1>
<form>
<input type = "button" value = "Fetch the
message“ onclick = "getData('data.php',
'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched message will appear
here.</p>
</div>
7. Hands on code… continued
Javascript – XmlHttpRequest – DOM Manipulation
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) XMLHttpRequestObject = new XMLHttpRequest();
else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");}
function getData(dataSource, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
obj.innerHTML = XMLHttpRequestObject.responseText;
XMLHttpRequestObject.send(null);
}
}
</script>
8. Hands on code… continued
PHP
<?php
echo 'This text comes to you thanks to PHP.';
?>
10. Ready states and status codes
Ready states
0 Uninitialized
1 Loading
2 Loaded
3 Interactive
4 Complete
11. Ready states and status codes
Status codes
1xx Informational
2xx Successful
3xx Redirection
4xx Client error
5xx Server error
Famous examples
200 OK
201 Created
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
12. Possibilities
That was plain text answer from the server. It could also be a xml or json
object
Connection with a database
Not only Get data but also Post data
13. Usages
Web forms (password strength, autocomplete searches e.t.c.)
On-page notifications (like facebook)
On-site Instant Messaging (every chat uses ajax)
Collaborative tools (many people working on the same doc)
External widgets
and many many many many more…
16. Drawbacks
Bookmarking a page
Going back on a previous page
Difficult for a web crawler to index a page
Now every browser support javascript and XHR
Difficult for screen readers
17. What About jQuery and AJAX?
Writing regular AJAX code can be a bit tricky
Different browsers have different syntax for AJAX implementation
This means that you will have to write extra code to test for different
browsers
The jQuery team has taken care of this for us
We can write AJAX functionality with only one single line of code
18. jQuery load() Method
The jQuery load() method is a simple, but powerful AJAX method. It loads data
from a server and puts the returned data into the selected element.
$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies a set of querystring key/value pairs
to send along with the request.
The optional callback parameter is the name of a function to be executed
after the load() method is completed.
19. jQuery load() Method Ex.
jQuery
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
demo_test.txt
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
20. jQuery $.get() Method
The $.get() method requests data from the server with an HTTP GET request.
$.get(URL,callback);
The required URL parameter specifies the URL you wish to request.
The optional callback parameter is the name of a function to be executed
if the request succeeds.
21. jQuery $.get() Method Ex.
jQuery
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
demo_test.php
<?php
echo 'This text comes to you thanks to PHP.';
?>
22. jQuery $.post() Method
The $.get() method requests data from the server with an HTTP POST request.
$.post(URL,data,callback);
The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies some data to send along with the
request.
The optional callback parameter is the name of a function to be executed
if the request succeeds.
23. jQuery $.post() Method Ex.
jQuery
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
demo_test.asp
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
24. HTTP GET vs HTTP POST
GET POST
BACK button/Reload Harmless
Data will be re-submitted (the browser
should alert the user that the data are
about to be re-submitted)
Bookmarked Can be bookmarked Cannot be bookmarked
Cached Can be cached Not cached
History Parameters remain in browser history
Parameters are not saved in browser
history
Restrictions on data length
Yes, when sending data, the GET method
adds the data to the URL; and the length
of a URL is limited (maximum URL length is
2048 characters)
No restrictions
Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is also allowed
Security
GET is less secure compared to POST
because data sent is part of the URL
Never use GET when sending passwords or
other sensitive information!
POST is a little safer than GET because the
parameters are not stored in browser
history or in web server logs
Visibility Data is visible to everyone in the URL Data is not displayed in the URL
25. Too easy for you?
Take a look at reverse-ajax, a.k.a. Comet.
A Web server pushes data to a browser, without the browser explicitly
requesting it.
Good luck with it…
26. Like it?
Kris Hadlock – Ajax for Web Application Developers
http://www.w3schools.com/jquery/
http://en.wikipedia.org/wiki/Ajax_%28programming%29
http://thesharad.files.wordpress.com/2010/10/ajax-a-beginners-guide.pdf
Bibliography