AJAX Control Toolkit Hoàng Anh Tú

Nội dung

Introduction to AJAX

AJAX & ASP.NET

AJAX Control Toolkit

AJAX Control Toolkit

Ứng dụng AJAX £ Xây dựng các ứng dụng web tương tác với

người dùng

Kiến trúc Client – Server

Client Server

HTTP Request

HTTP Response

Gửi request đến server

Phản hồi request từ

client

Xử lý request

Xóa dữ liệu trên màn hình

Nạp nội dung mới lên màn hình

Vẽ lại toàn bộ màn hình

AJAX Gửi request

bằng Javascript

Trao đổi dữ liệu bằng

XML

Chỉ nạp dữ liệu cần thiết

AJAX – Hạn chế £ Tăng thời gian phản hồi từ server £ Khó xác định địa chỉ nội dung trang web

•  Khó trở về trang trước đó •  Không thể lưu URL nội dung trang web

£ Không thể tìm thấy bằng các search engine £ Tạo nên các lỗ hổng bảo mật

AJAX & Javascript Tạo đối tượng request

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

AJAX & Javascript Gửi dữ liệu đồng bộ

xmlhttp.open("GET",”http://localhost/ajax.aspx",false); xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

AJAX & Javascript Gửi request bất đồng bộ

xmlhttp.open("GET",“http://localhost/ajax.aspx",true); xmlhttp.send();

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // handle response data document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

AJAX & Javascript Xử lý dữ liệu trả về

document.getElementById("myDiv").innerHTML=xmlhttp.responseText

xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;

AJAX & ASP.NET

AJAX & ASP.NET

ASP.NET Libraries

Javascript Libraries

- Không cần sử dụng Javascript - Chỉ áp dụng được cho 1 số tình huống cụ thể qua các control - Giảm thời gian cài đặt

- Sử dụng toàn bộ mã nguồn javascript - Linh động trong cài đặt - Thời gian cài đặt nhanh

ASP.NET AJAX

Client-side •  Thư viện javascript

Server-side •  Server control •  Sử dụng thư viện

javascript ở client-side

ASP.NET AJAX Client-side

Core Libraries - MicrosoftAjax.js - MicrosoftAjaxWebForms.js - MicrosoftAjaxTimer.js

Client-side •  Thư viện javascript

Hơn 100 thư viện nhỏ - Lưu thông tin globalization

Lưu trong System.Web.Extens

ions.dll

ASP.NET AJAX Server-side

Server-side

•  Server control •  Sử dụng thư viện

javascript ở client-side

ScriptManager

Tạo các liên kết đến các thư

viện javascript cần thiết

UpdatePanel

Partial Rendering

Request trong từng phần chỉ làm refresh phần đó

Chia trang web thành nhiều phần nhỏ

Mỗi phần đặt trong một UpdatePanel

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> </asp:UpdatePanel>

UpdatePanel - Example

UpdatePanel - Example

Update phần trên

Update cả 2 phần

UpdatePanel – Example Code <asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel runat="server" ID="UpdatePanel“ UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="UpdateButton2" EventName="Click" /> </Triggers> <ContentTemplate> <asp:Label runat="server" ID="DateTimeLabel1" /> <asp:Button runat="server" ID="UpdateButton1" OnClick="UpdateButton_Click" Text="Update" /> </ContentTemplate> </asp:UpdatePanel>

<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional"> <ContentTemplate> <asp:Label runat="server" ID="DateTimeLabel2" /> <asp:Button runat="server" ID="UpdateButton2" OnClick="UpdateButton_Click" Text="Update" /> </ContentTemplate> </asp:UpdatePanel>

protected void UpdateButton_Click(object sender, EventArgs e) { DateTimeLabel1.Text = DateTime.Now.ToString(); DateTimeLabel2.Text = DateTime.Now.ToString(); }

Server-side code

Client-side code

UpdatePanel – Example Demo

AJAX CONTROL TOOLKIT

AJAX Control Toolkit

ASP.NET AJAX

ASP.NET AJAX Control Toolkit

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

extend

Get started

Install

Hello AJAX Control Toolkit <asp:ScriptManager ID=“sm" runat="server" /> <cc1:Editor ID="Editor1" runat="server" />

Calendar Control <asp:toolkitscriptmanager ID="ScriptManager1" runat="server"></asp:toolkitscriptmanager> <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> <asp:CalendarExtender ID="ceDate" runat="server“ TargetControlID="txtDate“> </asp:CalendarExtender>

Calendar Control