chƢƠng 1: ngÔn ngỮ web -...
TRANSCRIPT
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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.
7
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
1.1. GIỚI THIỆU VỀ JQUERY
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
1.1. GIỚI THIỆU VỀ JQUERY
Ƣ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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
1.1. GIỚI THIỆU VỀ JQUERY
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
1.1. GIỚI THIỆU VỀ JQUERY
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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/
13
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
AJAX
14
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.1. GiỚI THIỆU VỀ AJAX
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.1. GiỚI THIỆU VỀ AJAX
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
17
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.1. GiỚI THIỆU VỀ AJAX
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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…
21
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.4. MÔ HÌNH HOẠT ĐỘNG CỦA AJAX
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.4. MÔ HÌNH HOẠT ĐỘNG CỦA AJAX
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.5 SO SÁNH WEB TRUYỀN THỐNG VÀ WEB AJAX
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
© Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
2.5 SO SÁNH WEB TRUYỀN THỐNG VÀ WEB AJAX
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.