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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (558.15 KB, 27 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>CHƯƠNG 1: NGÔN NGỮ WEB </b>

<b>(Chuyên đề 2: JQUERY & AJAX) </b>

<b><small>Giảng Viên: ThS. Dương Thành Phết Email: </small></b>

<b><small>Website: Tel: 0918158670 – 08.3.7900261 </small></b>

<b>Chuyên đề: </b>

<b>CÔNG NGHỆ WEB NÂNG CAO </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>MỤC TIÊU </b>

- 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

- 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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>YÊU CẦU </b>

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>NỘI DUNG </b>

<b>1.1. Jquery </b>

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

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

1.2.1. Giới thiệu về Ajax

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>TÀI LIỆU DẠY – HỌC </b>

[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.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>JQUERY </b>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>1.1. GIỚI THIỆU VỀ JQUERY </b>

<small></small> <b>jQuery là 1 Javascript Framework, tạo ra các tương </b>

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

<small></small><b> 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. </b>

<small></small><b> jQuery có mã nguồn mở và hồn tồn miễn phí, có một </b>

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

<b>thiện, phát triển và viết Plugin. </b>

<b><small>John Resig </small></b>

<b>jQuery là gì? </b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>1.1. GIỚI THIỆU VỀ JQUERY Tại sao dùng jQuery? </b>

<small></small><b> jQuery đơn giản hóa cách viết Javascript và tăng tốc độ </b>

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

<small></small> 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.

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

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>1.1. GIỚI THIỆU VỀ JQUERY Ƣu điểm jQuery? </b>

<small></small>Hỗ trợ tốt việc xử lý Dom, Ajax…

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

<small></small>Nhỏ gọn, dễ dùng.

<small></small>Ít xung khắc với các thư viện Javascript khác.

<small></small>Plugin phong phú.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>1.1. GIỚI THIỆU VỀ JQUERY </b>

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

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.

<small></small><b> Thay đổi nội dung của tài liệu: </b>jQuery có thể thêm hoặc bớt nội dung trên trang, thậm chí cả cấu

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>1.1. GIỚI THIỆU VỀ JQUERY </b>

<b>jQuery có thể làm được những gì? (tt) </b>

<small></small><b>Tương tác với người dùng: jQuery cho nhiều phương </b>

thức để tương tác với người dùng và tối giản các mã Event trong code HTML.

<small></small><b>Tạo hiệu ứng động: jQuery cho phép sử dụng rất </b>

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

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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>1.2. DOWNLOAD VÀ SỬ DỤNG JQUERY </b>

<b>Download jQuery </b>

<small></small>Truy cập vào để Download phiên bản mới nhất. Copy code và lưu lại với file: .js

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>AJAX </b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>2.1. GiỚI THIỆU VỀ AJAX </b>

<b><small>Web Server </small></b>

<small>IIS, Apache, Tomcat, .. </small>

<b><small>Request </small></b>

<b><small>Response </small></b>

<b>Đặt vấn đề: </b>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>2.1. GiỚI THIỆU VỀ AJAX </b>

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

<b>Đặt vấn đề: </b>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>2.1. GiỚI THIỆU VỀ AJAX Ajax là gì? </b>

 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.

<small>Jesse James Garrett </small>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>2.1. GiỚI THIỆU VỀ AJAX Ajax là gì? </b>

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>2.2. ƢU ĐiỂM VÀ HẠN CHẾ CỦA AJAX Ƣu điểm: </b>

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 tồ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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.2. ƢU ĐiỂM VÀ HẠN CHẾ CỦA AJAX Khuyết điểm: </b>

 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.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>2.3. CÁC ỨNG DỤNG ỦA AJAX </b>

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> Bản đồ trực tuyến: </b>

http:// maps.google.com  Tìm kiếm trực tuyến:

google.com, yahoo.com, bing…

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>2.4. MƠ HÌNH HOẠT ĐỘNG CỦA AJAX </b>

 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.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>2.4. MƠ HÌNH HOẠT ĐỘNG CỦA AJAX </b>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>2.4. MƠ HÌNH HOẠT ĐỘNG CỦA AJAX </b>

<b><small>Trang web </small></b>

<b><small>Máy khách Ajax Engine </small></b>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>2.5 SO SÁNH WEB TRUYỀN THỐNG VÀ WEB AJAX</b>

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.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.5 SO SÁNH WEB TRUYỀN THỐNG VÀ WEB AJAX</b>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>2.5 SO SÁNH WEB TRUYỀN THỐNG VÀ WEB AJAX</b>

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.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">