1 Lê Đình Thanh Bộ môn Các Hệ thống Thông tin Chuyên đề LẬP TRÌNH ỨNG DỤNG WEB 2 Xử lý trang web nâng cao với AJAX Bài 5 3 Nội dung • AJAX là gì? • Hoạt động của ứng dụng web với Ajax • So sánh web truyền thống với Ajax web • Các trình duyệt hỗ trợ Ajax • Sử dụng Ajax với gửi/nhận text • Sử dụng Ajax với gửi/nhận xml Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 4 AJAX là gì? • AJAX (viết tắt của Asynchronous Javascripts and XML) là một kỹ thuật kết hợp một số công nghệ web để xây dựng các ứng dụng web mà tương tác giữa người dùng với ứng dụng được thực hiện không đồng bộ. Các công nghệ bao gồm: – Hiển thị dựa trên chuẩn sử dụng HTML và CSS – Hiển thị và tương tác động sử dụng DOM – Trao đổi và xử lý dữ liệu sử dụng XML – Thu nhận dữ liệu không đồng bộ sử dụng XMLHttpRequest – Kết hợp các công nghệ sử dụng JavaScript Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 5 Web truyền thống <> Ajax Web Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 6 Hoạt động của web truyền thống :Web Browser :Web Server Yêu cầu 1 Trang 1 Yêu cầu 2 Trang 2 Yêu cầu 3 Trang 3 Tạo trang Tạo trang mới Tạo trang mới Hiển thị trang 1 Hiển thị trang 2 Hiển thị trang 3 Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 7 Hoạt động của Ajax web :Web Browser :Web Server Tạo trang Xử lý Xử lý Hiển thị trang Sửa đổi trang Sửa đổi trang :Ajax engine Yêu cầu 1 Trang Yêu cầu 2 Yêu cầu 2 Data 1 Data 1 Yêu cầu 3 Yêu cầu 3 Data 2 Data 2 Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 8 Web truyền thống • Yêu cầu của người dùng được gửi trực tiếp từ browser đến Web server thông qua HTTP request • Khi nhận được HTTP request, Web server xử lý yêu cầu, sinh ra trang HTML mới, rồi gửi toàn bộ trang HTML (chứa HTML và CSS) mới đến browser. Browser xóa trang cũ và hiển thị trang mới. • Từ khi gửi yêu cầu đi, người dùng không được làm thêm bất kỳ thao tác gì cho đến khi trang HTML mới được gửi đến client: mỗi yêu cầu phải được giải quyết dứt điểm trước khi có yêu cầu tiếp theo = đồng bộ. Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 9 Web truyền thống Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 10 Web truyền thống: Hạn chế • Khi người dùng thao tác thì server “nghỉ” và ngược lại – Lãng phí thời gian, hiệu quả sử dụng thấp – Người dùng phải vừa làm vừa đợi: gửi yêu cầu → đợi → nhận kết quả → gửi yêu cầu → đợi → … ⇒ Người dùng phải đợi lâu nếu yêu cầu xử lý lớn và server mất nhiều thời gian xử lý + Hiển thị không liên tục, “nhấp nháy” gây khó chịu (! HCI). • Toàn bộ trang HTML mới được gửi từ server đến client – Không cần thiết vì có thể nhiều chi tiết trên trang mới vẫn như trang cũ – Lượng thông tin trao đổi giữa client-server lớn ⇒ chi phí truyền thông (thời gian, băng thôn) lớn. Lê Đình Thanh, Xử lý trang web nâng cao với AJAX [...]... AJAX 27 Thực hành kỹ thuật AJAX AJAX đã được sử dụng từ lâu trước khi Google làm cho nó trở nên phổ biến Ngày nay, những ứng dụng web cao cấp (như các trang của Google) đều được làm theo kỹ thuật AJAX Để sử dụng tốt kỹ thuật AJAX Nắm vững nội dung một trang HTML Hiểu rõ vai trò “trình thông dịch” của web browser Sử dụng javascript để truy cập các điều khiển HTML Hiểu về cấu trúc tài liệu XML Hiểu về. .. chưa cần được giải quyết xong thì người dùng đã có thể đưa ra yêu cầu khác = Trao đổi giữa Browser với Ajax engine và giữa Ajax engine với Server để thực hiện các yêu cầu diễn ra không đồng bộ Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 11 Ajax Web Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 12 Ajax Web: Ưu điểm • Người dùng và server thực hiện một cách song hành – Không lãng phí thời gian, hiệu.. .Ajax Web • Ajax engine được cài trên client, làm nhiệm vụ giao tiếp trung gian giữa browser với web server – Browser gửi yêu cầu đến Ajax engine bằng lời gọi Javascript – Ajax engine chuyển yêu cầu của Client thành HTTP request và gửi cho web server – Web server xử lý yêu cầu rồi gửi kết quả cho Ajax engine ở dạng XML – Ajax engine biên dịch XML thành HTML và... thông) truyền thông Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 13 Vì sao dùng Ajax • Để tạo ra các ứng dụng web – – mà giao tiếp của nó với người dùng diễn ra như giao tiếp của ứng dụng Winform với người dùng: liên tục hiệu quả trong sử dụng và trong truyền thông Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 14 Lịch sử Ajax • Từ Ajax được ông Jesse James Garrett tạo ra và dùng lần đầu tiên vào... trở lên Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 16 Sử dụng AJAX • Sử dụng đối tượng Javascript XMLHttpRequest để gửi yêu cầu đến server và lấy dữ liệu về từ server • Sau khi XmlHttpRequest nhận được dữ liệu từ server, sử dụng javascript để sửa đổi trang web trên client với dữ liệu mới nhận được Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 17 Lấy đối tượng XMLHttpRequest function getXmlHttpObject()... Xử lý trang web nâng cao với AJAX 20 XMLHttpRequest.responseText Nội dung dạng text/html do server xử lý yêu cầu và gửi về Muốn sử dụng thuộc tính này, server phải thiết lập thuộc tính ContentType của trang là text/html (mặc định) Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 21 XMLHttpRequest responseXML.documentElement Nội dung dạng XML do server xử lý yêu cầu và gửi về Muốn sử dụng thuộc tính này,... web nâng cao với AJAX 22 Gửi yêu cầu về server xmlHttp.open(method, url, asynchronous); xmlHttp.send(null); Ví dụ: xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 23 Server gửi dữ liệu dạng text this.Response.Expires = -1; //Khong de cached int time = 100; this.Response.Write(time); Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 24 Nhận và... Garrett tạo ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 năm trước • Ajax đang và sẽ được sử dụng rộng rãi bởi Google, Microsoft, Mozzila, … Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 15 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... ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert(“Trinh duyet khong ho tro AJAX! "); } } } return xmlHttp; } Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 18 XMLHttpRequest::readyState rS Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 0 Chưa thiết lập yêu cầu 1 Đã thiết lập yêu cầu 2 Đã gửi yêu cầu 3 Đang trả lời 4 if(xmlHttp.readyState= =4) { // Da... Thanh, Xử lý trang web nâng cao với AJAX 25 Server gửi dữ liệu dạng XML this.Response.Expires = -1; //Khong de cached this.Response.Write("") this.Response.Write("") this.Response.Write("" &rs.fields("companyname")& "") this.Response.Write("") Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 26 Nhận và xử lý XML function . cao với AJAX Bài 5 3 Nội dung • AJAX là gì? • Hoạt động của ứng dụng web với Ajax • So sánh web truyền thống với Ajax web • Các trình duyệt hỗ trợ Ajax •. Ajax • Sử dụng Ajax với gửi/nhận text • Sử dụng Ajax với gửi/nhận xml Lê Đình Thanh, Xử lý trang web nâng cao với AJAX 4 AJAX là gì? • AJAX (viết tắt