HƯỚNG DẪN SỬ DỤNG JQUERY AJAX TRONG PHÁT TRIỂN WEB NÂNG CAO

Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công nghệ thông tin 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: phetcmgmail.com 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 2005200820102012  Microsoft SQLServer 20052008 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. 6 Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM JQUERY 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.com201104108-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...

CHƯƠNG 1: NGÔN NGỮ WEB

(Chuyên đề 2: JQUERY & AJAX)

Giảng Viên: ThS Dương Thành Phết Email: phetcm@gmail.com

Website: http://www.thayphet.net Tel: 0918158670 – 08.3.7900261

Chuyên đề:

CÔNG NGHỆ WEB NÂNG CAO

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

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

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

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

JQUERY

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

John Resig

jQuery là gì?

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

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ú

1.1 GIỚI THIỆU VỀ JQUERY

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

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

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

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

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

AJAX

2.1 GiỚI THIỆU VỀ AJAX

Web Server

IIS, Apache, Tomcat,

Request

Response

HTML

Đặt vấn đề:

2.1 GiỚI THIỆU VỀ AJAX

Làm thế nào để thay đổi nội dung trang web mà Đặt vấn đề:

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

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

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

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

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…

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

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

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

Trang web

Máy khách Ajax Engine

Xử lý bất đồng bộ

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

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

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

HẾT