Bài giảng Công nghệ Web - Bài 13: Ajax - 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 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({ 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.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”+; Nhận dữ liệu Response.Write(“Chao” + “txt”); Gửi về cho Brower } Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY