Các bước thực hiện:
Bước 1:
Trong VS 2005, vào menu File -> New -> Web site, tạo một Web site, đặt tên tùy ý (tapvietAjax chẳng hạn). Trang Default.aspx được khởi tạo theo mặc định.
Trong cửa sổ Solution Explorer, click phải chuột lên website mới tạo, chọn Add New Item…, chúng ta sẽ tạo thêm 2 file nữa, 1 file javascript với tên là XMLHttpRequest.js, và 1 file text nữa là Text.txt.
Như vậy tổng cộng, ta có 3 file trong website.
Bước 2:
Mở file Text.txt mới tạo và gõ vào dòng chữ: tui tap viet Ajax trong ASP.NET
File Text.txt sẽ là nguồn dữ liệu mà chúng ta cần dùng Ajax để đọc nội dung trong file này ra.
Bước 3:
Mở file XMLHttpRequest.js, nhập vào đoạn mã javascript như sau:
var ACTIVEX_OBJECT_STRING = "Microsoft.XMLHTTP";
var METHOD = "GET";
function getXMLHttpRequest()
{
if( window.XMLHttpRequest )
{
// IE7, Mozilla, Safari, Opera
return new XMLHttpRequest();
}
else if( window.ActiveXObject )
{
try
{
// IE 5.x, IE 6
return new ActiveXObject(ACTIVEX_OBJECT_STRING);
}catch(e)
{
window.status = e.message;
}
}
return null;
}
function sendRequest(xmlHttpRequest, url, callBackFunction)
{
if( !xmlHttpRequest )
throw "XMLHttpRequest is null";
xmlHttpRequest.open(METHOD, url);
xmlHttpRequest.onreadystatechange = callBackFunction;
xmlHttpRequest.send(null);
}
Trong đoạn code trên có một số điểm cần quan tâm:
Hàm getXMLHttpRequest dùng để khởi tạo một đối tượng XMLHttpRequest, chúng ta cần phải kiểm tra trình duyệt đang sử dụng để trả về những đối tượng phù hợp. Nếu trình duyệt là IE7, FireFox, Safari, Opera thì đối tượng XMLHttpRequest được tạo, nếu trình duyệt là IE 5.x hoặc 6 thì đối tượng ActiveXObject sẽ được khởi tạo.
Một số thuộc tính và phương thức cần quan tâm đối với XMLHttpRequest:
onreadystatechange: là một sự kiện, xảy ra khi giá trị của thuộc tính readyState thay đổi.
readState: là thuộc tính chỉ đọc, cho biết trạng thái của yêu cầu (request), có các giá trị sau: 0 – Chưa khởi tạo, 1 – đang khởi tạo, 2 – khởi tạo xong, 3 – tương tác với server, 4 – hoàn thành.
open: phương thức mở một request tới server.
send: gửi request về server.
Hàm sendRequest sẽ gửi một request tới tham số url, sau đó nắm giữ sự kiện onreadystatechange bằng tham số callBackFunction nhằm mục đích đợi câu trả lời từ server. Khi server trả lời, hàm callBackFunction sẽ được thực thi để xử lý dữ liệu do server trả về.
Bước 4:
Mở trang default.aspx, trong tag <header>, ta thêm dòng code sau:
<script src="XMLHttpRequest.js" type="text/javascript" ></script>
Dòng code này nhắm mục đích liên kết với file XMLHttpRequest.js để sử dụng các hàm mà ta mới viết ở trên. Sau đó, ta thêm một đoạn code nữa vào ngay bên dưới dòng code vừa rùi:
<script type="text/javascript">
var xmlHttp = null;
function onClick(){
xmlHttp = getXMLHttpRequest();
if( xmlHttp != null )
var url = "Text.txt";
sendRequest(xmlHttp, url, onCallBack);
}
function onCallBack()
{
if( xmlHttp == null || xmlHttp.readyState != 4 )
return;
if( xmlHttp.status == 200 )
{
var showResult = document.getElementById("result");
if( showResult != null )
showResult.outerHTML = "<h1>" + xmlHttp.responseText + "<h1>";
}
else
{
window.status = "Error: " + xmlHttp.status;
}
}
</script>
Trong hàm onClick, chúng ta khởi tạo đối tượng XMLHttpRequest bằng cách gọi hàm getXMLHttpRequest và sử dụng hàm sendRequest để yêu cầu nội dụng trong file Text.txt, tham số onCallBack đưa vào để nắm bắt sự kiện onreadystatechange khi trình duyệt nhận được dữ liệu từ server trả về.
Trong hàm onCallBack chúng ta cần kiểm tra trạng thái của đối tượng XMLHttpRequest là 4 (gửi request thành công) và satus là 200 ( nhận dữ liệu thành công) rồi mới tiếp tục xử lý dữ liệu nhận được.
Tiếp tục, trong tab <body>, ta thay thế toàn bộ nội dụng của tag này bằng đoạn code sau:
<form id="form1" runat="server">
<span id="result">
<input type="button" value="Hello" onclick="#onClick()" /></span>
</form>
My Opera
