Ajax control toolkit
0 likes614 views
Tài liệu trình bày về bảng điều khiển Ajax Control Toolkit trong ASP.NET, giải thích về cấu trúc và cách thức hoạt động của Ajax trong việc xây dựng ứng dụng web tương tác. Nó cũng đề cập đến ưu điểm và nhược điểm của việc sử dụng Ajax, cùng với các đoạn mã ví dụ để thao tác với dữ liệu qua Ajax và xử lý phản hồi từ server. Cuối cùng, tài liệu giới thiệu cách sử dụng các thành phần như ScriptManager và UpdatePanel để cải thiện hiệu suất và khả năng phản hồi của các ứng dụng web.
![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;](https://image.slidesharecdn.com/ajaxcontroltoolkit-121214215305-phpapp02/85/Ajax-control-toolkit-10-320.jpg)
Ajax control toolkit
- 1. AJAX Control Toolkit Hoàng Anh Tú
- 2. Nội dung Introduction to AJAX AJAX Control AJAX & ASP.NET Toolkit AJAX Control Toolkit
- 3. Ứng dụng AJAX £ Xây dựng các ứng dụng web tương tác với người dùng
- 4. Kiến trúc Client – Server Gửi request đến server Xử lý request Xóa dữ liệu HTTP Request trên màn hình Nạp nội dung mới HTTP Response lên màn hình Client Server Vẽ lại Phản hồi toàn bộ màn hình request từ client
- 5. AJAX Gửi request bằng Javascript Chỉ nạp dữ liệu cần thiết Trao đổi dữ liệu bằng XML
- 6. 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
- 7. 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"); }
- 8. 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;
- 9. AJAX & Javascript Gửi request bất đồng bộ xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // handle response data document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET",“http://localhost/ajax.aspx",true); xmlhttp.send();
- 10. 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;
- 11. AJAX & ASP.NET
- 12. AJAX & ASP.NET ASP.NET 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 Javascript Libraries - Sử dụng toàn bộ mã nguồn javascript - Linh động trong cài đặt - Thời gian cài đặt nhanh
- 13. ASP.NET AJAX Client-side Server-side • Thư viện javascript • Server control • Sử dụng thư viện javascript ở client- side
- 14. ASP.NET AJAX Client-side Client-side Core Libraries - MicrosoftAjax.js • Thư viện javascript - MicrosoftAjaxWebForms.js - MicrosoftAjaxTimer.js Hơn 100 thư viện nhỏ - Lưu thông tin globalization Lưu trong System.Web.Extens ions.dll
- 15. ASP.NET AJAX Server-side Server-side ScriptManager • Server control • Sử dụng thư viện javascript ở client-side Tạo các liên kết đến các thư viện javascript cần thiết
- 16. UpdatePanel Chia trang web Partial Rendering thành nhiều phần nhỏ Request trong từng phần chỉ làm refresh phần đó Mỗi phần đặt trong một UpdatePanel <asp:UpdatePanel ID="UpdatePanel1" runat="server"> </asp:UpdatePanel>
- 18. UpdatePanel - Example Update phần trên Update cả 2 phần
- 19. 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> Client-side code <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) { Server-side code DateTimeLabel1.Text = DateTime.Now.ToString(); DateTimeLabel2.Text = DateTime.Now.ToString(); }
- 20. UpdatePanel – Example Demo
- 22. AJAX Control Toolkit http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ ASP.NET AJAX extend ASP.NET AJAX Control Toolkit
- 23. Get started Install
- 24. Hello AJAX Control Toolkit <asp:ScriptManager ID=“sm" runat="server" / > <cc1:Editor ID="Editor1" runat="server" />
- 25. 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>
- 26. Calendar Control