Cách sử dụng AJAX để tạo một chức năng khởi tạo cho việc lập trình HTML5 và CSS3

Video: Học lập trình Web A-Z - jQuery UI - Bài 14 - Resizable, Sortable và Selectable 2025

Nhiều trang HTML5 và CSS3 yêu cầu chức năng khởi tạo. Cơ chế tải trên cơ thể thường được sử dụng trong DOM / JavaScript để làm cho trang tải ngay khi tài liệu bắt đầu tải. Đây là một chức năng được chạy sớm để thiết lập phần còn lại của trang. Trong khi tải trọng trên cơ thể thực hiện công việc này tốt, có hai vấn đề tồn tại với kỹ thuật truyền thống:

Nó đòi hỏi phải thực hiện thay đổi đối với HTML. Mã JavaScript nên được tách hoàn toàn khỏi HTML. Bạn không cần phải thay đổi HTML để làm cho nó hoạt động với JavaScript.
Thời gian vẫn không đúng. Mã được chỉ định trong tải trọng cơ thể không thực hiện cho đến khi toàn bộ trang được hiển thị. Nó sẽ tốt hơn nếu mã đã được đăng ký sau khi DOM được nạp nhưng trước trang hiển thị.

Cách sử dụng $ (tài liệu). ready ()

jQuery có một sự thay thế tuyệt vời cho cơ thể onload vượt qua những thiếu sót này. Hãy xem mã để xem nó hoạt động như thế nào:

đã sẵn sàng. html $ (tài liệu). sẵn sàng (changeMe); function changeMe () {$ ("# output"). html ("Tôi đã thay đổi");}

Sử dụng tài liệu. cơ chế sẵn sàng
Sự thay đổi này có thay đổi không?

Mã này sử dụng kỹ thuật jQuery để chạy mã khởi tạo:

Thẻ body không còn có thuộc tính onload . Đây là một tính năng phổ biến của lập trình jQuery. HTML không còn có liên kết trực tiếp tới mã JavaScript vì jQuery cho phép mã JavaScript đính kèm chính nó vào trang web.
Chức năng khởi tạo được tạo ra với $ (tài liệu). sẵn sàng () chức năng. Kỹ thuật này nói với trình duyệt để thực hiện một chức năng khi DOM đã tải xong (để nó có quyền truy cập vào tất cả các yếu tố của biểu mẫu) nhưng trước khi trang được hiển thị (để bất kỳ hiệu ứng của biểu mẫu xuất hiện ngay cho người dùng).
$ document làm cho một đối tượng jQuery từ toàn bộ tài liệu. Toàn bộ tài liệu có thể được chuyển thành đối tượng jQuery bằng cách xác định tài liệu bên trong hàm $ (). Lưu ý rằng bạn không sử dụng dấu ngoặc kép trong trường hợp này.
Chức năng được chỉ định được tự động chạy. Trong trường hợp này, bạn muốn chạy hàm changeMe (), vì vậy bạn đặt nó vào tham số của phương thức ready (). Lưu ý rằng điều này đề cập đến changeMe như là một biến, vì vậy nó không có dấu ngoặc kép hoặc dấu ngoặc đơn.

Bạn thấy một số nơi khác (đặc biệt trong xử lý sự kiện) nơi jQuery mong muốn một chức năng như một tham số. Chức năng như vậy thường được gọi là hàm callback bởi vì nó được gọi sau khi một sự kiện nào đó xảy ra.Bạn cũng thấy các chức năng gọi lại đáp ứng các sự kiện bàn phím, chuyển động chuột và hoàn thành một yêu cầu AJAX.

Các lựa chọn thay thế cho tài liệu. đã sẵn sàng

Đôi khi bạn thấy một vài phím tắt vì nó rất phổ biến để chạy mã khởi tạo. Bạn có thể rút ngắn

$ (tài liệu). sẵn sàng (changeMe);

với mã sau:

$ (changeMe);

Nếu mã này không được định nghĩa bên trong một hàm và changeMe là một hàm được xác định trên trang, jQuery sẽ tự động chạy trực tiếp hàm giống như tài liệu. sẵn sàng tiếp cận.

Bạn cũng có thể tạo một hàm ẩn danh trực tiếp:

$ (document). sẵn sàng (function () {$ ("# output"). html ("Tôi đã thay đổi");});

Phương pháp này (vô danh) là rườm rà, nhưng bạn thường thấy mã jQuery sử dụng kỹ thuật này. Bạn có thể tạo một hàm gọi là init () và gọi nó bằng một dòng như sau: