Bài giảng Công nghệ Web (ASP.NET): Bài 13 - Lê Quang Lợi
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (696.02 KB, 14 trang )
Bài 13: Ajax
Lê Quang Lợi
Email:
Bài 13: Ajax
» Giới thiệu về Ajax
» Ajax trong Asp.Net
» Ajax controls
» Ajax controls Toolkits
Lê Quang Lợi:
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:
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
Lê Quang Lợi:
Process
Process
Môn học : Công nghệ WEB (ASP.NET)
Server
CNPM-CNTT-ĐHSPKT HY
13.1 Giới thiệu về Ajax
»
Website sử dụng Ajax
Client
Ajax
Server
Lê Quang Lợi:
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:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
13.2 Các đối tượng Ajax (ví dụ)
<script type="text/javascript">
Tạo XMLHTTPRequest
function loadXMLDoc(url) { var xmlhttp;
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
</script>
Ajax
<button onclick="loadXMLDoc('ajax_info.aspx');“ value=“clickMe”/>
Lê Quang Lợi:
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:
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:
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:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
13.4 jAjax
Hàm Ajax
$.ajax({
type: "POST“ ,
Giao thức
url: "some.ASPX“ ,
data: { name: "John“ ,
location: "Boston" }
Trang xử lý
Cấu trúc dữ liệu
}).done(function( msg ) {
alert( "Data Saved: " + msg );
Hàm thao tác dữ liệu
được trả về
});
Lê Quang Lợi:
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" },
Dữ liệu
function(data){
alert("Data Loaded: " + data);
});
Lê Quang Lợi:
Hàm xử lý dữ liệu
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" },
Hàm Ajax theo Post
Dữ liệu gửi lên phía
server
function(data) {
alert("Data Loaded: " + data);
Hàm xử lý dữ liệu
});
Lê Quang Lợi:
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
}
Lê Quang Lợi:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
