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.

Bài 13: Ajax

Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn

» Giới thiệu về Ajax

» Ajax trong Asp.Net

» Ajax controls

» Ajax controls Toolkits

Bài 13: Ajax

» AJAX : A synchronous J avascript A nd X ML

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

» Website không sử dụng Ajax

13.1 Giới thiệu về Ajax

Client

Server

Process

Process

Process

» Website sử dụng Ajax

13.1 Giới thiệu về Ajax

Client

Server

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

Δ 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

13.2 Các đối tượng Ajax (ví dụ)

<script type="text/javascript">

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() ;}

</script> <p id="p1"> Ajax</p>

<button onclick =" loadXMLDoc('ajax_info.aspx') ;“ value=“clickMe”/>

Tạo XMLHTTPRequest

Gửi Request

Nhận KQ

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

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

13.4 jAjax

» ajax : thiết lập và tương tác theo ajax

» 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");

});

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ề

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ý

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

13.4 jAjax

Phía server nhận và xử lý dữ liệu

string txt= Request.Form*“name”+ ;

Response.Write(“Chao” + “txt”);

}

Nhận dữ liệu Gửi về cho Brower