Một kỹ thật lập trình đình đám mà không nghiên cứu Qua viết hi vọng giúp bạn hiểu vững nguyên tắc lập trình Ajax mơi trường Net AJAX gì? AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript XML không đồng bộ), công cụ cho phép tăng tốc độ ứng dụng web cách cắt nhỏ liệu hiển thị cần thiết, thay tải tải lại tồn trang web AJAX khơng phải cơng nghệ đơn lẻ mà kết hợp nhóm cơng nghệ với Trong đó, HTML CSS đóng vai hiển thị liệu, mơ hình DOM trình bày thơng tin động, đối tượng XMLHttpRequest trao đổi liệu không đồng với máy chủ web, XML định dạng chủ yếu cho liệu truyền liệu Javacript có nhiệm vụ lắp ráp chúng lại với Hiển nhiên để phát triển ứng theo phong AJAX cần phải biết JavaScript, DOM, CSS, HTML, XML… Điều thật khơng dễ dàng Thật may có nhiều thư viện cho phép phát triển ứng dụng AJAX nhanh đơn giản nhiều (Chúng ta tìm hiểu thư viện sau ;-) ) Ví dụ Trong ví dụ tơi trình bày sau giúp làm quen với cách mà AJAX làm việc, tất nhiên ví dụ không dùng thư viện xây dựng sẵn AjaxEx1.aspx Thí dụ Ajax Hãy chọn nhóm thư mục Chọn thư mục: Chọn viết: var superCategories = document.getElementById(""); var categories = document.getElementById(""); var articles = document.getElementById(""); var results = document.getElementById(""); var HttpRequest = false; if (window.XMLHttpRequest) // Internet Explorer { HttpRequest = new XMLHttpRequest(); } else // Other browsers { HttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } /// ///Lấy liệu thư mục viết từ server đưa vào dropdown /// function getCategories(superCategoriesID) { resetCategory(); if (!HttpRequest) return; if (superCategoriesID < 1) return; var url = "AjaxServer.aspx?superCategoryID=" + superCategoriesID; HttpRequest.open("GET",url); HttpRequest.onreadystatechange = function() { if (HttpRequest.readyState == && HttpRequest.status == 200) { var xml = HttpRequest.responseXML; var c = xml.getElementsByTagName("category"); categories.options.length = 0; //Xóa liệu cũ for (i = 0; i < c.length; i++) { var value = c[i].firstChild.nodeValue; var id = c[i].attributes[0].value; categories.options[i] = new Option(value, id); } categories.disabled = false; categories.focus(); } } HttpRequest.send(null); } /// /// Lấy liệu viết từ server đưa vào dropdown /// function getArticles(categoryID) { resetArticle(); if (!HttpRequest) return; if (categoryID < 1) return; var url = "AjaxServer.aspx?categoryID=" + categoryID; HttpRequest.open("GET",url); HttpRequest.onreadystatechange = function() { if (HttpRequest.readyState == && HttpRequest.status == 200) { var xml = HttpRequest.responseXML; var a = xml.getElementsByTagName("article"); articles.options.length = 0;//Xóa liệu cũ for (i = 0; i < a.length; i++) { var value = a[i].firstChild.nodeValue; var id = a[i].attributes[0].value; articles.options[i] = new Option(value, id); } articles.disabled = false; articles.focus(); } } HttpRequest.send(null); } function resetCategory() { categories.options.length = 0; categories.disabled = 'disabled'; resetArticle(); } function resetArticle() { articles.options.length = 0; articles.disabled = 'disabled'; results.innerHTML = "[Chưa có viết chọn]"; } function displayResults() { var text = "[Chưa có viết chọn]"; if (articles.selectedIndex > 0) { text = " Bạn chọn:" text = text + "Nhóm thư mục: " + superCategories.options[superCategories.selectedIndex].text +""; text = text + "Thư mục: " + categories.options[categories.selectedIndex].text +""; text = text + "Bài viết: " + articles.options[articles.selectedIndex].text +""; } results.innerHTML = text; } AjaxEx1.aspx.cs protected void Page_Load(object sender, EventArgs e) { ddlSuperCategories.DataSource = SuperCategoriesBF.GetSuperCategoriesAll(); ddlSuperCategories.DataTextField = "Title"; ddlSuperCategories.DataValueField = "SuperCategoryID"; ddlSuperCategories.DataBind(); ddlSuperCategories.Items.Insert(0, new ListItem("Chọn nhóm thư mục ", "0")); // handle change events on client ddlSuperCategories.Attributes.Add("onchange", "getCategories(this.value);"); ddlCategories.Attributes.Add("onchange", "getArticles(this.value);"); ddlArticles.Attributes.Add("onchange", "displayResults();"); } AjaxServer.aspx.cs protected void Page_Load(object sender, EventArgs e) { int superCategoryID=0; if (Request["superCategoryID"] != null) int.TryParse(Request["superCategoryID"], out superCategoryID); int categoryID = 0; if (Request["categoryID"] != null) int.TryParse(Request["categoryID"], out categoryID); // either retrieve cities or class dates if (categoryID != 0) GetArticles(categoryID); else GetCategories(superCategoryID); } /// /// Trả liệu thư mục viết theo chuẩn XML /// /// private void GetCategories(int superCategoryID) { // lấy liệu List categories = CategoriesBF.GetCategoriesBySuperCategoryID(superCategoryID); StringBuilder sb = new StringBuilder(); sb.Append(@""); sb.Append(@""); sb.Append(@"Chọn thư mục "); foreach (CategoriesBF c in categories) { sb.Append(@""); } sb.Append(@""); Response.Clear(); Response.ContentType = "text/xml"; Response.Write(sb.ToString()); Response.End(); } private void GetArticles(int categoryID) { // lấy liệu List articles = ArticlesBF.GetArticlesPublishedPagedByCategoyID(categoryID, 0, 10); //các bạn hiểu lấy 10 viết thư mục có ID = categoryID StringBuilder sb = new StringBuilder(); sb.Append(@""); sb.Append(@""); sb.Append(@"Chọn viết "); // note: class is a keyword, therefore prefix with '@' foreach (ArticlesBF a in articles) { sb.Append(@""); } sb.Append(@""); Response.Clear(); Response.ContentType = "text/xml"; Response.Write(sb.ToString()); Response.End(); } ... < /asp: DropDownList> Chọn viết: < /asp: DropDownList> < /asp: Label>