ajax - the basics
-
Upload
arnelle-balane -
Category
Technology
-
view
71 -
download
0
description
Transcript of ajax - the basics
Asynchronous
Javascript
And
XML
HISTORY
1990s websites are based on complete HTML pages- user actions required complete pages to be loaded from the server
- additional load on the server and used excessive bandwidth
1996 Internet Explorer introduced the iframe tag- allowed asynchronous loading of content
HISTORY
1998 Microsoft Outlook Web Access Team created the first XMLHTTP component
1999 Microsoft added the XMLHTTP ActiveX component to Internet Explorer 5
- later adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest object
“…while nobody I know used it, the function stayed there, waiting to be taken advantage of.”Aaron Swartz, W3C
HISTORY
2004 Google realized the potential of the XMLHttpRequest object
- created Gmail
2005 Google created Google MapsFebruary 18 Jesse James Garrett of Adaptive Path coined the term “AJAX” based
on techniques used on Google pages
WHAT IS IT?
a group of interrelated web development techniques used on the client-side to create asynchronous web applications
WHAT IS IT?
not just a single technology- HTML and CSS
- Document Object Model (DOM)
- XMLHttpRequest
- Javascript
WHAT IS IT?
despite the name, it is not necessary to use XML for data interchange
- preformatted HTML
- Javascript Object Notation (JSON)
requests to the server can be synchronous
- plain text
WHERE IS IT USED?
login forms
auto-complete
voting and rating
updating user content external widgets
form validations
chat rooms
instant messaging
…and many more
HOW IT WORKS
user requests a pageURL
browser sends request to the server
HOW IT WORKS
server receives the request and prepares the requested page
user stares at a blank page while waiting for the requested page to load
URL
HOW IT WORKS
Javascript
server sends the requested page to the browser
HTML
CSS
URL
HOW IT WORKS
URL
browser renders the page and executes additional scripts
creates XMLHttpRequest object
user can now interact with the page
HOW IT WORKS
URL
page tells the XMLHttpRequest object to send a request to the server
XMLHttpRequest object sends request to the server
HOW IT WORKS
URL
server receives and processes the request
user can continue interacting with the page
HOW IT WORKS
URL
server sends response to the XMLHttpRequest object
HOW IT WORKS
URL
Javascript processes the server response
HOW TO DO IT
creating an XMLHttpRequest object
sending a request to the server
handling server response
HOW TO DO ITcreating an XMLHttpRequest object
var xhr = new XMLHttpRequest();
var xhr;if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();} else {
try {xhr = new ActiveXObject(‘Msxml2.XMLHTTP');
} catch (e) {try {xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
} catch (e) {}}
}
modern browsers
older versions of IE
cross-browser compatibility
HOW TO DO ITsending a request to the server
xhr.open(method, url, async);
initialize the request
method – string, HTTP request method (GET or POST)
url – string, the URL to send the request to
async – boolean, whether to perform the operation asynchronously
HOW TO DO ITsending a request to the server
xhr.setRequestHeader(header, value);
set the request headers
header – string, the name of the request header
value – string, the value of the request header
HOW TO DO ITsending a request to the server
xhr.send(data);
send the request
data – the data to be sent to the server
note: - data is ignored if request method is GET
HOW TO DO IThandling server response
readystatechange event- triggered when the readyState property of the XMLHttpRequest object gets changed
readyState values- 0 – UNSENT
- 1 – OPENED
- 2 – HEADERS_RECEIVED
- 3 – LOADING
- 4 – DONE
HOW TO DO IThandling server response
xhr.onreadystatechange = nameOfCallbackFunction;
listen for the readystatechange event
xhr.onreadystatechange = function() {
}
note: - this must be performed already before calling the send() function
HOW TO DO IThandling server response
xhr.onreadystatechange = function() {if (xhr.readyState == 4) {
}}
checking the readyState
note: - readyState becomes DONE when either the request completed successfully or something went wrong
HOW TO DO IThandling server response
xhr.onreadystatechange = function() {if (xhr.readyState == 4) {
if (xhr.status == 200) {// request completed successfully
} else {// something went wrong
}}
}
checking the response status
HTTP Status Codes200 – OK
404 – NOT FOUND
500 – INTERNAL ERROR
503 – GATEWAY TIMEOUT
etc.
HOW TO DO IThandling server response
xhr.onreadystatechange = function() {if (xhr.readyState == 4) {
if (xhr.status == 200) {var response = xhr.responseText;
} else {// something went wrong
}}
}
get the server’s response
- returns the response as a string
xhr.onreadystatechange = function() {if (xhr.readyState == 4) {if (xhr.status == 200) {
var response = xhr.responseXML;} else {
// something went wrong}
}}
- returns the response as an XMLDocument object, traversable using Javascript DOM functions
HOW TO DO ITsample source code
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {if (xhr.readyState == 4) {
if (xhr.status == 200) {alert(xhr.responseText);
} else {alert('Something went wrong!');
}}
}
xhr.open('GET', 'server.php');Xhr.send();
$.ajax({url: 'server.php',type: 'GET',success: function(response) {alert(response);
},error: function() {alert('Something went wrong!');
}});
Native Javascript jQuery
the end