hello google cdn

by Neon Quach 19. October 2010 18:12

Trong bài blog này mình sẽ hướng dẫn các bạn cách dùng Google CDN cho Jquery.

Google CDN là gì?
Là từ viết tắt của Google Content Distribution Network, nó cung cấp 1 cơ cấu tải (loading architecture) cho hầu hết các thư viện javascrip mã nguồn mở

Lợi ích của việc sử dụng Google CDN?

Google CDN phân phối các libraries ở khắp nơi trên servers của google, nếu chúng ta include Google CDN thì khi đó các libray mà chúng ta yêu cầu sẽ được load ngay server gần nhất, chính vì thế thời gian load sẽ nhanh hơn thay vì fit cứng link trỏ tới libray trên host của chúng ta.

Tiếc kiệm bandwidth cho website của chúng ta.
Libray sẽ được cache nếu như nó đã tồn tại (đã được request).
Version luôn là mới nhất và stable.


Làm thế nào để sử dụng Google CDN?

Đầu tiên include: <script type="text/javascript" src="http://www.google.com/jsapi">

Chú ý: Chúng ta cũng cần phần add API key theo sau jsapi?key=INSERT-YOUR-KEY" khi upload code lên host, chúng ta có thể request key API tại đây

Sau đó google.load("jquery", "1.4.3"); để load thư viện mà mình muốn include
Các thư viện bao gồm:

jQuery

name: jquery
versions: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2
load request: google.load("jquery", "1.3.2");
extras: uncompressed:true, e.g., google.load("jquery", "1.3.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

jQuery UI

name: jqueryui
versions: 1.5.2, 1.5.3, 1.6, 1.7.0, 1.7.1
load request: google.load("jqueryui", "1.7.1");
extras: uncompressed:true, e.g., google.load("jqueryui", "1.7.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js
note: This library depends on jquery. Before loading this module, you must load jquery. e.g.:
        google.load("jquery", "1.3.2");
        google.load("jqueryui", "1.7.1");

Prototype

name: prototype
versions: 1.6.0.2, 1.6.0.3
load request: google.load("prototype", "1.6.0.3");
path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js

script.aculo.us

name: scriptaculous
versions: 1.8.1, 1.8.2
load request: google.load("scriptaculous", "1.8.2");
path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js
note: This library depends on Prototype. Before loading this module, you must load Prototype. e.g.:
        google.load("prototype", "1.6");
        google.load("scriptaculous", "1.8.2");

MooTools

name: mootools
versions: 1.11, 1.2.1, 1.2.2
load request: google.load("mootools", "1.2.2");
extras: uncompressed:true, e.g., google.load("mootools", "1.2.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js
path(u): http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js

Dojo

name: dojo
versions: 1.1.1, 1.2.0, 1.2.3, 1.3.0, 1.3.1
load request: google.load("dojo", "1.3.1");
extras: uncompressed:true, e.g., google.load("dojo", "1.3.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js
path(u): http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js.uncompressed.js

SWFObject

name: swfobject
versions: 2.1
load request: google.load("swfobject", "2.1");
extras: uncompressed:true, e.g., google.load("swfobject", "2.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js
path(u): http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js

Yahoo! User Interface Library (YUI)

name: yui
versions: 2.6.0, 2.7.0
load request: load request: google.load("yui", "2.7.0");
extras: uncompressed:true, e.g., google.load("yui", "2.7.0", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js
path(u): http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader.js


Tất các code sẽ được viết bên trong google.setOnLoadCallback(function () {});

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleCDN.aspx.cs" Inherits="GoogleCDN" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello Google CDN</title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">
        google.load("jquery", "1.4.3");
        google.setOnLoadCallback(function () {
            $('#btnHello').click(function () {
                alert('hello Google CDN');
            });
        });
    </script>
    <div>
        <input id="btnHello" type="button" value="hello" />
    </div>
    </form>
</body>
</html>

Happy programming!