Sunday, April 2, 2017

Evolution of AJAX World


If you have started you carrier around 7-10 years back as web developer then probably you have experienced the evaluation practically.

Because of huge advantage of AJAX, more or less 70-80 % of modern web application has adapted this technology. The new style of AJAX implementation came in market so quickly that it’s sometime hard to remember what things were before that?

Anyway, Long ago, Netscape added a feature in browser called live script which was capable to give flavor of offline processing like form validation in client side and bit more. Slowly Live script became JavaScript with more functionality and flexibility.

The inception of DynamicHTML has started in development world, slowly XML gain its popularity in AJAX world when Microsoft added a small function in IE5 to perform XMLHttpRequest call to server.

The classic AJAX using XMLHttpRequest

This is classic style to make AJAX call using vanilla JavaScript. If you worked in very old ASP, JSP or PHP application, probably you are familiar with this style of AJAX call.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "yourfilename.extension", true);
xhttp.send();

Oh, did I miss something? Yes, we need to detect browser prior to AJAX call, Just to make sure we are using proper XMLHttpRequest object. Yes, XMLHttpRequest object is browser specific.

JQuery changed the whole game

Then JQuery came in market, it played major role to change face of client side app development.  It combine and packed the above code into few lines and introduce the concept of Callback.

$.ajax({url: "yoururl.com", success: function(result){
        //enjoy with result variable
    }});

And that’s all, simple, compact, no code smell and maintainable. Now, in mean time other library too started wrapping classic XMLHttpRequest request using very similar syntax.

So, as a result the concept of callback has introduced in development world. The moto of callback is, call me once you have prepared the result, or call error in mess!.

Let’s return promise rather than actual result

People started to realize that, as it is asynchronous call, it should return something by which we can take decision. Let’s give some example. The below code is based on promise and then callback function.

requestSomeData("http://example.com ") // returns a promise for the response

    .then(function(response){ // ‘then’ is used to provide a promise handler
    
    return JSON.parse(response.body); // parse the body
    
   }) // returns a promise for the parsed body

    .then(function(data){
   
    return data.something; // get the price

   }) // returns a promise for the price

    .then(function(price){ // print out the price when it is fulfilled

        //do something with the data

  });

We can consider this as fully asynchronous execution plan, even if my JSON.parse() take huge time, the execution flow will not hang the thread because I have attached then callback to ensure that someone will take care once parse completed.

Angular and Other library utilize it best

Angular 1.X introduced a way to sync all asyn call using “$q” service. This is huge power to developer to process more than one asynchronous call and print consolidated result.

Want to have more control on AJAX call? Use Observable.

RxJs introduced the concept called Observable to have more grip on AJAX call. Let’s think that we need to cancel an AJAX call in middle. Assume, the situation where need to handle multiple AJAX call. Observable is preferred than promise here.

So, an observable is like a stream and allow to pass zero or more events where the callback is called for each event. The Observable covers more including promise.
For more info, please check Observable in Angular2

    









11 comments:

  1. Hello @Anonymous, that's actually very good choice, you can keep same codebase for both Android and iOS.Are you interested in App Development With Angular then you must be looking for effective development team then you are at the right place for more details on it please go through the website.visit:

    ReplyDelete
  2. Hello @Anonymous, that's actually very good choiceAs Machine Learning & Artificial Intelligence Experts, we can help you inImplementing complex and highly beneficial algorithms that suits your business model. Our data scientists and AI developers will strategically formulate the algorithms depending on your dataset to overcome your core challenges and forthcoming opportunities.For more info on machine learning development servicesvisit:

    ReplyDelete
  3. We are an Android Application Development Company in the USA, providing android application development services for android devices with experienced android app developers.

    ReplyDelete
  4. Very beautifully explained nice blog buddy .Are you among one of those who are looking for Hire Android App Developers then you are at right place we have dedicated development team who are expert in this so what are you waiting for just visit the official website or contact Us.

    ReplyDelete
  5. Nice information you have shared in blog I am also below sharing few thought on app development please have a look If You are among one of those who are looking for mobile app development company in usa
    then you are at right place we have the robust development team they will develop the app according to your requirements. For more details please visit our website.

    ReplyDelete