We are going to cover key techniques in
producing a rich web application to enhance the user experience with Ajax and
jQuery. Ajax stands for Asynchronous
JavaScript and XML.
This is a model which allows us to make requests to server in background from
client side code (JavaScript). It enables us to update the page without reload
the page completely which greatly improve performance of our web site and user
experience. In addition to the controllers, there is a new technology called
WebAPI which is designed to ease transport of
information over HTTP.
The important thing about Ajax that it
is asynchronous. We can make request to the server then process response
whenever it is ready by handling event which is raised when request is
completed.
In early days of the web applications
and JavaScript, it was common to introduce a client side event handlers and
JavaScript code inside the HTML tag. It was a model which allowed developers to
implement the processing logic in browser but the main problem was too messy.
The HTML code some times became unreadable and JavaScript code was hard for
reusing and maintaining.
ASP.NET MVC implement the concept of unobtrusive JavaScript which means that by following principle
of separation of concerns, this will keep JavaScript code separate from HTML
code. The implementation of event handler and other functionality written in
separate file which is referenced in the page.
Unobtrusive JavaScript is based on
jQuery JavaScript library. It is free and open source. jQuery provides a simple
method to find HTML elements such as <div>, <button> and form
fields. Additionally, the jQuery includes a fluent API to manipulate and animate
the elements and also implements wrapper to simplify the Ajax calls.
Jquery functionality is implemented by
a layer which abstracts how browser works with the Document Object Model (DOM).
It allows developers to have unified model of work whicheliminates cross
browser differences. Developers need to know only one way to work with
JavaScript and HTML elements and jQuery will do mapping to each browser
implementation.
jQuery is the most popular
JavaScript library available and is included in Visual Studio project templates
for web applications. The ASP.NET MVC uses jQuery for implementation of its
unobtrusive JavaScript features.
We can find jQuery library
files in the Scripts directory of web application template as shown in Figure 1.
The library is located in jquery-[version].js file. Other three files
mentioned in the box in Figure 1 are as follows:
• jquery-[version].intellisense.js: It helps Visual Studio to
display IntelliSense information.
• jquery-[version].min.js: It is a minified version
of JQuery that does not include comment or whitespace character and adds some
other optimizations that reduce size of the file, so that this is transmitted
to the browser fast.
• jquery-[version].min.map: The source map file which
is used to translate minified version of the library to nonminified version so
that we can debug jQuery code from browser. (At the time of writing only Google
Chrome was supporting source maps.)
Figure 1. jQuery is included in the Scripts
directory of the web application
No comments:
Post a Comment