ANIMATION VA AJAX TRONG JQUERY
---o0o---
Nhóm tìm hiểu đề tài
Bùi Trần Thái Phong: 09050038
Lê Minh Tân: 09050030
I) GIỚI THIỆU VỀ JQUERY.
Chắc hẵn khi lần đầu tiên các bạn nghe tên gọi jQuery, các bạn sẽ nghỉ đến nó là một ngôn ngữ mới. thực ra jQuery không phải là một ngôn ngữ mới, nó chỉ là một thu viện hàm javascript để giúp đơn giãn hóa các thao tác phức tạp của javascript, với jquery bạn không cần phải là người chuyên về javascript những điều bạn cần có để tiếp cận jquery một cách dễ dàng là CSS và HTML. jQuery sẽ sử dụng các selector trong CSS để trích lọc và áp dụng các style lên các phần tử HTML.
Trước khi xuất hiện jquery, đã có nhiều công ty và lập trình viên tạo ra các thư viện hàm javascript của riêng họ. Nhưng tất cả đều chưa có một cách thức nào để tổ chức và phát triễn nó trở thành một ngôn ngữ quốc tế và được cộng đồng sử dụng rộng rãi. Trong khi đó vào tháng 2 năm 2006 tại BarCamp NYC được tổ chức bởi John Resig đã mở ra một hướng phát triễn web mới, dễ sử dụng và tương thích cao với các trình duyệt hiện tại. Ngày nay jQuery đã trở thành một trong những thư viên được sử dụng phổ biến nhất trên thế giới cho các nhà phát triễn web.
II) CÁC ĐẶC ĐIỂM CHÍNH CỦA JQUERY.
1) jQuery hoàn toàn miễn phí
2) jQuery có thể hỗ trợ nhiều trình duyệt khác nhau
3) jQuery có cú pháp dễ sử dụng.
4) jQuery là thư viện mã nguồn mở
5) Cộng đồng phát triễn lớn
6) Hỗ trợ nhiều plugin
III) CƠ BẢN VỀ JQUERY.
Để sử jQuery, các bạn cần phải có được thư viện hàm của nó, để thực hiện điều đó, các bạn có 2 cách.
1) Download jQuery từ trang http://docs.jquery.com.
2) Sử dụng thư viện jQuery từ xa do các máy chủ cung cấp như
- Googlehttp://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js.
- Microsoft: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js
- jQuery: http://code.jquery.com/jquery-1.6.3.min.js
Sau khi có được thư viên hàm jQuery. Để xử dụng nó trong trang web của bạn, các bạn phải tham chiếu đến nó.
Cú pháp:
Trong đó url: là đường dẫn đến thư viện jQuery của bạn.
IV)
ANIMATION TRONG JQUERY.
Trong jQuery hỗ trợ các phương thức tạo hiệu ứng như sau:
Cú pháp chung: effect_name(time, easing, func)
Trong đó :
-
Time là thời gian để thực hiện hiệu ứng
-
Easing: các hiệu ứng phức tạp do jquery cung cấp, để có thể sử dụng nó, bạn cần download thư viện easing của jQuery tại trang http://docs.jquery.com
-
Func: hàm được thực hiện khi hiệu ứng kết thúc
Các hiệu ứng trong jQuery đều có cấu trúc tương tự như trên.
1)
Hiệu ứng hiễn thị và ẩn
-
Show: hiễn thị phần tử.
-
Hide: ẩn phần tử.
2)
Hiệu ứng slide
-
SlideUp: hiễn thị phần tử theo chiều từ trên xuống
-
SlideDown:ẩn phần tử theo chiều từ dưới lên trên.
3)
Hiệu ứng fade
-
fadeIn: hiễn thị phần tử theo kiểu từ mờ đến rõ.
-
fadeOut: hiễn thị phần tử theo kiểu từ rõ đến mờ rồi biến mất.
4)
Hiệu ứng tùy chỉnh.
-
Animate là một hiệu ứng đặc biệt giúp cho nhà phát triễn có thể tự tạo các hiệu ứng phức tạp theo ý muốn.
Cú pháp: animate(property,time,easing,function)
Trong đó:
+ property là tên thuộc tính cần tạo hiệu ứng
+ time: thời gian tạo hiệu ứng.
+ easing: hiệu ứng phức tạp, như đã đề cập ở trên
+ function: hàm được thực hiện khi hiệu ứng kết thúc.
EX: $(‘p’).animate({width:500},500, ‘easeOutCubic’,function( ){}).
Tạo hiệu ứng cho phần tử p, làm cho chiều rộng của phần tử tăng lên 500px, áp dụng easing tên ‘easeOutCubic’,và hàm rỗng không thực hiện gì cả, hiệu ứng được thực hiện trong 500 miliseconds.
Để hiểu rõ hơn các bạn có thể xem các hiệu ứng như sau: (chèn link)
V)
AJAX
Ajax viết tắc của từ Asynchronous Javascript and XML, được công bố bởi Jesse James Garrett vào tháng 2/2005 trong một bài báo trực tuyến được đặt tên là “Ajax:A New Approach to Web Application. Ở bài báo này Garret đã đưa ra mô hình Ajax và đối chiếu nó với các mô hinh giao tiếp truyền thống.
Mô hình giao tiếp:
Điểm khác biệt giữa mô hình Ajax và mô hình truyền thống là ở Ajax có một lớp trung gian phụ trách quá trình gữi yêu cầu và tiếp nhận phản hồi mà Garret gọi là Ajax Engine. Ở Ajax Engine này chứa các đối tượng javascript phụ trách quá trình gữi nhận dữ liệu, trong đó đối tượng quan trọng nhất là XMLHttpRequest. Trong javascript lập trình Ajax chính là lập trình trên đối tượng này.
VI)
CÁC VÍ DỤ VỀ AJAX.
1)
Google search
2)
Google Map
VII)
AJAX TRONG JQUERY.
Các phương thức lập trình Ajax trong jQuery.
Mô tả các tham số:
-
url: đường dẫn đến nơi xử lý yêu cầu
-
data: dữ liệu được gữi đến trang xử lý
-
callback: hàm được thực hiện khi có phản hồi từ server.
1)
$.get(url,data,callback)
Ex:
$.get(‘demo.php’, “name=’John”,function(data){ alert(data);})
Gữi dữ liệu “name=’John’ đến địa chỉ demo.php , khi phản hồi được trả về hàm function được thực hiện và xuất ra thông tin về phản hồi.
2)
$.post(url,data,callback)
Post cũng tương tự như phương thức get, nhưng trong lập trình web, get thường được dùng để lấy dữ liệu từ server, còn post dùng đê cập nhật dữ liệu trên server.
3)
$.ajax
Cú pháp:
$.ajax(
{
url: ‘đường dẫn’,
type: “post|get”
data: “dữ liệu được gữi”,
datatype: “kiểu dữ liệu được lấy về”
success: function(data){ // Xử lý dữ liệu }
}
error:function(msg){ // xử lý khi có lỗi xãy ra}
).
Quá trình gữi nhận dữ liệu tương tự như 2 phương thức ở trên.
Để hiểu rõ hơn các bạn có thể xem các demo ở đây: (chèn link)
VIII)
KẾT LUẬN
Trong quá trình tìm hiểu đề tài chắc chắn rằng kiến thức nhóm mình trình bày ở đây sẽ không bao trùm hết tất cả khía cạnh của ngôn ngữ jQuery. Nếu bạn nào có đam mê công nghệ và theo chuyên ngành về web các bạn có thể tham khảo các diễn đàn online như jquery.com hay có thắc mắc nào trong nội dung của nhóm trình bày thì có thể liên hệ với nhóm để tìm hiểu kỹ thêm.
IX)
MỘT SỐ DEMO LIÊN QUAN
Hiệu ứng Animation, ẩn hiện slide, fade : http://svtdm.webuda.com/VD_Animate.html
Slide trong làm menu: http://svtdm.webuda.com/Menu.html
Slide trong làm banner: http://svtdm.webuda.com/slide.html
Toàn bộ phần demo và bài thuyết trình: http://www.mediafire.com/myfiles.php#myfiles
