AJAX (Asynchronous Javascript and XML) is a very popular concept that is used to update the page without reloading the page.
AJAX is also very popular because many top browsers support AJAX. Supporting AJAX means supporting XMLHttpRequest/ActiveXObject which will help us to send AJAX requests.
Some of the major browsers that support AJAX in their current versions are as follows.
- Google Chrome
- Opera
- Mozilla Firefox
- Safari
- Microsoft Edge
- Internet Explorer
- Brave Browser
We know that this list is not limited. There are a lot of browsers that support AJAX but there are some browsers or some older versions of these listed browsers that do not support AJAX. If our Javascript code contains AJAX and the browser that our user is using does not support AJAX then the whole website’s Javascript code will not work and the user cannot use any functionality supported by that Javascript code.
We need a mechanism by which we can ensure that if the user’s browser does not support AJAX then all the functionality except that functionality is provided by AJAX should work. This means It should not happen that users can’t even see those functionalities that are not even related to AJAX.
The objects that are responsible for making AJAX requests.
- ActiveXObject: It is used in Internet Explorer(version 5.0 & 6.0) to call AJAX
- XMLHttpRequest: It is used in almost all the other browsers and Internet Explorer (from version 7.0) to call AJAX.
If any browser cannot create any of these two objects ActiveXObject” and “XMLHttpRequest”, then that browser cannot support AJAX. We can handle that condition by showing a message to the user that “Your Browser doesn’t support AJAX”. After that, we will show the rest of the functionality of JavaScript code that has to do nothing with AJAX using the following ways.
1. Using if-else block
Whenever any browser has “XMLHttpRequest” or “ActiveXObject” then that will be the member of the global “window” object. So we can check whether our “window” object has any member with the name “XMLHttpRequest” or “ActiveXObject”. If it has, then “AJAX will be supported by the browser” else “AJAX will not be supported by the browser”.
Steps for using if-else for checking and handling browser support of AJAX:
- Create a variable “request” and store “null”.
- If the window has “XMLHttpRequest” then “window.XMLHttpRequest” will return “true” and the “if” condition will be executed.
- If the window does not have XMLHttpRequest, then there is a possibility that the browser is Internet Explorer version 5.0 or 6.0.
- Do the same for “ActiveXObject” as we did for “XMLHttpRequest”.
- We try to store “ActiveXObject” into the “request” variable assuming the browser to be Internet Explorer 5.0
- In last if our “request” variable contains null then this browser neither has “XMLHttpRequest” nor “ActiveXObject”. Hence we can say that this browser does not support AJAX.
- If our “request” variable does not contain “null” then it contains either “XMLHttpRequest” or “ActiveXObject”.
Example:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>AJAX Browser support using if-else</title>
<style>
h1{
text-align: center;
color: green;
}
h3 {
text-align: center;
color: black;
}
button {
margin-left: 34.5rem;
}
#container {
text-align: center;
}
</style>
<script>
function loadInformation() {
var request=null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}
else{
if(window.ActiveXObject){
//For Internet Explorer 6.0
request=new ActiveXObject("Msxml2.XMLHTTP");
if(request==null){
//For Internet explorer 5.0
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
if(request==null){
alert("Your Browser doesn't support AJAX");
}
else{
//Use your AJAX Functionality
console.log(request);
}
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>AJAX Browser support using if-else</h3>
<button onClick="loadInformation()">
Click to Load
</button>
<div id="container"></div>
</body>
</html>
|
Output:
Used Chrome Browser that supports “XMLHttpRequest”
2. Using a try-catch block
Try-Catch is very popularly known for error handling. It is used when any particular block of code can cause a runtime errors. The “catch” block, will place the code to handle the error encountered.
If the code in the “try” block does not cause any error then the output of that code will be shown and the “catch” block will not run. If the code in the “try” block causes any error then that “catch” block associated with it will run and handle that.
Steps for using try-catch for checking and handling browser support of AJAX-
- Create a variable to store “XMLHttpRequest/ActiveXObject”. let us create a variable named “request’.
- In the “try” block try to create the Object “XMLHttpRequest” and store it in the “required” variable. After that add the functionality that you want to add using AJAX.
- If that browser supports “XMLHttpRequest” then the code will execute and AJAX functionality will be shown on the website but if the browser does not support “XMLHttpRequest” then that code will cause an error and a “catch” block will run.
- In the “try” block,do the same for “ActiveXObject” of Internet Explorer 6.0 as we did for “XMLHttpRequest”.
- If “ActiveXobject” of Internet Explorer will be supported by the browser then the code will execute but if it is not supported then the command goes to the “catch” block.
- In the catch block, again use a try-catch. In the “try” block, we will do the same for Internet Explorer 5.0 as we did for Internet Explorer 6.0 whereas in the catch block we will show an alert “Your Browser doesn’t support AJAX” to the user.
- We will show this alert in this catch block because the command came to this catch block if the browser does not support “XMLHttpRequest” or “ActiveXObject”
Example:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>AJAX Browser support using try-catch</title>
<style>
h1{
text-align: center;
color: green;
}
h3 {
text-align: center;
color: black;
}
button {
margin-left: 34.5rem;
}
#container {
text-align: center;
}
</style>
<script>
function loadInformation() {
var request;
try
{
request=new XMLHttpRequest();
console.log(request);
}
catch (event)
{
try
{
//For Internet Explorer 6.0
request=new ActiveXObject("Msxml2.XMLHTTP");
console.log(request);
}
catch (event)
{
try
{
//For Internet Explorer 5.0
request=new ActiveXObject("Microsoft.XMLHTTP");
console.log(request);
}
catch (event)
{
alert("Your Browser doesn't support AJAX");
return false;
}
}
}
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>AJAX Browser support using try-catch</h3>
<button onClick="loadInformation()">
Click to Load
</button>
<div id="container"></div>
</body>
</html>
|
Output:
Used Chrome Browser that supports “XMLHttpRequest”