AJAX là gì?
AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền dữ liệu và Javacript có nhiệm vụ lắp ráp chúng lại với nhau.
Hiển nhiên để phát triển ứng theo phong các AJAX chúng ta cần phải biết về JavaScript, DOM, CSS, HTML, XML… Điều đó thật không dễ dàng gì. Thật may là hiện tại đã có khá nhiều thư viện cho phép chúng ta phát triển ứng dụng AJAX nhanh và đơn giản hơn nhiều. (Chúng ta sẽ tìm hiểu về những thư viện này trong các bài sau ;-) ).
Ví dụ
Trong ví dụ tôi sẽ trình bày sau đây sẽ giúp chúng ta làm quen với cách mà AJAX làm việc, tất nhiên tại ví dụ này chúng ta sẽ không dùng những thư viện xây dựng sẵn.
AjaxEx1.aspx
<h1> Thí dụ về Ajax</h1>
<table style="width: 380px">
<tr>
<td width="50%">
Hãy chọn nhóm thư mục
</td>
<td width="50%">
<asp:DropDownList AutoPostBack="false" ID="ddlSuperCategories" runat="server" Width="190" >
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Chọn thư mục:
</td>
<td>
<asp:DropDownList AutoPostBack="false" ID="ddlCategories" runat="server" Width="190" Enabled="false" >
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Chọn bài viết:
</td>
<td>
<asp:DropDownList AutoPostBack="false" ID="ddlArticles" runat="server" Width="190" Enabled="false" >
</asp:DropDownList>
</td>
</tr>
</table>
<asp:Label ID="lblResults" runat="server" Text="[Chưa có bài viết nào được chọn]" ForeColor="#880000">
</asp:Label>
<script type= "text/javascript" language="javascript">
var superCategories = document.getElementById("<% =ddlSuperCategories.ClientID %>");
var categories = document.getElementById("<% =ddlCategories.ClientID %>");
var articles = document.getElementById("<% =ddlArticles.ClientID %>");
var results = document.getElementById("<% =lblResults.ClientID %>");
var HttpRequest = false;
if (window.XMLHttpRequest) // Internet Explorer
{
HttpRequest = new XMLHttpRequest();
}
else // Other browsers
{
HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
/// <summary>
///Lấy dữ liệu về thư mục bài viết từ server rồi đưa vào dropdown
/// </summary>
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 == 4 && HttpRequest.status == 200)
{
var xml = HttpRequest.responseXML;
var c = xml.getElementsByTagName("category");
categories.options.length = 0; //Xóa dữ 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);
}
/// <summary>
/// Lấy dữ liệu về bài viết từ server rồi đưa vào dropdown
/// </summary>
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 == 4 && HttpRequest.status == 200)
{
var xml = HttpRequest.responseXML;
var a = xml.getElementsByTagName("article");
articles.options.length = 0;//Xóa dữ 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ó bài viết nào được chọn]";
}
function displayResults()
{
var text = "[Chưa có bài viết nào được chọn]";
if (articles.selectedIndex > 0)
{
text = "<b> Bạn đã chọn:</b><br />"
text = text + "Nhóm thư mục: " + superCategories.options[superCategories.selectedIndex].text +"<br />";
text = text + "Thư mục: " + categories.options[categories.selectedIndex].text +"<br />";
text = text + "Bài viết: " + articles.options[articles.selectedIndex].text +"<br />";
}
results.innerHTML = text;
}
</script>
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);
}
/// <summary>
/// Trả về dữ liệu thư mục bài viết theo chuẩn XML
/// </summary>
/// <param name="superCategoryID"></param>
private void GetCategories(int superCategoryID)
{
// lấy dữ liệu
List<CategoriesBF> categories = CategoriesBF.GetCategoriesBySuperCategoryID(superCategoryID);
StringBuilder sb = new StringBuilder();
sb.Append(@"<?xml version=""1.0"" ?>");
sb.Append(@"<categories>");
sb.Append(@"<category id='0'>Chọn thư mục...</category>");
foreach (CategoriesBF c in categories)
{
sb.Append(@"<category id='" + c.CategoryID + "'><![CDATA[" + c.Title + "]]></category>");
}
sb.Append(@"</categories>");
Response.Clear();
Response.ContentType = "text/xml";
Response.Write(sb.ToString());
Response.End();
}
private void GetArticles(int categoryID)
{
// lấy dữ liệu
List<ArticlesBF> articles = ArticlesBF.GetArticlesPublishedPagedByCategoyID(categoryID, 0, 10); //các bạn có thể hiểu là lấy 10 bài viết đầu tiên trong thư mục có ID = categoryID
StringBuilder sb = new StringBuilder();
sb.Append(@"<?xml version=""1.0"" ?>");
sb.Append(@"<articles>");
sb.Append(@"<article id='0'>Chọn bài viết...</article>");
// note: class is a keyword, therefore prefix with '@'
foreach (ArticlesBF a in articles)
{
sb.Append(@"<article id='" + a.ArticleID + "'><![CDATA[" + a.Title + "]]></article>");
}
sb.Append(@"</articles>");
Response.Clear();
Response.ContentType = "text/xml";
Response.Write(sb.ToString());
Response.End();
}
Nguồn: sondt - zensoft
3Cdotcom “E-hosting - Tốt nhất chothương mại điện tử" www.hosting.net.vn