Bài giảng ADO.NET Ajax do Lương Trần Hy Hiến biên soạn cung cấp cho các bạn những kiến thức về khái niệm Ajax; cơ chế truyền thông đồng bộ; cơ chế truyền thông bất đồng bộ; so sánh hai cơ chế; phân tích mã Ajax; demo; hướng dẫn thực hành.
ASP.NET AJAX Lương Trần Hy Hiến Agenda AJAX gì? Cơ chế truyền thơng đồng Cơ chế truyền thông bất đồng So sánh chế Phân tích mã AJAX Demo Hướng dẫn thực hành AJAX gì? Asynchronous JavaScript and XML Kỹ thuật tương tác với server theo chế bất đồng Nền tảng AJAX HTML CSS JavaScript (chủ chốt) XML Cơ chế synchronization Cơ chế asynchronization So sánh sync async XMLHttpRequest Là đối tượng cho phép tạo requests nhận response theo chế bất đồng (bằng mã javascript) mà khơng địi hỏi thao tác submit người dùng XMLHttpRequest cài đặt Microsoft năm 1999 ActiveX IE trở thành nhân tố chuẩn cho trình duyệt Hoạt động XMLHttpRequest Tạo thể (instance) đối tượng XMLHttpRequest, giả sử Obj Sử dụng đối tượng Obj để tạo lời gọi (call) bất đồng tới server định nghĩa hàm “gọi làm” – callback Hàm thực thi tự động nhận response từ server Đọc response server hàm callback Cập nhật lại trang sử dụng liệu nhận Quay lại bước Tạo XMLHttpRequest XMLHttpRequest cài đặt khác trình duyệt Đối với IE: Obj = new ActiveXObject(“Microsoft.XMLHttp”); Đối với trình duyệt khác: FF, Chrome, Opera… Obj = new XMLHtttpRequest(); Các phương thức XMLHttpRequest 10 open(method, server, async): đặt tham số cho request Method: Quy định hình thức vận chuyển liệu đến server Có hình thức: POST/GET Server: Trang web nhận xử lý tham số sau trả kết client thơng qua thuộc tính responseText Async: Qui đị nh chế truyền thông (true: bất đồng bộ, false: đồng bộ) send: gửi request đến server GET/POST 11 GET: Obj.open(“GET”, “demo.aspx?id=a&cat=b”, true); Obj.onreadystatechange = ten_ham_callback; Obj.send(null); POST: Obj.open(“POST”, “demo.aspx”, true); Obj.onreadystatechange = handleRequestStateChange; Obj.send(“id=a&cat=b”); Các thuộc tính XMLHttpRequest 12 13 14 Ajax Extension • • • • ScriptManager Timer UpdatePanel UpdateProgress ...Agenda AJAX gì? Cơ chế truyền thơng đồng Cơ chế truyền thông bất đồng So sánh chế Phân tích mã AJAX Demo Hướng dẫn thực hành AJAX gì? Asynchronous JavaScript and... AJAX gì? Asynchronous JavaScript and XML Kỹ thuật tương tác với server theo chế bất đồng Nền tảng AJAX HTML CSS JavaScript (chủ chốt) XML Cơ chế synchronization Cơ chế asynchronization So sánh sync... Obj.onreadystatechange = handleRequestStateChange; Obj.send(“id=a&cat=b”); Các thuộc tính XMLHttpRequest 12 13 14 Ajax Extension • • • • ScriptManager Timer UpdatePanel UpdateProgress