Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX: Native vs jQuery

    Hello everyone. I'm building a web application, and I use a lot of AJAX calls to connect with my Node.js server.

    I've used plenty of jQuery in past, as a designer, but I am really trying as hard as possible to learn as much native JS as possible, from the perspective of a programmer. My qualm is that my application is all native JS so far, except for my AJAX calls, which uses the jQuery method.

    To do this, I had to include the whole jQuery file, which is fine. My question is: should I dump the $.AJAX method for the native XMLHttpRequest? Since I only use jQuery for ajax, is is wasting resources in loading the whole file? Is the native request faster than the jQuery method?

    If I want my project to be as native as possible, is it wrong to use jQuery for AJAX? I'd love to read your thoughts.

    Secondly, the jQuery AJAX method has the ability to set async to false. Is there a similar, synchronous way to run ajax with the native XMLHttpRequest?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    $.AJAX is just calling the native XMLHttpRequest to perform the request and so as you are just using jQuery to do that call, replacing jQuery with just the code to do the call will be much faster loading with a lot less code.

    All of jQuery is written in native JavaScript so anything you can do in jQuery can be done at least as quickly with native JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by felgall View Post
    All of jQuery is written in native JavaScript so anything you can do in jQuery can be done at least as quickly with native JavaScript.
    But jQuery takes care of all cross-browser inconsistencies (and I seem to remember that AJAX was implemented quite differently) so you’ll definitly have to know what you’re doing if you are using native JS.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by Nick Dugger View Post
    If I want my project to be as native as possible, is it wrong to use jQuery for AJAX? I'd love to read your thoughts.
    If you "want [your] project to be as native as possible", it's pretty obvious you shouldn't be using jQuery. If you want to make things easy for yourself, you could create a mini-library of your own that only includes native AJAX code where the only non-native code would be a call to this library using something like XMLHTTPRequest(method, url, async, handler).

    On the other hand, if you need to support IE8 and older, the easiest path is probably jQuery. For IE9 and later, I would code things natively even though you may still have to learn some browser-specific code. IE9 requires use of DOMParser objects to import nodes from foreign XML documents and XDomainRequest objects for cross-domain requests. If you don't need to do either of those things, the code required for IE9 and everyone else is basically the same.

    Quote Originally Posted by Nick Dugger View Post
    Secondly, the jQuery AJAX method has the ability to set async to false. Is there a similar, synchronous way to run ajax with the native XMLHttpRequest?
    The third argument of the open method is the optional async flag which is a Boolean value and probably what you're looking for. See https://dvcs.w3.org/hg/xhr/raw-file/...tprequest-open.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Ajax was implemented differently in IE4 through IE6. There were a few minor issues with IE7 but from IE8 onward the standard call that other browsers use works the same in IE. As the earlier versions of IE are now dead there are no cross browser issues to deal with regarding Ajax calls.

    jQuery 2 is significantly smaller than jQuery 1 because it has dropped support for long dead browsers that did not follow the current standards. The amount of code it uses for cross browser differences is significantly less and while I haven't actually looked at the Ajax portion of the code I would expect it to be using the exact same calls for all browsers.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Arbitrator (03-02-2014)

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by felgall View Post
    Ajax was implemented differently in IE4 through IE6. There were a few minor issues with IE7 but from IE8 onward the standard call that other browsers use works the same in IE. As the earlier versions of IE are now dead there are no cross browser issues to deal with regarding Ajax calls.
    OK, I was under the impression that IE8 and older require use of the ActiveXObject object. Apparently, that isn't the case.

    So I guess I'd change my recommendation to drop jQuery then if the only reason for using it is AJAX. (I'm not that familiar with the capabilities of the library or its modules, but the only thing that I can think of that I might use it for is the animation functionality since animation is complicated.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by Arbitrator View Post
    OK, I was under the impression that IE8 and older require use of the ActiveXObject object. Apparently, that isn't the case.
    do watch out for lack of CORS support in IE7+8 ajax, and lack of file:// support in IE7 ajax...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rnd me View Post
    do watch out for lack of CORS support in IE7+8 ajax, and lack of file:// support in IE7 ajax...
    Those limitations apply if you use jQuery as well as native don't they?

    You can use JSONP (either through JQuery or native JavaScript) to get around the CORS support issue.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Since you do a lot of AJAX calls to the server, you might want to make your pure JS ajax script reusable and configurable like jQuery's ajax. Having an option to specify success, error and complete callbacks and other settings are very useful in making your code easy to write, understand and maintain.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by felgall View Post
    Those limitations apply if you use jQuery as well as native don't they?
    In IE8, jQuery fallsback to the XDomainRequest functionality that is more-or-less CORS-compliant.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •