AJAX(asynchronous JavaScript and XML) is an important front-end web technology that lets JavaScript communicate with a web server. It lets you load new content without leaving the current page, creating a better, faster experience for your web site's visitors. In this course, you'll learn how AJAX works and how you can use JavaScript to communicate with a web server. We'll use plain JavaScript as well as jQuery to create AJAX requests and use the response to dynamically update your web pages. Along the way, you'll build mini-projects to reinforce your learning. We wrap up the course with a small project, showing you how to apply what you've learned to pull images from Flickr and display them on your web site.
Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.
When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.
Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.
Example:
HTML
<!DOCTYPE html> <html> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
Now, add a <script> tag to the page's head section. The script section contains the loadXMLDoc() function:
SCRIPT
<head> <script> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head>
Some advantages
AJAX, you see, is based on internet standards. It uses a combination of the following to accomplish it’s goal:
- XMLHttpRequest Object(Modern Broswers and IE7+)
- ActiveXObject (IE6 and below)
- JavaScript/DOM (Used to interact browser and server)
- XML (Returned results)
- JSON (Returned results)
- HTML (Returned results)
These standards are browser based, making them platform independent. It doesn’t matter where you program this in, as long as you have a browser, then this ‘should’ work. All you would need is a server with the application files, and the browser should do the rest.
Another advantage using AJAX would be a better user interactivity. This could be named the most obvious benefit of using AJAX, and why web developers and webmasters are using AJAX more and more every day. AJAX simplifies the flow of an application, thus making it have quicker interaction between user and website since pages are not reloaded for content to be displayed. This activity can be simplified, since the loading times can be reduced from websites.
The advantage above opens up for this next advantage, which you can call it, smoother navigation on a website. While using AJAX, users will not have the need to use the refresh nor the back button, thus, allowing quicker response from the server.
Another advantage using AJAX would be a better user interactivity. This could be named the most obvious benefit of using AJAX, and why web developers and webmasters are using AJAX more and more every day. AJAX simplifies the flow of an application, thus making it have quicker interaction between user and website since pages are not reloaded for content to be displayed. This activity can be simplified, since the loading times can be reduced from websites.
The advantage above opens up for this next advantage, which you can call it, smoother navigation on a website. While using AJAX, users will not have the need to use the refresh nor the back button, thus, allowing quicker response from the server.
Some Disadvantages
Everything that has an advantage, will most likely have disadvantages, and AJAX surely has some that I will mention.
Even though the back and refresh button are not needed while navigating a website with AJAX, these two buttons can become useless. This is due to the fact that, AJAX ‘navigating’ does not change you URL, so if you were in the middle of a process, and have no direct URL to where you were, then this might be bad. In some cases, the use of Hijaxing is used, which is the use of hashing url (#) at the end.
Another disadvantage would be that it is dependant on JavaScript. While it is ok to depend on it, since most modern (if not all) already use it, but in some cases, there are users who prefer disabling JavaScript. This makes AJAX worthless. Gladly, there is a workaround this problem, as web developers must have in mind, every time they create an AJAX Website, they need to always think of this and make an optional non-AJAX version of the AJAXified website they just created.
The last disadvantage I want to point out would be the SEO factor. Since there are no SEO Friendly URL’s, then search engine tend to bypass your application, and it would appear as if that part of your site does not exist.
Recommendations
Before coding your AJAX website, make sure you think of the listed disadvantages and obviously many more. Remeber, when creating a website, you have to think on customer/client satisfaction, not your own. You have to always think of all, and I mean ALL common browsers, including IE6
No comments:
Post a Comment