(Tiểu luận) báo cáo đồ án cá nhân môn hệ phân tán – cs420g tên đề tài ajax

TRƯỜNG ĐẠI HỌC DUY TÂN KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN CÁ NHÂN MÔN: HỆ PHÂN TÁN – CS420G Tên đề tài AJAX  Giáo viên hướng dẫn: Nguyễn Minh Nhật Sinh viên thực hiện: Nguyễn Đức Thịnh -25211205948 Đà Nẵng 10/2023 MỤC LỤC I.LỜI NÓI ĐẦU II.NỘI DUNG GIỚI THIỆU TỔNG QUAN VỀ AJAX 1.1 AJAX ? 1.2 Phương thức AJAX 1.3 Lợi ích AJAX 1.4 Tại phải phát triển AJAX ? NGUYÊN LÝ HOẠT ĐỘNG ĐÁNH GIÁ CÁC ĐẶC ĐIỂM CỦA AJAX 3.1.Ưu điểm 3.2 Nhược điểm ỨNG DỤNG AJAX TRONG THỰC TẾ 10 4.1 Biểu mẫu đăng nhập 10 4.2 Tự động hoàn toàn 10 4.3 Bỏ phiếu xếp hạng 11 4.4 Cập nhật với nội dung người dùng 11 4.5 Gửi biểu mẫu xác thực 11 4.6 Phòng trò chuyện nhắn tin tức 11 4.7 Giao diện người dùng nhấp nháy 12 4.8 Tiện ích bên ngồi 12 4.9 Hộp đèn thay cửa sổ bật lên 12 XÂY DỰNG DEMO MINH HOẠ 13 III.KẾT LUẬN 15 I.LỜI NÓI ĐẦU: AJAX, viết tắt Asynchronous JavaScript and XML, phương pháp để gửi nhận liệu từ máy chủ mà khơng cần tải lại tồn trang web Nó cho phép tương tác động cập nhật nhanh chóng thơng qua việc thay đổi nội dung trang tải Trước AJAX đời, người dùng tương tác với trang web, thường cần tải lại tồn trang để có liệu Điều gây thời gian làm gián đoạn trải nghiệm người dùng Với AJAX, yêu cầu gửi kết trả từ máy chủ phần trang web, giúp tăng tốc đáng kể hiệu suất đáp ứng trang Phương pháp AJAX sử dụng công nghệ XMLHttpRequest để gửi yêu cầu HTTP đến máy chủ xử lý kết trả Dữ liệu truyền theo nhiều định dạng, bao gồm XML, JSON HTML Khi kết nhận về, JavaScript thực hành động cần thiết để cập nhật giao diện người dùng mà không làm tải lại trang Với AJAX, ứng dụng web cung cấp trải nghiệm tương tác mượt mà đáp ứng nhanh chóng Nó cho phép người dùng gửi yêu cầu, nhận kết cập nhật liệu trang cách hợp lý hiệu AJAX trở thành công nghệ quan trọng việc phát triển ứng dụng web đa chức ngày II.NỘI DUNG : GIỚI THIỆU TỔNG QUAN VỀ AJAX: AJAX chữ viết tắt cụm từ Asynchronous Javascript and XML AJAX phương thức trao đổi liệu với máy chủ cập nhật hay nhiều phần trang web, hồn tồn khơng reload lại toàn trang Ajax viết Javascript chạy client, tức browser chạy độc lập hồn tồn khơng ảnh hưởng lẫn Về mặt kỹ thuật, đề cập đến việc sử dụng đối tượng XmlHttpRequest để tương tác với máy chủ web thơng qua Javascript 1.1 AJAX ? AJAX công cụ giúp đem lại cho người dùng trải nghiệm tốt Khi cần thay đổi nhỏ khơng cần load lại trang web, làm trang web phải tải lại nhiều thứ không cần thiết 1.2 Các phương thức AJAX : 1.2.1.Phương thức Get () Jquery Ajax Là phương pháp lấy liệu từ server phương thức HTTP GET Tương tự phương thức Post, phương thức get có cú pháp : $.get(URL,data,function(data,status,xhr),dataType) 1.2.2.Phương thức jquery load () jQuery Ajax Phương thức load() lấy liệu từ server trả liệu cho phần tử chọn Cú pháp: $(selector).load(URL,data,callback);  URL: mà bạn muốn lấy liệu  Data: cặp key/value gửi với yêu cầu  Callback: tên hàm thực thi sau phương thức load hoàn thành.\ 1.2.2.Phương thức jquery load () jQuery Ajax Phương thức load() lấy liệu từ server trả liệu cho phần tử chọn Cú pháp: $(selector).load(URL,data,callback);  URL: mà bạn muốn lấy liệu  Data: cặp key/value gửi với yêu cầu  Callback: tên hàm thực thi sau phương thức load hoàn thành.\ 1.2.2 Phương thức jquery load () jQuery Ajax Phương thức load() lấy liệu từ server trả liệu cho phần tử chọn Cú pháp: $(selector).load(URL,data,callback); URL: mà bạn muốn lấy liệu Data: cặp key/value gửi với yêu cầu Callback: tên hàm thực thi sau phương thức load hoàn thành 1.2.3.Phương thức Post () JQuery Ajax Có tác dụng lấy liệu từ server phương thức HTTP POST REQUEST Cú Pháp: $(selector).post(URL,data,function(data,status,xhr),dataType)  url: required , đường dẫn đến file cần lấy thông tin  data: không bắt buộc ,là đối tượng object gồm key : value gửi lên server  function(data, status , xhr): function xử lý thực thành công với parameters:  data : bao gồm liệu trả từ request  status : gồm trạng thái request (“success” , “notmodified” , “error” , “timeout” , or “parsererror”)  xhr : gồm đối tượng XMLHttpRequest  dataType: dạng liệu trả (text, json, script, xml,html,jsonp ) 1.3 Lợi ích AJAX :  AJAX sử dụng để thực callback Được dùng để thực việc truy xuất liệu lưu trữ liệu mà không cần phải reload lại toàn trang web Với server nhỏ việc tiết kiệm băng thơng cho  Cần gửi liệu phần đó, load lại phần nhỏ để cập nhật thông tin không load trang Bằng cách giảm thiểu tốc độ tải trang giúp người dùng có trải nghiệm tốt  Trang web bạn tạo đa dạng động 1.4 Tại phải phát triển AJAX? AJAX công cụ hỗ trợ người dùng nhiều tính hữu ích trải nghiệm tốt Dưới số lợi ích AJAX cung cấp, bao gồm: o Tiết kiệm băng thông: dùng để thực callback Chúng ta không cần load lại trang web có vài thay đổi nhỏ, khiến website tránh phải tải thứ không cần thiết Do đó, server nhỏ giúp tiết kiệm băng thông đáng kể o Tăng tốc độ tải trang: Do cần load lại phần nhỏ có thay đổi nên giảm thiểu tốc độ tải trang nhanh giúp nâng trải nghiệm người dùng tốt o Trang web đa dạng sống động lai 2.NGUYÊN LÝ HOẠT ĐỘNG : Theo Cascarano, JavaScript XML kết hợp để làm cho trình cập nhật không đồng xảy thông qua việc sử dụng XMLHttpRequest Khi người dùng truy cập trang web thiết kế để sử dụng AJAX kiện định xảy (người dùng tải trang, nhấp vào nút, điền vào biểu mẫu,…) JavaScript tạo đối tượng XMLHttpRequest, sau chuyển liệu XML định dạng trình duyệt web (chương trình sử dụng để xem trang web) máy chủ web (phần mềm phần cứng nơi liệu trang web lưu trữ) Document continues below Discover more from: Lý thuyết nhận dạng Trường Đại Học Du… 3 documents Go to course 41 21 XỬ LÝ ẢNH BẰNG KỸ THUẬT MORPHOLOGY Lý thuyết nhận dạng None 15-phút-số-1-G122018-2019 Lý thuyết nhận dạng None 9781259024689TEST-BANK Kinh tế trị 100% (1) Correctional Administration Criminology 96% (113) English - huhu 10 Led hiển thị 100% (3) 10 Preparing Vocabulary FOR UNIT Đối tượng XMLHttpRequest gửi yêu cầu liệu trang Led cập nhật web, 100% (2) hiểnđến thị máy chủ máy chủ xử lý yêu cầu, phản hồi tạo phía máy chủ gửi trở lại trình duyệt, sau sử dụng JavaScript để xử lý phản hồi hiển thị hình dạng nội dung cập nhật Nói cách đơn giản, JavaScript tự động hóa q trình cập nhật, u cầu nội dung cập nhật định dạng XML để làm cho dễ hiểu tồn cầu JavaScript lần bắt đầu làm nội dung có liên quan cho người dùng xem trang Kỹ thuật AJAX bỏ qua liệu trang không liên quan xử lý u cầu thơng tin cập nhật thông tin cập nhật Đây thực trọng tâm tính hiệu AJAX, giúp trang web ứng dụng sử dụng nhanh phản hồi nhanh cho người dùng 3 ĐÁNH GIÁ CÁC ĐẶC ĐIỂM CỦA AJAX : 3.1 Ưu điểm : Giảm lưu lượng máy chủ tăng tốc độ Ưu điểm quan trọng khả cải thiện hiệu suất sử dụng ứng dụng web Các kỹ thuật AJAX cho phép ứng dụng hiển thị mà khơng có liệu, điều làm giảm lưu lượng máy chủ bên request Khách truy cập web bạn nhìn thấy cửa sổ màu trắng đợi trang làm XMLHttpRequest XMLHttpRequest loại yêu cầu sử dụng rộng rãi để gửi yêu cầu đến trang AJAX, đóng vai trị quan trọng việc triển khai kỹ thuật AJAX để phát triển web Có thể gọi XMLHttpRequest với tên khác Asynchronous HTTP request (yêu cầu HTTP không đồng bộ) XMLHttpRequest chuyển thao tác liệu XML đến từ dịch vụ web sử dụng HTTP Mục đích thiết lập kết nối độc lập client-side server Giảm sử dụng băng thông Một lợi đến từ việc sử dụng băng thông Việc có hiệu việc cải thiện hiệu suất web tốc độ tải AJAX tận dụng tốt băng thông server cách đưa liệu từ sở liệu lưu trữ vào sở liệu để thực chạy mà không cần tải lại trang Xác thực biểu mẫu Khác với gửi biểu mẫu truyền thống, AJAX cho phép xác thực biểu mẫu xác Tăng khả tương thích AJAX tương thích với J2EE, PHP, ASP.NET ngôn ngữ AJAX gần hỗ trợ tất trình duyệt phổ biến Internet Explorer trở lên, Opera 7.6 trở lên, RockMelt, Mozilla Firefox 1.0 trở lên Apple Safari 1.2 trở lên 3.2 Nhược điểm: Mã nguồn mở: Cho phép xem nguồn xem nguồn mã viết cho Ajax Điều làm cho AJAX an tồn so với cơng nghệ khác Việc sử dụng AJAX gây khó khăn cho việc gỡ lỗi trang web khiến chúng dễ gặp phải vấn đề bảo mật xảy tương lai AJAX có phụ thuộc đáng kể vào JavaScript, trình duyệt hỗ trợ Javascripts XMLHttpRequest sử dụng trang có kỹ thuật Khi nhấp vào nút quay lại trình duyệt, bạn khơng quay lại trạng thái trước trang mà toàn trang ỨNG DỤNG AJAX TRONG THỰC TẾ : 4.1 Biểu mẫu đăng nhập Thay truy cập trang đăng nhập, sau điều hướng trở lại trang bạn muốn ban đầu, với AJAX, người dùng nhập trực tiếp tên người dùng mật họ vào trang gốc Từ AJAX gửi yêu cầu đến máy chủ để 4.2 Tự động hoàn thành Google công ty lớn bắt đầu sử dụng AJAX công cụ gợi ý tìm kiếm Google cách họ sử dụng cơng cụ tự động hồn thành tạo Khi gõ vào tìm kiếm Google, bắt đầu sử dụng AJAX để nhận kết chung từ sở liệu lần gõ phím Tự động hồn thành cho biểu mẫu mà bạn có nhiều input dropdown dài rườm rà 4.3 Bỏ phiếu xếp hạng Các trang web đánh dấu trang xã hội Digg Reddit cho phép người dùng định nội dung trang web cách bỏ phiếu cho nội dung mà người dùng thích Họ sử dụng AJAX để xử lý tất bỏ phiếu, để người dùng nói lên ý kiến họ số câu chuyện cách nhanh chóng dễ dàng 4.4 Cập nhật với nội dung người dùng Một điều khiến Twitter trở nên phổ biến giao diện đơn giản dễ sử dụng họ Khi tạo "tweet", thêm vào nguồn cấp liệu họ thứ cập nhật Gần đây, Twitter bắt đầu sử dụng AJAX với trang ‘chủ đề thịnh hành’ họ Cứ sau vài giây, trang cho phép người dùng biết có nhiều tweet thực chủ đề này, cung cấp cho họ thông tin cập nhật giây 4.5 Gửi biểu mẫu & xác thực Các biểu mẫu phức tạp để làm việc, AJAX làm cho chúng tốt nhiều cho người dùng AJAX sử dụng theo nhiều cách khác nhau, từ tự động hoàn thành đề cập trên, đến xác nhận gửi Một số trang web sử dụng AJAX để kiểm tra xem biểu mẫu có đáp ứng số yêu cầu định hay không, chẳng hạn độ mạnh mật liệu thứ có phải email URL hợp lệ hay khơng 4.6 Phịng trị chuyện nhắn tin tức Phịng trị chuyện nhắn tin tức xử lý hồn tồn trình duyệt Có hai quy trình AJAX phịng trị chuyện ứng dụng IM Hãy coi số chúng tai bạn số chúng miệng bạn ‘Miệng’ bạn cập nhật máy chủ cho máy chủ biết bạn gửi tin nhắn "Tai" kiểm tra liên tục với máy chủ cập nhật trang bạn với tin nhắn gửi bạn trò chuyện 4.7 Giao diện người dùng nhấp nháy Tạo giao diện người dùng gọn gàng, mượt mà cách sử dụng phổ biến AJAX Nó cho phép người dùng hoàn thành nhiều việc trang Lợi ích việc gấp đơi: Thứ nhất, làm cho việc sử dụng ứng dụng web nhanh dễ dàng cho người dùng; Thứ hai, cắt giảm số lượng yêu cầu bạn phải thực với máy chủ, làm giảm băng thông thời gian tải Một dịch vụ tải lên tệp miễn phí có tên Drop.io sử dụng tốt điều Google thực thúc đẩy với AJAX cách tạo ứng dụng giống máy tính để bàn Google Docs Google Maps 4.8 Tiện ích bên ngồi Khi sử dụng AJAX, trang sử dụng JavaScript không giới hạn máy chủ mà đặt AJAX thực gọi trực tuyến đến máy chủ Đây cách hoạt động số plugin cho Hệ thống quản lý nội dung WordPress tập lệnh khác Google Adsense 4.9 Hộp đèn thay cửa sổ bật lên Ngày nay, trình chặn popup phổ biến lý đáng: popup khó chịu Sử dụng light boxes, popup bên cửa sổ trình duyệt, trình chặn popup khơng thể ngăn chặn chúng khơng gây khó chịu cho người dùng Một số người sử dụng chúng để quảng cáo Chúng sử dụng cho đăng nhập hộp đăng ký nhận thông tin XÂY DỰNG DEMO MINH HỌA : Trước tiên tạo form login sau: sử dụng thư viện jquery chèn vào website Tiếp đến xây dựng code jQuery ajax để thực kiểm tra liệu form gửi liệu form lên server Cuối xây dựng file submit.php để xử lý liệu III KẾT LUẬN : Trong đồ án này, sâu vào nghiên cứu ứng dụng công nghệ AJAX (Asynchronous JavaScript and XML) Chúng tơi tìm hiểu cách AJAX hoạt động, lợi ích mà mang lại cách triển khai AJAX ứng dụng web Chúng tơi thực số ví dụ thực tế để minh họa cách AJAX sử dụng để tải liệu từ máy chủ mà không cần làm tải lại tồn trang web Chúng tơi sử dụng AJAX để tự động cập nhật nội dung trang web, gửi yêu cầu HTTP xử lý liệu trả cách không đồng Trong q trình làm việc với AJAX, chúng tơi gặp phải số thách thức, bao gồm việc xử lý lỗi, xác thực người dùng quản lý tiến trình khơng đồng Tuy nhiên, sau nắm vững AJAX, chúng tơi tận dụng sức mạnh công nghệ để tạo ứng dụng web tương tác phản hồi nhanh chóng Kết đồ án cho thấy AJAX cơng nghệ hữu ích để cải thiện trải nghiệm người dùng ứng dụng web Nó giúp giảm thiểu thời gian tải trang, tăng tính tương tác cung cấp giao diện người dùng mượt mà Đồng thời, AJAX giúp tối ưu hóa việc tải liệu giảm tải cho máy chủ Tuy nhiên, cần lưu ý AJAX lúc giải pháp tốt Việc sử dụng AJAX phụ thuộc vào yêu cầu ứng dụng môi trường triển khai Cần xem xét kỹ lưỡng trước định sử dụng AJAX để đảm bảo đáp ứng yêu cầu đạt hiệu suất mong muốn Trong tương lai, hy vọng tiếp tục nghiên cứu khám phá thêm AJAX, bao gồm kỹ thuật mở rộng JSONP, CORS WebSocket Chúng tìm hiểu thư viện framework mạnh mẽ hỗ trợ AJAX jQuery, React Angular để phát triển ứng dụng web chất lượng cao Tổng kết lại, đồ án giúp hiểu rõ AJAX khả ứng dụng phát triển ứng dụng web Chúng hy vọng công trình hữu ích cho người quan tâm đến AJAX muốn nâng cao kiến thức công nghệ