Công nghệ web - Bài 13: Ajax

Bài 13: Ajax Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » Giới thiệu về Ajax » Ajax trong Asp.Net » Ajax controls » Ajax controls Toolkits Bài 13: Ajax Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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ệ 13.1 Giới thiệu về Ajax Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » Website không sử dụng Ajax 13.1 Giới thiệu về Ajax Client Server Process Process Process Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » Website sử dụng Ajax 13.1 Giới thiệu về Ajax Client Server Ajax Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 13.2 Các đối tượng Ajax 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; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }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();} Ajax Tạo XMLHTTPRequest Gửi Request Nhận KQ 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 » 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({ type: "POST“ , url: "some.ASPX“ , data: { name: "John“ , location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); }); Hàm Ajax Giao thức Trang xử lý Cấu trúc dữ liệu Hàm thao tác dữ liệu đượ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", { name: "John“, time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); Ajax theo Get Dữ liệu Hàm xử lý dữ liệu Trang xử lý 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", { name: "John", time: "2pm" }, function(data) { alert("Data Loaded: " + data); }); Hàm Ajax theo Post Dữ liệu gửi lên phía server 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 Phía server nhận và xử lý dữ liệu public void Page_Load(object S, EventArgs e){ string txt= Request.Form*“name”+; Response.Write(“Chao” + “txt”); } Nhận dữ liệu Gửi về cho Brower