WHAT IS AJAX?
Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
- A browser built-in XMLHttpRequest object (to request data from a web server)
- JavaScript and HTML DOM (to display or use the data)
AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally common to transport data as plain text or JSON text.
AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
AJAX Example Explained
<!DOCTYPE html>
<html>
<body>
<div id=”demo”>
<h2>Let AJAX change this text</h2>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
</div>
</body>
</html>
The HTML page contains a <div> section and a <button>.
The <div> section is used to display information from a server.
The <button> calls a function (if it is clicked).
The function requests data from a web server and displays it:
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
}
How AJAX Works
- 1. An event occurs in a web page (the page is loaded, a button is clicked)
- 2. An XMLHttpRequest object is created by JavaScript
- 3. The XMLHttpRequest object sends a request to a web server
- 4. The server processes the request
- 5. The server sends a response back to the web page
- 6. The response is read by JavaScript
- 7. Proper action (like page update) is performed by JavaScript
FEATURES OF AJAX
The features of Ajax are as follows:
1) Live data binding
2) Client-side template rendering
3) Declarative instantiation of client components
4) Observer pattern on JavaScript objects and arrays
5) Invoking ADO.NET data services and data contexts
6) DataView control
What are the components and features of AJAX?
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 Pros and Cons of Using Ajax
Some of the many benefits of using Ajax in web-based applications include the following:
- Improved user experience
- Asynchronous processing
- Reduced server hits and network load
- Platform and architecture neutrality
- Multibrowser support
- Faster page renders and improved response times
We discuss each of these as we progress through the hours of this book.
The Downsides of Using Ajax
Now let’s discuss the drawbacks of using Ajax or, more precisely, areas where Ajax can fit and those where it can’t. Although Ajax comes with a lot of advantages, there are quite a few downsides to using Ajax in your web applications. The major drawback is its massive usage and dependency on JavaScript. It should be noted that JavaScript is implemented differently for various browsers, such as Internet Explorer, Netscape, Mozilla, and so on. This becomes a constraint especially when you need to make Ajax work across browsers.
Added to this, you do not have support for JavaScript in mobile browsers. So, taking Ajax’s dependency on JavaScript into consideration, Ajax might not be well suited for designing mobile applications.
Usage of Ajax makes your web page difficult to debug, increases the code size of your web page, and makes your web page prone to potential security threats. Moreover, its usage—and the asynchronous operations thereafter—tend to increase the load on the web server. When using Ajax, making your application cross-browser compliant is rather difficult (although not impossible, of course), and the Back button of your web browser does not work.
drop your comment
