Làm thế nào để Thực hiện một yêu cầu AJAX với jQuery cho HTML5 và CSS3 Lập trình - núm vú < < Làm thế nào để Thực hiện một yêu cầu AJAX với jQuery cho HTML5 và CSS3 Lập trình

Mục đích chính của thư viện AJAX như jQuery là đơn giản hóa yêu cầu AJAX cho các lập trình viên HTML5 và CSS3. Thật khó tin rằng điều này có thể dễ dàng với jQuery.

Làm thế nào để bao gồm một tập tin văn bản với AJAX

Kiểm tra mã này sạch:

ajax. html $ (tài liệu). sẵn sàng (getAJAX); hàm getAJAX () {$ ("# output"). load ("hello. txt");}

HTML rất sạch sẽ. Nó chỉ đơn giản tạo ra một div rỗng gọi là output.

Ví dụ này sử dụng AJAX, vì vậy nếu nó không hoạt động, bạn có thể cần nhớ một số chi tiết về cách AJAX hoạt động. Một chương trình sử dụng AJAX nên được chạy qua một máy chủ web, không chỉ từ một tập tin địa phương. Ngoài ra, tệp đang được đọc phải nằm trên cùng một máy chủ với chương trình thực hiện yêu cầu AJAX.

Cơ chế tải () được mô tả ở đây phù hợp với tình huống cơ bản nơi bạn muốn tải đoạn văn bản thuần hoặc đoạn mã HTML vào các trang của mình.

AJAX và jQuery có thể là một cách rất hữu ích để xây dựng các trang web hiệu quả, ngay cả khi không có lập trình phía máy chủ. Thường một trang web dựa trên một loạt các yếu tố nhỏ hơn có thể được hoán đổi và sử dụng lại. Bạn có thể sử dụng AJAX để xây dựng một khuôn khổ cho phép tái sử dụng dễ dàng và sửa đổi nội dung web.

CMS Sử dụng AJAX $ (init); hàm init () {$ ("# heading"). tải ("head html."); $ ("# menu"). tải ("menu. html"); $ ("# content1"). tải ("story1. html"); $ ("# content2"). tải ("story2. html"); $ ("# footer"). tải ("footer. html");};

Tất cả các divs trống rỗng. Không có văn bản nào được hiển thị trong ảnh chụp màn hình có trong tài liệu này, nhưng tất cả được kéo từ các tệp nhỏ hơn một cách năng động.


Trang bao gồm các div có tên rỗng. Thay vì bất kỳ nội dung cụ thể nào, trang bao gồm các trình giữ chỗ có ID.


Nó sử dụng jQuery. Thư viện jQuery được sử dụng để đơn giản hóa rất nhiều việc tải dữ liệu thông qua các cuộc gọi AJAX.


Tất cả nội dung nằm trong các tệp riêng biệt. Xem qua thư mục và bạn có thể thấy tệp HTML rất đơn giản chứa các phần nhỏ của trang. Ví dụ, câu chuyện1. html như sau:


Sách I - Tạo HTML Foundation Căn bản HTML Âm thanh
Tất cả Về Xác nhận

Chọn Công cụ của Bạn
Quản lý Thông tin với Danh sách và Bảng
Kết nối với Các Liên kết
Thêm hình ảnh
Tạo các mẫu
Phương thức
init ()




chạy trên tài liệu .đã sẵn sàng . Khi tài liệu đã sẵn sàng, trang chạy phương thức init (). Phương thức init ()


sử dụng các cuộc gọi AJAX để tự động tải nội dung. Không chỉ là một loạt các phương thức jQuery load (). Cách tiếp cận này có vẻ như là rất nhiều công việc, nhưng nó có một số đặc điểm rất thú vị: Nếu bạn đang xây dựng một trang web lớn với nhiều trang, bạn thường muốn thiết kế sự xuất hiện trực quan một lần và tái sử dụng cùng chung mẫu liên tục.


Ngoài ra, có thể bạn sẽ có một số yếu tố sẽ nhất quán trên nhiều trang. Bạn chỉ cần tạo một tài liệu mặc định và sao chép và dán nó cho mỗi trang, nhưng cách tiếp cận này trở nên lộn xộn. Điều gì xảy ra nếu bạn đã tạo ra 100 trang theo một mẫu và sau đó cần phải thay đổi tiêu đề? Bạn cần thực hiện thay đổi trên 100 trang khác nhau.


Lợi thế của cách tiếp cận kiểu mẫu là sử dụng lại mã. Cũng giống như việc sử dụng một phong cách bên ngoài cho phép bạn nhân một bảng kiểu trên hàng trăm tài liệu, việc thiết kế mẫu mà không có nội dung cho phép bạn lưu trữ các đoạn mã trong các tệp nhỏ hơn và sử dụng lại chúng. Tất cả 100 trang trỏ đến cùng một tập tin trình đơn, vì vậy nếu bạn muốn thay đổi trình đơn, thay đổi một tập tin và mọi thứ thay đổi với nó.


Dưới đây là cách bạn sử dụng cách tiếp cận này:


Tạo một mẫu duy nhất cho toàn bộ trang web của bạn.
Xây dựng HTML cơ bản và CSS để quản lý giao diện tổng thể cho toàn bộ trang của bạn. Đừng lo lắng về nội dung. Chỉ cần xây dựng các trình giữ chỗ cho tất cả các thành phần của trang của bạn. Hãy chắc chắn để cung cấp cho mỗi yếu tố một ID và viết CSS để có được những thứ được định vị như bạn muốn.


Thêm hỗ trợ jQuery.
Tạo liên kết đến thư viện jQuery, và thực hiện một phương thức init mặc định (). Đưa vào mã để xử lý việc điền các phần của trang mà sẽ luôn luôn phù hợp.


Sao chép mẫu.
Sau khi bạn biết cách mẫu sẽ hoạt động, hãy tạo một bản sao cho mỗi trang của trang web của bạn.


Tùy chỉnh mỗi trang bằng cách thay đổi chức năng
init ()


. Phần duy nhất của mẫu thay đổi là hàm init (). Tất cả các trang của bạn sẽ giống hệt nhau, ngoại trừ các chức năng tùy chỉnh init () tải nội dung khác nhau. Tải nội dung tùy chỉnh vào div bằng AJAX.
Sử dụng chức năng init () để tải nội dung vào mỗi div.


Đây là một cách tuyệt vời để quản lý nội dung, nhưng nó không phải là một hệ thống quản lý nội dung đầy đủ. Ngay cả AJAX cũng không thể cho phép bạn
lưu trữ


nội dung trên web. Hệ thống quản lý nội dung phức tạp hơn cũng sử dụng cơ sở dữ liệu hơn là các tệp để xử lý nội dung. Bạn sẽ cần một số loại chương trình phía máy chủ (như PHP) và thường là một cơ sở dữ liệu (như mySQL) để xử lý loại công việc này.