Showing posts with label AJAX - Browser Support. Show all posts

Tuesday, 9 February 2016

Developers Best Practices Tutorial

This small tutorial is based on my past 16+ years of experience in software development industry. I have gone through different stages in my career starting from trainee software developer till senior management.

I do not want to keep my learnings to myself, so I had written a small tutorial few years ago, and after getting lot of motivation from my dear readers, I thought of revising it and adding few more learnings which may benefit many other software engineers and developers working in this lovely industry.

I'm not going to dictate any of the points, but all the practices listed here contributed a lot in my software development career, so if you think they make some sense for you then try to adopt few. If you have any +/- comments, kindly feel free to write me

Audience

If you are working for software industry as a software engineer or a software developer, then I'm sure you are going to enjoy this tutorial. Try to relate the facts mentioned in the tutorial with your day-2-day life and find so many hidden facts, which are very obvious but we never gave our serious attention to them.

Prerequisites

Before writing all the practices mentioned in this small tutorial, I have made an assumption that you are working as a software professional and you understand basic software terminologies and atmosphere around a software professional.

AJAX - Browser Support

All the available browsers cannot support AJAX. Here is a list of major browsers, that support AJAX.

Mozilla Firefox 1.0 and above.
Netscape version 7.1 and above.
Apple Safari 1.2 and above.
Microsoft Internet Explorer 5 and above.
Konqueror.
Opera 7.6 and above.

When you write your next application, do consider the browsers that do not support AJAX.

NOTE: When we say that a browser does not support AJAX, it simply means that the browser does not support creation of Javascript object XMLHttpRequest object.

Writing Browser Specific Code

The Simplest way to make your source code compatible with a browser is to use try...catch blocks in your JavaScript.

<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 JavaScript code, we try three times to make our XMLHttpRequest object. Our first attempt:

ajaxRequest = new XMLHttpRequest();


It is for Opera 8.0+, Firefox, and Safari browsers. If it fails, we try two more times to make the correct object for an Internet Explorer browser with:


ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");


ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");



If it doesn't work, then we can use a very outdated browser that doesn't support XMLHttpRequest, which also means it doesn't support Ajax.

Most likely though, our variable ajaxRequest will now be set to whatever XMLHttpRequest standard the browser uses and we can start sending data to the server. The step-wise AJAX workflow is explained in the next chapter.

Thursday, 4 February 2016

AJAX - Browser Support

All the available browsers cannot support AJAX. Here is a list of major browsers, that support AJAX.

Mozilla Firefox 1.0 and above.
Netscape version 7.1 and above.
Apple Safari 1.2 and above.
Microsoft Internet Explorer 5 and above.
Konqueror.
Opera 7.6 and above.

When you write your next application, do consider the browsers that do not support AJAX.
NOTE: When we say that a browser does not support AJAX, it simply means that the browser does not support creation of Javascript object XMLHttpRequest object.

Writing Browser Specific Code

The Simplest way to make your source code compatible with a browser is to use try...catch blocks in your JavaScript.

<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 JavaScript code, we try three times to make our XMLHttpRequest object. Our first attempt:

ajaxRequest = new XMLHttpRequest();

It is for Opera 8.0+, Firefox, and Safari browsers. If it fails, we try two more times to make the correct object for an Internet Explorer browser with:

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

If it doesn't work, then we can use a very outdated browser that doesn't support XMLHttpRequest, which also means it doesn't support Ajax.
Most likely though, our variable ajaxRequest will now be set to whatever XMLHttpRequest standard the browser uses and we can start sending data to the server. The step-wise AJAX workflow is explained in the next chapter