Jquery or Basic XmlHttpRequest for MVC AJAX

Question

Hi

Getting JSON at client side via AJAX is something i am looking for in my ASP.NET MVC app.

I found Jquery and basic XmlHttpRequest script for the purpose.I know the easiness with dom manipulation is one aspect for Jquery.But concerned with the file size of Jquery.

But still cannot find Why i need to chose and study Jquery over the light weight simple XmlHttpRequest using Javascript.

I want to know which is the best practice i need to follow or is there any thing i am missing other than this.

Thx

Answer 1

I think the issue of payload size of the js lib will be outweighed by its cross-browser support and overall handiness for front end development...

make sure you host the minified version in production.

plus jQuery is a relatively light weight js library, it is a great choice of library to learn.

there are plenty others of course:

I also like YUI and even MooTools

Answer 2

JQuery is so common these days that if you reference it from Google's library, it's highly likely that people already have it in their browser cache and won't need to download it anyway.

The size of the JQuery library minified is only 56k, smaller than many images. If it's also compressed by the webserver, it's much smaller than that.

The clear advantage to using JQuery is that it has already encapsulated all the basic XHR actions that you will need to do, and done so in a cross-browser environment. So instead of writing potentially buggy, homemade ajax code, you can make your Ajax requests in one line of JQuery javascript.

Answer 3

jQuery provides a lot of plumbing that makes your life easier. For example, the XmlHttpRequest objects needs to be instantiated as an ActiveX object for older versions of IE, with jQuery you don't have to worry about it.

There is no "best practice" you should follow, but unless the size is a very critical consideration for your project, I would very strongly urge you to consider an Ajax library. It makes development a lot faster and allows you to be confident that your Ajax will be cross-browser compatible.

Answer 4

jQuery is great at DOM manipulation. In your case, it may be overkill.

If you are concerned with filesize, you may be interested in Mootool's cafeteria style download where you only pick the parts you want and it handles the dependencies. You want the Request section.

Moo tools: http://mootools.net/core

Example: http://davidwalsh.name/basic-ajax-requests-mootools

Answer 5

I would recommend using jQuery for a couple of reasons. The first reason is because it provides a javascript abstraction layer to code to. jQuery supports all major browsers (if not all browsers) so you do not need to worry as much about cross browser compatibility or browser checks.

Secondly - jQuery provides simple binding calls to make your ajax requests ($().load(URL), etc)

Third (which I find most useful) - jQuery (like mootools and prototype) set the header of the ajax request to "X-Requested-With" which allows you to test if a request is an ajax request or not. This allows for easy javascript integration (unobtrusive javascript).

Additionally - once you go jQuery you will never go back.

Answer 6

This issue here is, why reinvent the wheel. As other people have noted, libraries provide a layer of abstraction over things such as browser quirks etc.

It's almost guaranteed that any custom code you write will probably contain bugs. Why bother when you can have the benefit of using code that has the added benefit of being tested and used extensively in the wild.

Let a library do your work, and leave yourself more time for coding the custom business logic of your application.

Answer 7

Hi Deo, Sorry for my english, in my opinion, you have to learn and know Jquery for simple or complex ajax client application or dom manuplation, you can make dom and ajax call easy with jquery.

You already know, you can already make ajax call with pure javascript functions. How to Make AJAX Requests With Raw javascript, this article have two part.

Otherwise, during the ajax request on the page you have to check received data and you should enumerate received data when you have complex data (i mean collection or array data). At this point you will se the Jquery's power, about the handling, manuplating on the received data.

I assure you, when you will working on slightly complex data you will look to some library for easyly make something on your pages. Jquery will give you more than Javascript's XMLHttpRequest.

Last think, you may put your script reference over code.google.com like this

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;
</script>

With this style you use google's bandwith caching ability and your application allways keep up to date.

Write less, do more ...

Answer 8

Okay, I will give you some reasons why JQuery is the WTG (Way To Go) when it comes to Ajax

1. XMLHttpRequest are implemented differently for different browsers and you will have to write your own listening functions.
2. If you make a non-trivial application, the amount of code you write working with JQuery will be much lesser than the code you would write to work with Javascript. This not only cuts down development time but probably will give you faster execution time as well.
3. JQuery makes DOM and CSS manipulation easy. Without you have a nice guy's chance in hell to achieve the same functionality in 3 times as much time.

If you're ready to dispense with JQuery, you might as well reject ASP.Net/PHP and write some CGI gateways for better performance :)