AJAX is used in several popular web applications and more. Some examples include -
- Autocomplete
Google was among the first websites to incorporate AJAX for auto suggestions to their users. As you type a search query in Google, you will notice that some suggestions will appear automatically and you can choose between those by navigating through up and down keys.
Here, it uses AJAX to display results based on input via each keystroke. Autocomplete makes it easier for the user to wade easily through many inputs while filling out forms or launching a query.
Voting
Websites such as Reddit use AJAX to handle voting and rating on main content displayed on the site. The users can vote and give their opinions on several stories in a short amount of time.
Instant Messaging
AJAX has also found its applications to enjoy seamless instant messaging features in a chat room. Two main processes handled by AJAX include - sending and receiving messages to and from the server for real-time updates. In the background, AJAX reloads the page every time a user sends or received messages.
Update user content
Twitter has recently used AJAX for enhancing its platform and interface. Every time a new topic starts trending or a user tweets, these are instantly updated without the need to reload the entire page. Twitter feed is loaded every other second to let the user know about real-time updates, trending topics, tweet activity, and more.
Login forms
AJAX helps update the log-in system in scenarios where a user wants to access a certain page and can log in directly without going to the original login page. As the user logs in, AJAX will send a request to the server and the page will get updated as required by the user.
External Widgets
AJAX also finds applications in various Content Management Systems such as WordPress and scrips like Google Adsense. The AJAX can communicate with any server online and not just the server where the web page is located. It loads external content on the web page while the original content on the web page remains unchanged.
Maps
Google Maps and Yahoo Maps use AJAX to make the navigation process easier for the user. Users can simply drag the map without the need to click on a button.
AJAX - Browser Support
AJAX supports a limited number of browsers, some of which include -
- Mozilla Firefox 1.0 and above
- Konqueror
- Opera 7.6 and above
- Microsoft Internet Explorer 5 and above
- Apple Safari 1.2 and above
- Netscape version 7.1 and above
The reason that AJAX does not support every browser is that different browsers use different methods for the creation of a built-in JavaScript object, known as XMLHttpRequest.
Therefore, it is recommended to check your browser is it supports AJAX or not before writing the web application. However, one way to create a JavaScript object is using the try….catch blocks.
Here are the browser-compatible code using ‘try….catch’ blocks in the JavaScript to create the XMLHttpRequest object.
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
//-->
</script>
<form name = 'myForm'>
Name: <input type = 'text' name = 'username' /> <br />
Time: <input type = 'text' name = 'time' />
</form>
</body>
</html>
In the above example, we created ajaxRequest variable. This is used to create the object, ajaxRequest=new XMLHttpRequest() This is done for incompatible browsers such as Firefox, Opera, and Safari. If this method fails, then we still have two methods left.
The second time, we used ajaxRequest=new ActiveXObject("Msxml2.XMLHTTP") which is used to create the object for Internet Explorer 6.0 browsers and above. Now, if this also fails, try the third time.
In third method, we used ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP") which is used for Internet Explorer 5.5+ browsers.
If none of the above-mentioned methods work, the user has an outdated browser and is likely to get an alert saying that the browser is not compatible with AJAX.
