RICH WEB BASED APPLICATIONS

Term “Rich Internet Applications” (RIAs) from “Rich Web-based Applications” (RiWAs).

A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications.

Rich Web-based Applications: An Umbrella Term with a Definition and Taxonomies for Development Techniques and Technologies.

Key features of RiWAs, which make them more advanced than the standard webbased applications

•Rich GUIs in RiWAs use Delta-Communication to communicate with the server components

         •DC happens behind the GUI 

                  •Eliminates page refreshes 

         •DC can process asynchronously 

                  •Eliminates page freezing 

         •DC works faster 

                  •Eliminates the work-wait pattern

Different technologies and techniques used to develop the client-side components of the RiWAs

Simple-Pull-Delta-Communication (SPDC) can be seen as the simplest form of DC 

           •Used in AJAX 

           •Single XHR request to the server 

           •Client-side: Native JS support 

           •Server-side: special technology is not need.

•Pollingis used to simulate data-push 

•Send XHR requests periodically to the server 

•Client-side: Native JS support 

•Server-side: special technology is not needed 

•Can increase network traffic (less scalable) 

•Blank responses can waste resources

•Cometis used to simulate data-push 

•Long-lived XHR requests 

•Client-side: Native JS support 

•Server-side: Need a streaming server. Special technology is not needed, can be implemented with standard web technologies 

•Reduce network traffic than polling (more scalable) 

•Blank responses are eliminated

•Server-Sent-Events (SSE)is used (only) for true data-push 

•Similar to Comet, but no client requests 

•Client-side: HTML5 provides native JS support 

•Server-side: Need a streaming server. Special technology is not needed, can be implemented with standard web technologies 

•Reduce network traffic than polling/Comet (more scalable) 

•Blank responses and requests are totally eliminated

•WebSocket(WS)is bi-directional 

•Supports both data-pull and true data-push 

•Client-side: HTML5 provides native JS support Server-side: Need a WS server. Complex. 

•Reduce network traffic than polling/Comet/SSE (highly scalable, 10CK is addressed

what Delta-Communication is, discussing the advantages of using it.

Provide local, long distance, data, and Internet telecommunications services to residences and businesses in Southern Illinois. It offers service plans, which include mobile, dial up and high speed Internet, and telephone systems.

The major advantages are:-Delta modulation provides the benefit of lower bandwidth consumption because data transmitted as only one bit per sample.Lower bandwidth makes the process of data communication more cost effective.

Compare and contrast synchronous and asynchronous communication in the context of DC

TRANSMISSION: Whereas Asynchronous Transmission does not require a clock but it adds a parity bit to the data before transmission. In Synchronous data transfer, data is transmitted in the form of blocks or frames whereas in asynchronous data transfer, transmission is done in 1 byte or character at a time.

History and the evolution of the XHR and AJAX.

XHR

Take an application like Instagram or Pinterest for example.How is it that I can continue scrolling forever and ever, without a page reload, and content continues to show up? What’s happening behind the scenes is this asynchronous request to a server that does not end up disturbing the user? Around 2005 (when the term AJAX was coined), this was pretty revolutionary. Since then, new technologies have been built on top of older ones to create a more useful, faster web.

AJAX

In some ways it has. During the first big stretch of browser innovation, Netscape added a feature known as LiveScript, which allowed people to put small scripts in web pages so that they could continue to do things after you’d downloaded them. One early example was the Netscape form system, which would tell you if you’d entered an invalid value for a field as soon as you entered it, instead of after you tried to submit the form to the server.

LiveScript became JavaScript and grew more powerful, leading to a technique known as Dynamic HTML, which was typically used to make things fly around the screen and change around in response to user input. Doing anything serious with Dynamic HTML was painful, however, because all the major browsers implemented its pieces slightly differently

Role of the DC-engine in RiWAs.

Variation of the jQuery ajax() function.

While jQuery does offer many Ajax-related convenience methods, the core $.ajax method is at the heart of all of them, and understanding it is imperative. We'll review it first, and then touch briefly on the convenience methods.

The $.ajax method offers features that the convenience methods do not. Once you have gained some experience with Ajax in jQuery, it is easiest to just use this one method.

$.ajax

jQuery's core $.ajax method is a powerful and straightforward way of creating Ajax requests. It takes a configuration object that contains all the instructions jQuery requires to complete the request. The $.ajax method is particularly valuable because it offers the ability to specify both success and failure callbacks. Also, its ability to take a configuration object that can be defined separately makes it easier to write reusable code.

$.ajax(options)
$.ajax(url, options)

Options for $.ajax

There are many, many options for the $.ajax method, which is part of its power. For a complete list of options, visit http://api.jquery.com/jQuery.ajax/.

Note that the url can either be provided as a separate parameter or as part of the options object.

Here are some of the more commonly used options:

• url - The URL for the request. Required either as an option or as a separate parameter.
• type - The type of the request, "POST" or "GET". Defaults to "GET". Other request types, such as "PUT" and "DELETE" can be used, but they may not be supported by all browsers.
• async - Set to false if the request should be sent synchronously. Defaults to true. Note that if you set this option to false, your request will block execution of other code until the response is received.
• cache - Whether to use a cached response if available. Defaults to true for all data types except script and jsonp. When set to false, the URL will simply have a cachebusting parameter appended to it.
• success - A callback function to run if the request succeeds. The function receives the response data (converted to a JavaScript object if the data type was JSON), as well as the text status of the request and the raw request object.
• error - A callback function to run if the request results in an error. The function receives the raw request object and the text status of the request.
• complete - A callback function to run when the request is complete, regardless of success or failure. The function receives the raw request object and the text status of the request. This function will run after any error or success function, if those are also specified.
• context - The scope in which the callback function(s) should run (i.e. what this will mean inside the callback function(s)). By default, this inside the callback function(s) refers to the object originally passed to $.ajax.
• data - The data to be sent to the server. This can either be an object, like { foo:'bar',baz:'bim' } , or a query string, such as foo=bar&baz=bim.
• dataType - The type of data you expect back from the server. By default, jQuery will look at the MIME-type (from the Content-Type header) of the response if no data type is specified.
• jsonp - The callback parameter name to send in a query string when making a JSONP request. Defaults to callback. (jQuery will add a parameter callback=XXXXXX to the query string; this option sets the parameter name, and the following option sets the parameter value).
• jsonpCallback - The value of the callback parameter to send in a query string when making a JSONP request. Defaults to an auto-generated random value.
• timeout - The time in milliseconds to wait before considering the request a failure.

The url option is the only required property of the $.ajax configuration object; all other properties are optional.

Using the Core $.ajax Method

$.ajax({
 // the URL for the request
 url : 'post.php',

 // the data to send
 // (will be converted to a query string)
 data : { id : 123 },

 // whether this is a POST or GET request
 type : 'GET',

 // the type of data we expect back
 dataType : 'json',

 // code to run if the request succeeds;
 // the response is passed to the function
 success : function(json) {
  $('<h1/>').text(json.title).appendTo('body');
  $('<div class="content"/>')
   .html(json.html).appendTo('body');
 },

 // code to run if the request fails;
 // the raw request and status codes are
 // passed to the function
 error : function(xhr, status) {
  alert('Sorry, there was a problem!');
 },

 // code to run regardless of success or failure
 complete : function(xhr, status) {
  alert('The request is complete!');
 }
});

Note: A note about the dataType setting: if the server sends back data that is in a different format than you specify, your code may fail, and the reason will not always be clear, because the HTTP response code will not show an error. When working with Ajax requests, make sure your server is sending back the data type you're asking for, and verify that the Content-Type header is accurate for the data type. For example, for JSON data, the content type should be application/json.

Convenience Methods

If you don't need the extensive configurability of $.ajax, and you don't care about handling errors, the Ajax convenience functions provided by jQuery can be useful, terse ways to accomplish Ajax requests. These methods are just "wrappers" around the core $.ajax method, and simply pre-set some of the options on the $.ajax method.

The convenience methods provided by jQuery are:

• $.get - Perform a GET request to the provided URL.
• $.post - Perform a POST request to the provided URL.
• $.getScript - Add a script to the page.
• $.getJSON - Perform a GET request, and expect JSON to be returned.

In each case, the methods take the following arguments, in order:

• url - The URL for the request. Required.
• data - The data to be sent to the server. Optional. This can either be an object or a query string, such as foo=bar&baz=bim.
  • Note: This option is not valid for $.getScript.
  • Also, this parameter is truly optional - if you do not want to supply it, you don't have to supply a placeholder value (jQuery looks at the type of the second parameter to determine if it is your parameters; if the second parameter is a function, it uses it as the success callback described below)
• success - A callback function to run if the request succeeds. Optional. The function receives the response data (converted to a JavaScript object if the data type was JSON), as well as the text status of the request and the raw request object.
• dataType - The type of data you expect back from the server. Optional. (Note: This option is only applicable for methods that don't already specify the data type in their name.)

Using jQuery's Ajax Convenience Methods

// get plain text or html
$.get('/users.php', { userId : 1234 }, function(resp) {
 console.log(resp);
});

// add a script to the page, then run a function defined in it
$.getScript('/js/myScript.js', function() {
 functionFromMyScript();
});

// get JSON-formatted data from the server
// resp will be a single object parsed from the incoming JSON
$.getJSON('/details.php', function(resp) {
 $.each(resp, function(k, v) {
  console.log(k + ' : ' + v);
 });
});

$.fn.load

The $.fn.load method is unique among jQuery's Ajax methods in that it is called on a selection. The $.fn.load method fetches HTML from a URL, and uses the returned HTML to populate the selected element(s). In addition to providing a URL to the method, you can optionally provide a selector as part of the URL parameter; jQuery will fetch only the matching content from the returned HTML.

Using $.fn.load to Populate an Element

$('#newContent').load('/foo.html');

Using $.fn.load to Populate an Element Based on a Selector

$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
 alert('Content updated!');
});

Ajax Examples

Code Sample:

jqy-ajax/Demos/ajax-text.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Testing Ajax with HTML</title>
<script src="../../jqy-libs/jquery.js"></script> 
<script>
$(document).ready(function() {
 $.ajax("data/blurb.html", {
   type: "get",
   dataType: "html",
   success: function(data) {
    $('#results1').html(data);
   },
   error: function(xhr, status, err) {
    $('#results1').html("Error " + status + ", " + err);
   }
  } );
 $('#results2').load("data/blurb.html");
});
</script>
</head>
<body>
<h1>Here is the Ajax we received via $.ajax:</h1>
<div id="results1"></div>
<h1>Here is the Ajax we received via $.load:</h1>
<div id="results2"></div>
</body>
</html>

We load the HTML text two ways, using $.ajax and $.fn.load.

Using $.ajax, we supply an options object specifying the GET method, HTML data, and both success and error functions. You can test the error capability by changing the URL to a non-existent file name.

The $.fn.load approach is simpler -- we identify the receiving element, and simply load the file.

Code Sample:

jqy-ajax/Demos/ajax-json.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Testing Ajax with JSON</title>
<script src="../../jqy-libs/jquery.js"></script> 
<script>
$(document).ready(function() {
 $.ajax("data/people.json", {
  type: "get",
  dataType: "json",
  success: function(data) {
   var $list = $('<ol/>').appendTo('#results');
   $.each(data, function() {
    $list.append(
      '<li>' + this.firstName + ' ' + this.lastName + '</li>');
   });
  },
  error: function(xhr, status, err) {
   $('#results').html("Error " + status + ", " + err);
  }
 } );
});
</script>
</head>
<body>
<h1>Here are the contents of our JSON data:</h1>
<div id="results"></div>
</body>
</html>

This example is similar to the previous one, but we can't use $.fn.load for JSON data.

This time we supply an options object specifying the GET method, JSON data, and again both success and error functions.

We based our treatment of the JSON data upon our knowledge that it is an array of objects, each with two fields: firstName and lastName.

You can test the JSON-related aspects of the error capability by munging the data file.

Ajax and Forms

jQuery's Ajax capabilities can be especially useful when dealing with forms. The jQuery Form Plugin is a well-tested tool for adding Ajax capabilities to forms, and you should generally use it for handling forms with Ajax rather than trying to roll your own solution for anything remotely complex. That said, there are two jQuery methods you should know that relate to form processing in jQuery: $.fn.serialize and $.fn.serializeArray.

Turning Form Data into a Query String

$('#myForm').serialize();

Creating an Array of Objects Containing Form Data

$('#myForm').serializeArray();

// creates a structure like this:
[
 { name : 'field1', value : 123 },
 { name : 'field2', value : 'hello world' }
]

Rich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and Technologies Rich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and Technologies Rich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and Technologies

Rich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and TechnologiesRich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and TechnologiesRich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and Technologies

Rich Web-based Applications: An Umbrella Term with a

Definition and Taxonomies for Development Techniques

and Technologies

CLIENT-SIDE DEVELOPMENT 1 JQUERY

Is jQuery a framework or a library?

Framework and libarry are not necessarily mutually exclusive terms. Framework is typically a libarry or a collection of libraries.

Strictly speaking, jQuery is a library, but, to an extent, it does meet the definition of a software framework. Although many would argue that jQuery doesn't meet the definition of a software framework strictly enough, the fact is that no other JavaScript framework fully meets the definition of a framework either.

One of the defining characteristics of a software framework is that its code is protected from modifications. In JavaScript, this clearly isn't the case. Any libraries or frameworks that can be called into your client-side code are modifiable, although it would be against best practices to alter them. Therefore, if it is permissible to call Bootstrap or AngularJS a framework, there is no reason why jQuery cannot be called a framework either. 

Perhaps the best explanation of why jQuery is more of a framework than a library is the fact that as a developer, you can chose not to use any of its framework-like functionalities. You can, for example, mix a simple jQuery statement with a standard JavaScript statement on the same line. AngularJS and Bootstrap typically don't allow you to do this. Therefore, the accurate answer whether jQuery is a framework or not is "it depends whether you chose to use it as a framework or not".

Features provided by jQuery

CSS3 Selectors

When working with CSS code, selectors are patterns that can be called upon to style a particular page element.

The CSS3 selector is a new specification that will be used heavily in the future. A majority of sites are already making use of them.

You might be interested to know that one benefit of working with jQuery, is that you can also use CSS3 selectors in your production code. This just means increased support for you and more ways to create page elements and modern designs.

Helpful Utility Functions Galore

At its core, jQuery is meant to make a developer’s life easier by combining and simplifying critical syntax you would need to write out in JavaScript. It does this through an assortment of helpful utility functions that you can call upon during development.

The jQuery User Interface

Because of the power behind jQuery, it’s been used to make some pretty impressive widgets, effects, and user interface modules. These elements were useful enough that the official jQuery team decided to bundle them up and include them in the core jQuery library.

They decided early on to keep the jQuery library focused on basic use, so instead of adding the elements to the core package they created a separate one called jQuery User Interface.

The jQuery UI library includes elements like sliders, dialog boxes, date pickers, nav menu items, and accordions, all of which can be customized and themed.

jQuery Plugins

One of the added benefits of jQuery is that the team behind it has kept the core package tight and focused, remaining devoid of non-essential features. However, because of this they’ve also made sure that it’s extensible. It comes with a framework for extending the library, allowing for the use of something called plugins.

Once you create a plugin in jQuery it can be used across multiple projects. In addition, plugins can be shared with the community similar to WordPress plugins. This, in turn, means that when you start working with jQuery you have access to hundreds – if not thousands – of previously developed plugins to use on your projects. This significantly cuts down development time.

The way jQuery is structured, a lot of common functions and practices have been boiled down into a plugin. This is definitely an intended feature, not a flaw. It primarily helps you keep your syntax and final code bloat to a minimum.

Why? Because plugins can be used on a page-by-page basis instead of across an entire project. This cuts down on unnecessary bandwidth, resulting in increased loading times. It also eliminates some of the bugs or issues you might see across platforms. Finally, it’s just easier to work with and that’s that.

Advantages and disadvantages of using jQuery 

The advantages of jQuery

The main advantage of jQuery is that it is much easier than its competitors. You can add plugins easily, translating this into a substantial saving of time and effort. In fact, one of the main reasons why Resig and his team created jQuery was to buy time (in the web development world, time matters a lot).

The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. The jQuery community is active and extremely hardworking.

Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.

• jQuery is flexible and fast for web development
• It comes with an MIT license and is Open Source
• It has an excellent support community
• It has Plugins
• Bugs are resolved quickly
• Excellent integration with AJAX

The disadvantages of jQuery

One of the main disadvantages of jQuery is the large number of published versions in the short time. It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google (attractive, but can bring incompatibility problems with the code).

In addition to the problem of the versions, other disadvantages that we can mention:

• jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS
• If jQuery is improperly implemented as a Framework, the development environment can get out of control.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

---

The element Selector

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

Example

When a user clicks on a button, all <p> elements will be hidden:

Example

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Try it Yourself »

---

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

Example

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

Try it Yourself »

The .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

$(".test")

Example

When a user clicks on a button, the elements with class="test" will be hidden:

Example

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

Try it Yourself »

---

More Examples of jQuery Selectors

Syntax	Description	Example
$("*")	Selects all elements	Try it
$(this)	Selects the current HTML element	Try it
$("p.intro")	Selects all <p> elements with class="intro"	Try it
$("p:first")	Selects the first <p> element	Try it
$("ul li:first")	Selects the first <li> element of the first <ul>	Try it
$("ul li:first-child")	Selects the first <li> element of every <ul>	Try it
$("[href]")	Selects all elements with an href attribute	Try it
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"	Try it
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all <button> elements and <input> elements of type="button"	Try it
$("tr:even")	Selects all even <tr> elements	Try it
$("tr:odd")	Selects all odd <tr> elements	Try it

Importance of DOM

Web browsers[edit]

To render a document such as a HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with the topmost node named as "Document object". When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.^[8]

JavaScript[edit]

When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages:^[9]

• JavaScript can add, change, and remove all of the HTML elements and attributes in the page.
• JavaScript can change all of the CSS styles in the page.
• JavaScript can react to all the existing events in the page.
• JavaScript can create new events within the page.

Benefits of using jQuery event handling 

If you have done any programming in JavaScript, you’ll know that working with events is fairly straightforward. Then you test your latest creation in a different browser and find that something got broken! This is a major source of frustration and jQuery aims to simplify and help us with this process.

By combining the ability to use selectors and filters to easily capture elements on the page with the event handling features of jQuery, we are given a powerful combination. Just one mouse click can be made to trigger a series of commands like adding a class, starting an animation, changing the text on the page, or sending data to a server. Often times we’ll see the blur event used to check that form fields have been properly filled before submission.

Working with events in jQuery:

• Gives web developers a way to work with events that is much more simplified than working directly on the DOM.
• Makes different browser implementations of events a non issue via Abstraction.
• Provides web developers a nice time saving technique of binding and unbinding event handlers to one or many elements by using selectors and filters all at once.

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Advanced features provided by jQuery

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

Tip: In addition, jQuery has plugins for almost any task out there.