AJAX hoặc Ajax là JavaScript và XML không đồng bộ. Nó được sử dụng để trao đổi dữ liệu với máy chủ và cập nhật một phần của trang web mà không cần tải lại toàn bộ trang web ở phía máy khách. Màn hình và hoạt động của trang web hiện tại hoàn toàn không bị can thiệp khi trao đổi và cập nhật dữ liệu. Ajax cũng được coi là một nhóm công nghệ có HTML, CSS, DOM và JavaScript được sử dụng để đánh dấu, tạo kiểu và cho phép người dùng tương tác với thông tin trên trang web. Trong bài viết này, nó sẽ hướng dẫn bạn cách viết một chương trình đơn giản trong Ajax theo từng bước bằng Notepad ++. Cần có một số kiến thức cơ bản về HTML, DOM, JavaScript và máy chủ Web cục bộ hoặc Máy chủ Web từ xa. WampServer được sử dụng trong bài viết này để kiểm tra.
Các bước
Phương pháp 1/2: Mã hóa
Bước 1. Chuẩn bị hình ảnh để viết chương trình Ajax
Lưu ảnh trong cùng một thư mục nơi bạn sẽ lưu các tệp html và văn bản của mình hiển thị chương trình Ajax. Trong bài viết này, thư mục “ProgramInAjax” được thiết lập bên trong thư mục “wamp” trong thư mục “www” nơi bạn đã cài đặt WampServer.
Bước 2. Mở bất kỳ trình soạn thảo văn bản nào
Notepad ++ được sử dụng làm trình soạn thảo văn bản trong bài viết này.
Bước 3. Tạo một tệp mới trong trình soạn thảo văn bản
Nhập nội dung sau:
Ồ ồ! Hoa vàng đã về đâu?
Bạn có thể nhập bất cứ thứ gì bạn muốn bên trong thẻ html ở đây.
Bước 4. Lưu tệp dưới dạng tài liệu văn bản với tên là “ajax-data.txt
” Trên thực tế, bạn có thể đặt tên tệp bất cứ thứ gì bạn muốn nhưng hãy đảm bảo bạn nhập cùng tên tệp để mã hóa trong dòng này:
xmlhttp.open ("GET", "ajax-data.txt", true);
Tuy nhiên, các thẻ HTML được sử dụng cho tiêu đề để nó trông lớn hơn và vô hình hơn.
Bước 5. Tạo một tệp mới cho một trang web
Tệp này dành cho tệp HTML để xem chương trình Ajax trong trình duyệt Web.
Bước 6. Sao chép mã sau:
Chương trình Ajax đầu tiên của tôi của tôi Đặt mã Ajax bên dưới.Nhấp vào nút bên dưới để làm cho bông hoa biến mất
Bước 7. Lưu tệp
Nhấp vào nút lưu trên thanh menu. Hộp "Lưu dưới dạng" đang mở. Nhập tên cho tài liệu của bạn. Trong bài viết này, tên của tệp là "chỉ mục".
Bước 8. Nhấp vào mũi tên thả xuống để chọn phần mở rộng tệp
Tại trường “Lưu dưới dạng loại”, hãy nhấp vào mũi tên thả xuống để chọn phần mở rộng tệp.
Bước 9. Chọn “Tệp ngôn ngữ đánh dấu siêu văn bản
” Đảm bảo rằng nó có “html” bên trong dấu ngoặc đơn. Nhấp vào lưu sau khi chọn “html.”
Bước 10. Kiểm tra tệp HTML trong trình duyệt Web
Mở trang web trong trình duyệt web. Chuyển đến "Chạy" trên thanh menu trên cùng. Nhấp vào nó và chọn “Khởi chạy trong Chrome” hoặc bất kỳ trình duyệt nào đang được cài đặt trong hệ thống của bạn. Google Chrome được sử dụng để thử nghiệm trong bài viết này. Bạn có thể đã cài đặt một số trình duyệt khác trong Notepad ++. Bạn có thể chọn trình duyệt yêu thích của mình. Một tùy chọn khác, bạn có thể nhấp vào biểu tượng WampServer trên thanh tác vụ ở cuối màn hình và chọn “Localhost”. Bạn sẽ thấy thư mục của mình ở đó và nhấp vào tệp chỉ mục.
Bước 11. Nhấp vào nút bên dưới hình ảnh để kiểm tra tập lệnh
Bước 12. Trang web cuối cùng của bạn
Trang web của bạn phải được làm mới với thông tin mà bạn đã nhập vào tệp văn bản lúc đầu. Bông hoa và tiêu đề phải được thay thế bằng tiêu đề mới có tên “Ồ ồ! Hoa vàng đi đâu mất rồi?”
Phương pháp 2/2: Giải thích mã
Bước 1. Phần thân
Phần nội dung của HTML có phần "div" và một nút. Phần này sẽ được sử dụng để hiển thị thông tin trả về từ máy chủ. Nút gọi một hàm có tên là “loadXMLDoc (),” nếu nó được nhấp vào.
Chương trình Ajax đầu tiên của tôi của tôi Hình ảnh ở đây để kiểm tra chương trình Ajax.Nhấp vào nút bên dưới để làm cho bông hoa biến mất
Một nút ở đây
Bước 2. Phần đầu
Phần đầu của tệp HTML có thẻ tập lệnh chứa hàm “loadXMLDoc ()”.
Chương trình Ajax đầu tiên của tôi của tôi Đặt mã Ajax bên dưới.
Bước 3. Giải thích thêm
Điều quan trọng nhất của Ajax là đối tượng XMLHttpRequest. Nó được sử dụng để trao đổi dữ liệu với máy chủ và tất cả các trình duyệt hiện đại đều hỗ trợ đối tượng.
- Cú pháp để tạo một đối tượng XMLHttpRequest () là variable = new XMLHttpRequest (); nhưng đồng thời cú pháp để tạo các phiên bản cũ của Internet Explorer (IE5 và IE6) sử dụng đối tượng ActiveX là biến = new ActiveXObject ("Microsoft. XMLHTTP");.
- Để xử lý tất cả các trình duyệt hiện đại, nó cần phải kiểm tra xem các trình duyệt có hỗ trợ đối tượng XMLHttpRequest hay không. Nếu có, nó sẽ tạo một đối tượng XMLHttpRequest. Nếu không, nó sẽ tạo một đối tượng ActiveX cho nó.
- Sau đó, nó sẽ gửi một yêu cầu đến máy chủ. Phương thức của đối tượng XMLHttpRequest được gọi là “open ()” và “send ()” sẽ được sử dụng. xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.
Lời khuyên
- Một tùy chọn khác để xem trước kết quả, bạn có thể mở trình duyệt yêu thích của mình và gõ “localhost / ProgramInAjax” vào thanh địa chỉ web để hiển thị trang web. Bạn sẽ có thể xem trang web nếu bạn đặt tên tệp HTML của mình thành “index.html”.
- Lưu tệp html của bạn thường xuyên hơn trong quá trình làm việc của bạn. Nhấn Ctrl và S cùng lúc đối với người dùng Window sẽ tiết kiệm thời gian hơn.
- Đảm bảo thêm tệp HTML đã lưu của bạn ở cùng vị trí nơi chứa tệp văn bản dữ liệu và hình ảnh của bạn.
- Khi bạn đặt tên cho một tệp, sẽ phân biệt chữ hoa chữ thường khi bạn thêm những tên đó vào mã. Ví dụ: “myImage” khác với “MyImage” hoặc “myimage.”
