Bài giảng Công nghệ Web (ASP.NET): Bài 13 - Lê Quang Lợi

Bài 13 cung cấp những kiến thức cơ bản về Ajax. Các nội dung chính được trình bày trong chương này gồm có: Giới thiệu về Ajax, Ajax trong Asp.Net, Ajax controls, Ajax controls Toolkits. Mời các bạn cùng tham khảo để biết thêm các nội dung chi tiết.
Nội dung trích xuất từ tài liệu:
Bài giảng Công nghệ Web (ASP.NET): Bài 13 - Lê Quang Lợi Bài 13: Ajax Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Bài 13: Ajax » Giới thiệu về Ajax » Ajax trong Asp.Net » Ajax controls » Ajax controls Toolkits Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.1 Giới thiệu về Ajax » AJAX: Asynchronous Javascript And XML » Ajax là sự tích hợp của các công nghệ Javascript + Server Script + XML » Ajax là kỹ thuật tạo web động, đẩy nhanh tốc độ truy xuất » Không cần tải toàn bộ trang (tải phần nhỏ trong trang) » Sử dụng: XMLHttpRrequest, XMLHttpResponse » Xây dựng ứng dụng theo: Rick Internet Application » Lợi ích: Nhanh hơn, thân thiện hơn, hiệu ứng tốt hơn Chú ý: Ajax không phải là một công nghệ Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.1 Giới thiệu về Ajax » Website không sử dụng Ajax Client Process Process Process Server Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.1 Giới thiệu về Ajax » Website sử dụng Ajax Client Ajax Server Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.2 Các đối tượng Ajax » XMLHttpRequest: Δ Tạo các yêu cầu tới server: dạng POST/GET với URL Δ Cung cấp thông tin yêu cầu cho server Δ Các hàm:  open(method,url,async); // Mở một request tới server  Send(); // Gửi Request tới server » XMLHttpResponse Δ Cung cấp dữ liệu trả về cho Client triệu gọi Δ Dữ liệu trả về: Text, XML, jSon Δ Hàm:  ResponseText: trả về dữ liệu dạng Text  ResponseXML: Trả về dữ liệu dạng XML Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.2 Các đối tượng Ajax (ví dụ) function loadXMLDoc(url) { var xmlhttp; Tạo XMLHTTPRequest if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); Nhận KQ }else { // code for IE6, IE5 xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('p1').innerHTML=xmlhttp.ResponseText; } } xmlhttp.open('GET',url,true);xmlhttp.send();} Gửi Request Ajax 13.3 Ajax trong ASP.NET » ASPX hỗ trợ các server controls làm việc với Ajax » Cho phép sử dụng Ajax trên các servercontrols » Update panel: Chứa Control sử dụng Ajax » ScriptManager: Quản lý mã Ajax trên ASPX Chú ý: một trang chỉ có một ScriptManager Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.3 Ajax trong ASP.NET(ajax control toolkits) » Tập các control được xây dựng sẵn trong ASPX » Nhiều tính năng thuận tiện » Hỗ trợ tương tác hệ thống qua ajax » Tiết kiệm chi phí : mã nguồn sẵn » Thư viện khác: jQuery Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.4 jAjax » jQuery hỗ trợ các hà get và jAjax theo cơ chế Ajax » ajax: thiết lập và tương tác theo ajax » get: Thiết lập ajax theo phương thức Get » post: thiết lập ajax theo phương thức Post ví dụ: $.ajax({ url: 'test.html', context: document.body }).done(function() { $(this).addClass('done'); }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.4 jAjax $.ajax({ Hàm Ajax type: 'POST“ , Giao thức url: 'some.ASPX“ , Trang xử lý data: { name: 'John“ , location: 'Boston' } Cấu trúc dữ liệu }).done(function( msg ) { Hàm thao tác dữ liệu alert( 'Data Saved: ' + msg ); được trả về }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.4 jAjax Cú pháp: $.get(‘url’,,data},function(result), … -); $.get ('test.ASPX', Ajax theo Get { name: 'John“, Trang xử lý time: '2pm' }, function(data){ Dữ liệu alert('Data Loaded: ' + data); }); Hàm xử lý dữ liệu Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13.4 jAjax Cú pháp: $.post(‘url’,,data},function(result){ … }); $.post('test.ASPX', Hàm Ajax theo Post { name: 'John', time: '2pm' }, Dữ liệu gửi lên phía server function(data) { Hàm xử lý dữ liệu alert('Data Loaded: ' + data); }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 13. ...