CHƢƠNG 1: NGÔN NGỮ WEB - thayphet.netthayphet.net/application/upload/products/02Chuong1NgonnguWebJQueryAjax.pdfHƣớng tới các thành phần trong HTML: jQuery cho phép bạn

1

CHƢƠNG 1: NGÔN NGỮ WEB (Chuyên đề 2: JQUERY & AJAX)

© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM

Giảng Viên: ThS. Dƣơng Thành Phết

Email: [email protected]

Website: http://www.thayphet.net

Tel: 0918158670 – 08.3.7900261

Chuyên đề:

CÔNG NGHỆ WEB NÂNG CAO

2


MỤC TIÊU

Kiến thức:

- Trình bày được khái niệm về Jquery, AJax

- Mô tả được quy trình hoạt động của JQuery, AJax

- Liệt kê được các hàm API trong JQuery;

- Trình bày được ưu nhược điểm của AJax

Kỹ năng:

- Download và sử dụng được JQuery

- Ứng dụng được JQuey, AJax trong thiết kế các hiệu ứng

trên trang Web và các kiểm tra trên Form

Thái độ:

-Nhận thức được tầm quan trọng của JQuey, AJax để ứng

dụng phát triển các ứng dụng Web.

3


YÊU CẦU

1. Thời gian:

Số tiết Lý thuyết : 3 tiết

Số tiết Thực hành: 5 tiết

Số tiết tự học: 16 giờ.

2. Điều kiện tiên quyết:

Đã học qua HTML, CSS và Javascript

3. Phần mềm

Macromedia Dreamweaver

Microsoft Visual Studio 2005/2008/2010/2012

Microsoft SQLServer 2005/2008

4


NỘI DUNG

1.1. Jquery

1.1.1. Giới thiệu về Jquery ?

1.1.2. Download và sử dụng Jquey

1.1.3. Jquery hoạt động như thế nào

1.1.4. Một số API trong Jquery

1.2. Ajax - JavaScript và XML không đồng bộ

1.2.1. Giới thiệu về Ajax

1.2.2. Ưu và nhược điểm của Ajax

1.2.3. Các ứng dụng của Ajax

5


TÀI LIỆU DẠY – HỌC

[1] Dương Thành Phết, Bài giảng chuyên đề Công nghệ

Web nâng cao Khoa Công nghệ thông tin, Trường CĐ

CNTT TP.HCM.

[2] Dương Thành Phết, Bài tập thực hành chuyên đề

Công nghệ Web nâng cao Khoa Công nghệ thông tin,

Trường CĐ CNTT TP.HCM.

6


JQUERY

7


1.1. GIỚI THIỆU VỀ JQUERY

jQuery là 1 Javascript Framework, tạo ra các tương

tác trên web một cách nhanh nhất.

jQuery được khởi xướng bởi John Resig (hiện là

trưởng dự án của Mozzila) vào năm 2006.

jQuery có mã nguồn mở và hoàn toàn miễn phí, có một

cộng đồng sử dụng đông, nhiều lập trình tham gia hoàn

thiện, phát triển và viết Plugin.

jQuery luôn là lựa chọn trước tiên trong công việc khi

phát triển các dự án website.

John Resig

jQuery là gì?

8



Tại sao dùng jQuery?

jQuery đơn giản hóa cách viết Javascript và tăng tốc độ

xử lý các sự kiện trên trang web tiết kiệm thời gian và

công sức.

Sử dụng jQuery giúp giải quyết tốt vấn đề xung đột

giữa các trình duyệt web.

Học jQuery rất đơn giản, nếu nắm vững CSS, bạn có

thể tiếp cận và sử dụng jQuery nhanh chóng.

9



Ƣu điểm jQuery?

Hỗ trợ tốt việc xử lý Dom, Ajax…

Tương thích nhiều trình duyệt web phổ biến.

Nhỏ gọn, dễ dùng.

Ít xung khắc với các thư viện Javascript khác.

Plugin phong phú.

10



jQuery có thể làm đƣợc những gì?

Hƣớng tới các thành phần trong HTML: jQuery cho

phép bạn chọn bất cứ thành phần nào của tài liệu một

cách dễ dàng dựa vào jQuery selector

Thay đổi giao diện của một trang web: jQuery giúp

trang web có thể hiển thị tốt trên hầu hết các trình

duyệt.

Thay đổi nội dung của tài liệu: jQuery có thể thêm

hoặc bớt nội dung trên trang, thậm chí cả cấu

trúc HTML.

11



jQuery có thể làm đƣợc những gì? (tt)

Tƣơng tác với ngƣời dùng: jQuery cho nhiều phương

thức để tương tác với người dùng và tối giản các

mã Event trong code HTML.

Tạo hiệu ứng động: jQuery cho phép sử dụng rất

nhiều hiệu ứng động như mờ dần, slideUp, slideDown…

Hỗ trợ Ajax: Là công nghệ ngày càng trở nên phổ biến,

nó giúp người thiết kế web tạo ra những trang web tương

tác cực tốt và nhiều tính năng.

12


1.2. DOWNLOAD VÀ SỬ DỤNG JQUERY

Download jQuery

Truy cập vào http://jquery.com để Download phiên bản

mới nhất. Copy code và lưu lại với file: .js

Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google

Tham khảo: 108 Free CSS Menu Designs {Mega Menu,

Dropdown, Horizontal, Vertical}

http://ginva.com/2011/04/108-free-css-menu-designs/

http://jquery.com/

http://jquery.com/

http://jquery.com/

http://jquery.com/

http://jquery.com/

13


AJAX

http://www.google.com.vn/imgres?imgurl=http://www.jersey-shops.com/images/cat/207a6534bd1db9918ab222f1d7c85b68Ajax.jpg&imgrefurl=http://www.jersey-shops.com/category-505-b0-Soccer-Jerseys.html&usg=__QeQDwm8ROWM-DY0Ozaug0MDKdd8=&h=600&w=600&sz=51&hl=vi&start=93&zoom=1&tbnid=tdXM26mVfLOtKM:&tbnh=135&tbnw=135&ei=AiH2UJvKGYuRiQfR34HACg&prev=/search%3Fq%3Dajax%26start%3D80%26hl%3Dvi%26sa%3DN%26gbv%3D2%26tbm%3Disch&itbs=1

14


2.1. GiỚI THIỆU VỀ AJAX

Web Server

IIS, Apache,

Tomcat, ..

Request

Response

HTML

Sự hoạt động của một trang web

Đặt vấn đề:

15



Làm thế nào để thay đổi nội dung trang web mà

không phải refresh lại trang web?

Đặt vấn đề:

16



Ajax là gì?

AJAX (Asynchronous JavaScript and XML):

“JavaScript và XML không đồng bộ” là một nhóm các

công nghệ phát triển web.

Ajax được sử dụng để tạo ra các ứng dụng web

động hay các ứng dụng giàu tính Internet (rich Internet

Application)

Từ Ajax được ông Jesse James Garrett đưa ra và

dùng lần đầu tiên vào tháng 2 năm 2005.

Jesse James Garrett

http://www.google.com.vn/imgres?imgurl=http://www.nealite.fr/blog/wp-content/uploads/2012/06/jesse_james_garrett_headshot1.jpg&imgrefurl=http://www.nealite.fr/blog/evenement/ux-paris-jesse-james-garrett-video-6118.htm&usg=__Tp6oG9A30u_CB3kvMKnNQxnvTSo=&h=200&w=200&sz=8&hl=vi&start=9&zoom=1&tbnid=yK6xbPzru3Q_XM:&tbnh=104&tbnw=104&ei=oiT2UMTLKI-ciAeH6oGYCQ&prev=/search%3Fq%3DJesse%2BJames%2BGarrett%26hl%3Dvi%26gbv%3D2%26tbm%3Disch&itbs=1

17



Ajax là gì?

Ajax là một kỹ thuật phát triển web có tính tương

tác cao bằng cách kết hợp các ngôn ngữ:

- HTML/XHTML với CSS trong việc hiển thị thông tin.

- Mô hình DOM (Document Object Model), được

thực hiện thông qua JavaScript, nhằm hiển thị

thông tin động và tương tác với những thông tin

được hiển thị.

- Đối tượng XMLHttpRequest để trao đổi dữ liệu một

cách không đồng bộ với máy chủ web.

- XML thường là định dạng cho dữ liệu truyền, mặc

dù bất cứ định dạng nào cũng có thể dùng, bao gồm

HTML định dạng trước, văn bản thuần (plain text)

18


2.2. ƢU ĐiỂM VÀ HẠN CHẾ CỦA AJAX

Ƣu điểm:

Trang web có thể cập nhật lại nội dung cần thiết mà không phải nạp lại toàn bộ trang webc

Trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều.

19


2.2. ƢU ĐiỂM VÀ HẠN CHẾ CỦA AJAX

Khuyết điểm:

Các chức năng Back, Bookmark của trình duyệt hoạt động không đúng

Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiện Javascript nên ajax không thể chạy, hay trong một vài host, không hỗ trợ vào sâu cấu hình server nên hay bị lỗi "Access denied".

Mở ra một cách thức khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển web có thể không kiểm thử hết được.

20


2.3. CÁC ỨNG DỤNG ỦA AJAX

Xử lý văn bản trên Net:

+ https://writer.zoho.com

+ https://docs.google.com

Chia sẻ và lƣu trữ file:

https://mediafire.com là một trang web ứng dụng Ajax chia sẻ dữ liệu miễn phí và không giới hạn.

Bản đồ trực tuyến:

http:// maps.google.com

Tìm kiếm trực tuyến:

google.com, yahoo.com, bing…

https://writer.zoho.com/







https://docs.google.com/







https://mediafire.com/






21


2.4. MÔ HÌNH HOẠT ĐỘNG CỦA AJAX

Việc xử lý thông tin được thực hiện trên máy khách (client) thay vì máy phục vụ (server) như truyền thống.

Máy chủ chỉ làm một việc đơn giản là nhận thông tin từ máy khách và trả dữ liệu về cho máy khách.

Máy khách xử lý sơ bộ thông tin của người dùng nhập vào, sau đó chuyển về máy chủ rồi nhận dữ liệu từ máy chủ và xử lý để hiển thị cho người dùng.

22



Trang web

Máy khách

Ajax Engine

Máy chủ web

Máy chủ CSDL

Phía máy chủ

Javascript HTML +

CSS

HTTP request XML Data

Mô hình hoạt động của Ajax

23



Máy chủ

Trang

web Máy khách

Ajax Engine

Hoạt động người dùng

Hệ thống xử lý

Máy khách

Máy chủ

Hoạt động người dùng

Hệ thống xử lý

Xử lý

đồng bộ

Xử lý

bất đồng bộ

24


2.5 SO SÁNH WEB TRUYỀN THỐNG VÀ WEB AJAX

Các ứng dụng Ajax phần lớn trông giống như thể

chúng được đặt trên máy của người sử dụng hơn là

được đặt trên một máy khác thông qua Internet, do các

trang được cập nhật nhưng không nạp lại toàn bộ

Các ứng dụng truyền thống về bản chất là gửi dữ liệu

từ các form, được nhập bởi người sử dụng, tới một

máy phục vụ web. Máy phục vụ web sẽ trả lời bằng

việc gửi về một trang web mới.

25



Trang web

Máy khách

Ajax Engine

Máy chủ web

Máy chủ CSDL

Phía máy chủ

Javascript HTML + CSS

HTTP request XML Data

Trang web

Máy khách

Máy chủ web

Máy chủ CSDL

Phía máy chủ

HT

ML

+ C

SS

HT

TP

req

uest

So sách ứng dụng web truyền thống (bên trái) với Ajax (bên phải)

26



Mặt khác, các ứng dụng Ajax có thể gửi các yêu

cầu tới máy phục vụ web để nhận về chỉ những dữ

liệu cần thiết. Kết quả là trang web được hiển thị

nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ

và trình duyệt web giảm đi rất nhiều.

Thời gian xử lí của máy chủ web cũng vì thế mà

giảm theo vì phần lớn thời gian xử lý được thực

hiện trên máy khách của người dùng.

27

HẾT


Documents

CHƢƠNG 1: NGÔN NGỮ WEB - thayphet.netthayphet.net/application/upload/products/02Chuong1NgonnguWebJQueryAjax.pdfHƣớng tới các thành phần trong HTML: jQuery cho phép bạn