0

I am new to JQuery. I am trying to create a simple form with validations in it. I came across this excellent site which has lots of examples : http://jqueryvalidation.org/email-method

I had learnt from the jquery tutorials that the <script src> is pointed to a copy of jquery.js locally. But in all the examples in the link given above, various sources are mentioned pointing to different URLs.

For example: 

src="http://code.jquery.com/jquery-1.9.1.min.js"
src="http://jquery.bassistance.de/validate/jquery.validate.js"
src="http://jquery.bassistance.de/validate/additional-methods.js"

What is the difference between storing locally and pointing to a web source? What if I incorporate these URLs in my application? Would that mean my code would be conditional to working of which ever servers they are stored in? If so, isn't that a risk? What if their server goes down?

Sorry, I just really want to know the difference.

CleanSock
  • 363
  • 2
  • 4
  • 15
  • Yes, you are right.. if you use the links from other sites, if their servers go down the code will not work. But if you have it locally stored, it will work, unless your server goes down. – rjg132234 Jun 07 '13 at 20:12
  • 1) Some common libraries (jquery & jquery UI for example) are hosted by Google, so you should not worry about those being available 2) Using common location of those libs will allow users to use cached version (which they already might have from others sites using common hosting) rather than loading it from your side. – mishik Jun 07 '13 at 20:14
  • So when I tried visiting one of the URLs, it prompted me to save or open the .js file. Does that mean that I can save it and use it's functionality? – CleanSock Jun 07 '13 at 20:14
  • possible duplicate of [Why should I use Google's CDN for jQuery?](http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery) – sachleen Jun 07 '13 at 20:14

6 Answers6

3

It saves you from having to save them locally. It can also increase performance if you're linking from a CDN that a fair amount of people use, such as Google, as the people visiting your website will have them cached already. Here's a link to the Google CDN bit for jQuery: https://developers.google.com/speed/libraries/devguide#jquery

ayyp
  • 6,590
  • 4
  • 33
  • 47
  • Thanks! That made it clear. These sources that I mentioned in the question look reputable as they were pointed from jquery.com itself. – CleanSock Jun 07 '13 at 20:18
1

Depending on the host, there would potentially be better caching. Also less latency for the requests in itself. It's essentially a CDN to optimize serving up source from redundant nodes rather than your single node which could cause a bottleneck.

Gabe
  • 49,577
  • 28
  • 142
  • 181
1

You are correct that if you use those URLs then you are relying on the server it's hosted on being able to deliver it reliably (and also not to maliciously change the script).

That said, these references are used by thousands of websites

http://code.jquery.com/jquery-1.9.1.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

and are hosted by servers that are probably much faster and more reliable than whatever server you will use. Using them also has the advantage of not having to host the script yourself, and it also means clients don't have to download yet another copy of jQuery when they visit your site since it probably will be cached already.

In short: using an externally hosted script is beneficial for you and and faster for your clients, but you need to make sure that you trust the host.

As others have mentioned, you can include a fail-safe script in case the external sever goes down:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>if(!window.jQuery) document.write('<script src="localScripts/jquery.min.js"></script>');</script>
Peter Olson
  • 139,199
  • 49
  • 202
  • 242
1

These are the web hosted urls that are fairly standard. Using them is good practice. It does make you dependent on the server, but the servers that host these files are more reliable than a your standard shared hosting server that most sites are run from and so is actually an improvement.

there is a method fo rloading it from the standard CDN loaction and then if that fails to load it from your local copy, here's an example:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="/scripts/jquery-ui-1.8.14.min.js"%3E%3C/script%3E'))</script>
DrCord
  • 3,917
  • 3
  • 34
  • 47
1

It is called CDN, basically it is sometimes faster on your client machines as the CDN hosts are available across multiple regions also the chances of jQuery library already being cached are high as many sites started using CDN.

As you mentioned, there is a possibility of CDN going down. I came across this script in H5BP which actually has a fail safe approach in including your script atleast for jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<your server>/jquery-1.10.1.min.js"><\/script>')</script>

https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L27-L28

Read here is the List of advantages in using CDN.

Community
  • 1
  • 1
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
0

When you're working with the library JQuery is understood that this application will have internet available because of this many programmers choose to target the url's from google of the library JQuery but if you're developing multimedia applications need to load this library locally, the next source is to detect when you have internet access and decide whether to point to a URL or local file

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Comprobar carga desede google
        if (window.google && window.google.load) {
          google.load("jquery", "1.3.2");
          window.defaultStatus='ONLINE-MODE';
        } else {
          document.write('<script type="text/javascript" src="local-jquery/jquery.min.js">     <\/script>');

          window.defaultStatus='LOCAL-MODE';
        }

        window.onload = function() {
          $('#test').css({'border':'2px solid #f00'});
          $('#test').append("<b> "+window.defaultStatus+"</b>");
        };
    </script>
  </head>
  <body>
    <p id="test">jQuery</p>
  </body>
</html>

I hope you have been able to help

Jose Alfonso
  • 33
  • 4