Chương 8 - Công nghệ và dịch vụ Web. Những nội dung chính trong chương gồm: giới thiệu các ứng dụng phân tán, kiến trúc hướng dịch vụ, Web service & lập trình Web service, giới thiệu Ajax, dùng Ajax với đối tượng XmlHttpRequest, dùng Ajax với thư viện AJax ASP.net. Mời các bạn cùng tham khảo.
Trang 1Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com
1
LẬP TRÌNH WEB ASP.NET VỚI C#
Trang 2Chương 8 Công Nghệ Và Dịch Vụ Web
8.1 Dịch vụ web – Webservice
8.2 Công nghệ web 2 – Ajax
Trang 48.1.1 CÁC ỨNG DỤNG PHÂN TÁN
Máy tính
Dữ liệu
Ứng dụng phân tán
Dữ liệu
Trang 5327
8.1.1 CÁC ỨNG DỤNG PHÂN TÁN
Khoa CNTT Trường CĐ CNTT TP.HCM
Xem thông tin thời tiết
Thông tin ngoại tệ
Dịch tự động
Kiểm tra thông tin thẻ
Xem thông tin sân bay
Đặt phòng khách sạn
…
Trang 68.1.2 VẤN ĐỀ KHI THIẾT KẾ HỆ PHÂN TÁN
Trang 7329
8.1.3 WEB SERVICE
Khoa CNTT Trường CĐ CNTT TP.HCM
WEB SERVICE LÀ GÌ?
Trang 88.1.3.1 ĐỊNH NGHĨA
• Là một tập các phương thức được gọi từ xa thông qua một địa chỉ URL do một tổ chức, cá nhân cung cấp
• Giao tiếp theo định dạng chuẩn XML
• Được sử dụng để tạo các ứng dụng phân tán
Trang 9331
8.1.3.2 ĐẶC ĐIỂM
Khoa CNTT Trường CĐ CNTT TP.HCM
1 Không phụ thuộc vào ngôn ngữ lập trình
3 Hỗ trợ thao tác giữa các thành phần không
đồng nhất
4 Chi phí phát triển thấp
5 Dễ bảo trì
Trang 108.1.3.3 KIẾN TRÚC WEBSERVICE
Service Broker
Trang 148.1.3.4 Thử nghiệm
Kết quả :
Trang 15337
8.1.3.4 ngôn ngữ WSDL
Khoa CNTT Trường CĐ CNTT TP.HCM
WSDL (Web Service Description Languague)
Trang 168.1.3.5 SỬ DỤNG WEBSERVICE
Sử dụng webservice trong ASP.NET
protected void Button1_Click(object sender, EventArgs e) {
CongHaiSo c2s = new CongHaiSo();
Trang 188.1.3.5 SỬ DỤNG WEBSERVICE
Bước 2 : Nhập thông tin đường dẫn
Trang 19341
8.1.3.4 SỬ DỤNG WEBSERVICE
Khoa CNTT Trường CĐ CNTT TP.HCM
Trang 208.1.3.5 SỬ DỤNG WEBSERVICE
Bước 3 : Thiết kế giao diện
Trang 21343
8.1.3.4 SỬ DỤNG WEBSERVICE
Khoa CNTT Trường CĐ CNTT TP.HCM
Bước 4: Xử lý code :
Trang 228.1.3.5 SỬ DỤNG WEBSERVICE
Kết quả được lấy ngày 10/11, luc 12h00
Trang 23345
8.1.3.6 BÀI TẬP
Khoa CNTT Trường CĐ CNTT TP.HCM
Tìm hiểu cách viết webservice kết nối CSDL
Tìm cách sử dụng các nguồn webservice hiện đang
có trên internet
Ứng dụng vào đồ án ASP.NET
Trang 248.2 CÔNG NGHỆ WEB AJAX
Trang 25347
8.2 CÔNG NGHỆ WEB AJAX
Khoa CNTT,Trường CĐ CNTT TP.HCM
Trang 268.2.1.1 Giới thiệu Ajax
• Mỗi khi Browser gửi yêu cầu về server, bắt buột phải
reload lại toàn bộ trang web
• Công nghệ Ajax giúp Browser gửi yêu cầu đến server
và nhận respone mà không cần load lại toàn bộ trang
• Công nghệ này có thể thực hiện bất đồng bộ (người
dùng vẫn có thể tương tác với trang web trong khi vẫn chờ nhận response từ server)
Trang 27349
8.2.1.1 Giới thiệu Ajax
Trường CĐ CNTT TpHCM
Trang 288.2.1.2 Ajax là gì?
Ajax : Asynchronous Javascript and XML
(Truy cập dữ liệu không đồng bộ bằng Javascript & XML )
Javascript được các nhà phát triển đánh giá rất cao
trang
Trang 29351
8.2.1.3 Mô hình AJAX
Trường CĐ CNTT TpHCM
<= Mô hình Client-Server thông thường
Mô hình Client-Server AJAX =>
Trang 308.2.1.3 Đặc điểm của Ajax
nội dung trang web với người dùng
cho phép hiển thị nội dung và các tương tác liên quan DOM mở ra nhiều cách thức mạnh cho người dùng khi muốn truy cập và thao tác với đối tượng nằm trong
một văn bản bất kỳ
Trang 31353
8.2.1.3 Đặc điểm của Ajax
Trường CĐ CNTT TpHCM
kiểu định dạng cho dữ liệu, cho phép thao tác, truyền tải và trao đổi giữa client và server
một cách hiệu quả (JavaScript ở đây là ECMAScript, chuẩn của ECMA, không phải của MS)
Trang 32Web Application truyền thống
webserver sẽ gửi trả response chứa các thông tin yêu cầu dưới dạng HTML và CSS
mới có thể thao tác tiếp
Trang 33355
Web AJAX Application
Trường CĐ CNTT TpHCM
=> giảm tải rất nhiều cho Server
tức thời (không cần nạp lại trang)
giao diện tốt hơn nhiều và giảm đáng kể dung lượng phải nạp
Trang 34Web AJAX Application
tiếp này
AJAX Engine thực hiện Thay vì gửi trả dữ liệu về dưới dạng HTML và CSS cho trình duyệt, web server sẽ gửi trả về dạng XML và AJAX Engine sẽ tiếp nhận, phân
tách và chuyển hóa thành XHTML và CSS cho trình
Trang 38DOM – Document Object Model
• Mô hình đối tượng tài liệu (thường có dạng cây), dùng
để mô tả và truy xuất các thành phần trong tài liệu
Trang 41363
Trường CĐ CNTT TpHCM
Trang 428.2.3 Đối tượng XmlHttpRequest
• Một đối tượng Javascript cho phép tạo các HTTP
request không đồng bộ
• XmlHttpRequest sẽ tạo các request từ một sự kiện
Javascript
• Một hàm gọi ngược (call back) của Javascript được
gọi tại mỗi trạng thái của Request và nhận đáp trả Response từ Server
Trang 44Các phương thức của XmlHttpRequest
Trang 45Các thuộc tính của XmlHttpRequest
Trường CĐ CNTT TpHCM
367
Trang 468.2.5 Lập trình AJAX
Các bước thực hiện :
1 Tạo một trang web
2 Tạo một hàm để lấy đối tượng XmlHttpRequest
3 Viết hàm để bắt tình trạng của XmlHttpRequest
4 Tạo một hàm xử lý kết quả trả về
5 Kết nối tất cả vào trang web
Trang 47369
Ví dụ 1 : Thay đổi ngày giờ
Trường CĐ CNTT TpHCM
369
Trang 48Ví dụ 1 : Thay đổi ngày giờ
Tạo trang web hello.html
Trang 49function Hello () { … }
function GetXmlHttpObject () { … }
</script>
</head>
<body>
<a href="javascript:Hello();">Click here to load data</a>
<div id="result" align="center">Content of hello file</div>
</body>
</html>
Trang 52}
}
Trang 54Ví dụ 1 : (tt)
Kết quả :
Khi click vào liên kết nội dung trong thẻ div được tải lại từ server nhưng không tải cả trang web
Trang 55377
Chú ý
Trường CĐ CNTT TpHCM
• Nếu dữ liệu từ server gửi về là dữ liệu có cấu trúc :
Xml, DataTable, Array,… thì hàm handle phải được viết lại để phân tích dữ liệu đó rồi mới xuất ra màn hình
Trang 56var thamso = "a=" + a + "&b=" + b;
var url = "Conghaiso.aspx?"+thamso;
Trang 57function Tinhtong()
{ … } function GetXmlHttpObject() { … }
</script>
</head>
<body>
<div>Nhập số A :</div> <input id="txt_a" type="text" /><br />
<div>Nhập số B :</div> <input id="txt_b" type="text" /><br />
<input id="Button1" type="button" value="Tính tổng" onclick="Tinhtong()" />
Trang 583 Ajax với đối tượng ASP.NET AJAX
• ASP.NET AJAX là một thành phần mở rộng của
ASP.NET 2.0, cho phép phát triển các ứng dụng web với tính năng AJAX
• ASP.NET bao gồm một framework các script client, các
control server, …
• Việc sử dụng ASP.NET đơn giản nhất là sử dụng bộ
thư viện control của ASP.NET
Trang 59• Hiện tại bộ control AJAX có 3 phiên bản
• Toolkit 2.0 : Net Framework 1.1, 2.0 (VS 2003, 2005)
• Toolkit 3.5 : Net Framework 3.0, 3.5 (VS 2008)
• Toolkit 4 : Net Framework 4.0 (VS 2010)
Trang 60Cài đặt ASP.NET AJAX control toolkit (tt)
• Sau khi tải bộ Toolkit, mở VS tương
ứng và kéo file AjaxControlToolkit.dll
vào trong thanh toolbox
• Tạo một project Website với
Framework tương ứng và mở thanh
toolbox (sẽ thấy các control AJAX)
Trang 61383
Ứng dụng 1 : Sách theo giá
Trường CĐ CNTT TpHCM
• Trang liệt kê sách theo giá khi chưa sử dụng AJAX
• Mỗi khi chọn giá, trang web phải thực hiện mã lệnh ở server,
rồi load toàn bộ trang web lại để hiện thị danh sách mới
Trang 62• Kéo thả control Script Manager vào trang web
(các trang web có sử dụng AJAX cần phải có control Script Manager để quản lý script)
• Kéo thả control Update Panel vào trang web
• Kéo các control là nguyên nhân của việc load lại trang web và
Trang 64Ứng dụng 1 : CHÚ Ý
làm thêm các bước sau :
hiện hành
Website->ASP.NET AJAX-Enabled Web Site->OK
sau đó copy nội dụng của file Webconfig ở Website mới vào file WebConfig của Website củ (chỉnh lại chuỗi kết nối