AJAX in MVC using jQuery and JSON Object

Hey Guys,

In my previous post I have expalined about the difference between Webforms and MVC. In this post I am gonna help you on how to implement AJAX in MVC using jQuery.

Before starting with AJAX in MVC, lets have quick glance at what Ajax is all about.

What is AJAX? 

• AJAX is an acronym for 'Asynchronous JavaScript and XML'. It is a technique for creating fast and dynamic web pages.
• AJAX allows to update specific parts of web pages asynchronously by exchanging small amounts of data with the server behind the scenes (request from UI get the modified data back from server). It is possible to update parts of a web page, without reloading the whole page.
• Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
• Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

Earlier, XML is used to exchange the data with Server, ie using XMLHttpRequest object. But these days JSON(JavaScript Object Notation) is used to send and receive the data from UI to server. 

What is JSON?

JSON is short for JavaScript Object Notation, It is a lightweight data-interchange format that is easy for humans to read and write, and for machines to parse and generate. JSON is based on the object notation of the JavaScript language. However, it does not require JavaScript to read or write because it is a text format that is language independent. Its more like key-value pair.

 Here is the example for JSON which is equivalent of XML.

jQuery - Write Less Do More

The significance of interactive web design has been more perceptible these days. JavaScript, VB Script, ASP.net and many other scripting languages are used heavily across the Internet to remain sites out of the ordinary. 

JavaScript: 

"JavaScript is an open source scripting language used to improve user interfaces and lively websites". It is tremendously admired and has been used for web development for years. Its popularity can be attributed to speed, simplicity and versatility. 

Compared to other programming and scripting languages, JavaScript is quite easy to learn and implement in new or existing websites.

JavaScript is compatible with other programming languages and can be added in a webpage despite of its file extension (.HTML, PHP, etc.). It can even be placed inside scripts written in other languages such as Perl and PHP. This flexibility is hard to find anywhere else in the web development world.

Though JavaScript is considered comparatively easy, it remains out of reach for developers who rely mostly on HTML and CSS for their web designs. Additionally, there are some cross browser issues with conventional JavaScript that require you to write cross browser compatibility code in addition to the functions your website actually needs.