Đang tải... (xem toàn văn)
Ajax là nhóm các công nghệ tạo phát triển ứng dụng web Được sử dụng để tạo các ứng dụng web động. Ajax đã được hỗ trợ trong các trình duyệt từ cách đây hàng chục năm Khái niệm về Ajax được ông Jesse James Garrett đưa ra vào tháng 2 năm 2005 Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ: HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript sử dụng XML, JSON, HTML... để trao đổi và hiển thị dữ liệu
Lập trình Web Ajax Ajax (Asynchronous JavaScript and XML) Lịch sử Ajax • Ajax nhóm công nghệ tạo phát triển ứng dụng web • Được sử dụng để tạo ứng dụng web động • Ajax hỗ trợ trình duyệt từ cách hàng chục năm • Khái niệm Ajax ông Jesse James Garrett đưa vào tháng năm 2005 • Ajax kỹ thuật phát triển web có tính tương tác cao cách kết hợp ngôn ngữ: • HTML (hoặc XHTML) với CSS việc hiển thị thông tin • Mô hình DOM (Document Object Model), thực thông qua JavaScript • sử dụng XML, JSON, HTML để trao đổi hiển thị liệu Ajax (Asynchronous JavaScript and XML) So sánh với web truyền thống TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) So sánh với web truyền thống (2) Christopher L Merrill ©2006 Web Performance, Inc; January 15, 2006; v1.1 Using AJAX to Improve the Bandwidth Performance of Web Applications Scenario/mode First-page size Typical page size Total bandwidth Page-refresh 44k 10k 210k AJAX 47k 2.5k 81k TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) So sánh với web truyền thống (3) TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) So sánh với web truyền thống (4) TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) So sánh với web truyền thống (5) Web truyền thống Ajax web - Yêu cầu người sử dụng gửi - Yêu cầu gửi đến server qua Ajax Engine trực tiếp từ browser đến server qua lời gọi JavaScript HTTP Request - Trong lúc chờ server xử lý, người sử - Người sử dụng tiếp tục gửi yêu cầu dụng không làm với Ajax Engine - Về chất, lần gửi yêu cầu - Chỉ gửi liệu cần thiết phải xử lý browser gửi toàn liệu form lên để server xử lý - Sau server xử lý xong yêu cầu - Sau xử lý xong, server gửi liệu cần sinh trang web gửi thiết browser browser => Gây lãng phí thời gian, đường truyền (do gửi nhiều liệu không cần thiết), hiệu sử dụng thấp, hiển thị không liên tục, thời gian xử lý máy chủ cao => Tiết kiệm thời gian cho người sử dụng, hiệu sử dụng đường truyền cải thiện, hiển thị liên tục, thời gian xử lý máy chủ thấp (do xử lý gửi liệu cần thiết) TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) Ưu, nhược điểm Ajax web Ưu điểm: • Giảm lượng lớn băng thông thời gian nạp trang • Hiển thị liên tục • Làm giảm kết nối đến server Nhược điểm: • Các trang web tạo động không ghi vào lưu lịch sử trình duyệt • Nếu trình duyệt bị vô hiệu hóa JavaScript không hỗ trợ JavaScript không hỗ trợ Ajax, đương nhiên sử dụng Ajax • Thiếu chuẩn Ajax • Mở thức khác cho việc công đoạn mã độc mà nhà phát triển web không kiểm thử hết TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) Các trình duyệt hỗ trợ Ajax • Apple Safari từ 1.2 trở lên • Konqueror • Microsoft Internet Explorer từ 4.0 trở lên • Mozilla/Mozilla Firefox từ 1.0 trở lên • Netscape từ 7.1 trở lên • Opera từ 8.0 trở lên • GreenBrowser 4.3 • Google Chrome tất phiên TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) XMLHttpRequest • Sử dụng đối tượng XMLHttpRequest để thực gửi yêu cầu xử lý đáp ứng • Tạo đối tượng XMLHttpRequest JavaScript: TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) XMLHttpRequest (2) Thuộc tính Ý nghĩa onreadystatechange Trỏ đến hàm xử lý có thay đổi trạng thái yêu cầu readyState Trả giá trị số trạng thái yêu cầu responseText Nhận chuỗi đáp ứng (dạng text) từ phía server responseXML Nhận đáp ứng dạng XML từ phía server status Mã trạng thái đáp ứng từ server statusText Nội dung trạng thái đáp ứng TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) XMLHttpRequest (3) - readyState Giá trị Ý nghĩa Chưa thiết lập yêu cầu Đã thiết lập yêu cầu Đã gửi yêu cầu Đang trả lời Đã trả lời xong TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) XMLHttpRequest (4) – Các phương thức Giá trị Ý nghĩa Abort() Hủy bỏ yêu cầu getAllResponseHeaders() Lấy tất thông tin HTTP headers getResponseHeader("label") Lấy giá trị “label” HTTP header từ response Open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Tạo yêu cầu Send(content) Gửi HTTP request đến server nhận response SetRequestHeader("label", "value") Thiết đặt giá trị cho các “label” HTTP header TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) XMLHttpRequest (5) – responseText Dùng để nhận nội dung dạng text/html server xử lý yêu cầu gửi Muốn sử dụng thuộc tính này, server phải thiết lập thuộc tính ContentType trang text/html (mặc định) TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML) XMLHttpRequest (6) – responseXML.documentElement Dùng để nhận nội dung dạng XML server xử lý yêu cầu gửi Muốn sử dụng thuộc tính này, server phải thiết lập thuộc tính ContentType trang text/xml TOTAL BANDWIDTH SAVINGS > 61% TOTAL BANDWIDTH SAVINGS > 61% Ajax (Asynchronous JavaScript and XML)