AJAX Example

Ứng dụng AJAX đầu tiên
Để hiểu được AJAX hoạt động như thế nào, chúng ta sẽ tạo một ứng dụng AJAX nhỏ.
Đầu tiên chúng ta sẽ tạo một form HTM gồm hai trường: Name và Time. Trường Name sẽ do người dùng nhập vào, còn trường Time sẽ được AJAX điền vào.
File HTML sẽ được đặt tên là "testAjax.htm", code giống bên dưới (chú ý là form HTML bên dưới không có nút Submit)

AJAX -Trình duyệt hỗ trợ
Yếu tố quyết định của AJAX đó là đối tượng XMLHttpRequest.
Tất cả các trình duyệt mới sử dụng gắn liền đối tượng JavaScipt XMLHttpRequest để tạo ra đối tượng XMLHttpRequest ( IE5 và IE6 sử dụng một ActiveXObject).
Thêm vào "testAjax.html" một đoạn JavaScript để tạo ra đối tượng XMLHttpRequest

Giải thích:
Tạo ra một biến xmlhhtp để lưu đối tượng XMLHttpRequest.
Xét nếu trình duyệt của người dùng là IE7+, Firefox, Opera, Chrome, Safari thì sẽ tạo ra đối tượng XMLHTTP là:
xmlhttp = new XMLHttpRequest();
Nếu là trình duyệt IE5, IE6 thì đối tượng XMLHTTP được tạo như sau:
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
Ngược lại, người dùng sẽ nhận được thông báo "Your Browser doesn't support XMLHTTP".
Chú ý: đoạn code trên có thể được sử dụng mỗi lần bạn tạo ra một đối tượng XMLHTTP, vì vậy bạn nên copy và save vào một nơi để sử dụng khi cần.
AJAX - Đối tượng XMLHttpRequest
Trước khi gửi dữ liệu đến một Server, chúng ta sẽ xem xét ba thuộc tính quan trọng của đối tượng XMLHttpRequest
1. Thuộc tính onreadystatechange
Sau khi một yêu cầu được gửi đến Server, chúng ta cần một hàm để nhận dữ liệu được trả về từ Server.
Thuộc tính onreadystatechange lưu trữ hàm sẽ xử lý phản hồi từ Server. Hàm này được lưu trữ trong thuộc tính để được gọi một cách tự động.
Đoạn code bên dưới thiết lập cho thuộc tính onreadystatechange và lưu trữ một hàm rỗng bên trong nó:
xmlhttp.onreadystatechange = function()
{
//chúng ta sẽ thêm một vài dòng code ở đây
}
2. Thuộc tính readyState
Thuộc tính readyState sẽ lưu trữ trạng thái phản hồi của Server.
Mỗi lần thuộc tính readyState thay đổi, hàm onreadystatechange sẽ được thực thi.
Các giá trị mà thuộc tính readyState có thể nhận được:
State Mô tả
0 Yêu cầu không được khởi tạo
1 Yêu cầu đã được thiết lập
2 Yêu cầu đã được gửi
3 Yêu cầu đang được xử lý
4 Yêu cầu đã được hoàn thành
Thêm vào hàm onreadystatechange câu lệnh if để kiểm tra phản hồi đã được hoàn thành chưa (điều này có nghĩa là chúng ta có nhận được dữ liệu ngay bây giờ chưa)
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4)
{
//lấy dữ liệu từ phản hồi của Server
}
}
3. Thuộc tính responseText
Dữ liêu được gửi về từ server có thể được truy xuất bởi thuộc tính responseText
Bây giờ chúng ta có thể thiết lập giá trị của trường "Time" bằng responseText:
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4)
{
document.myForm.time.value = xmlhttp.responseText;
}
}
AJAX - gửi một yêu cầu đến Server
Để gửi yêu cầu đến một Server chúng ta cần sử dụng hai phương thức open() và send().
Phương thức open() mang ba đối số. Đối số thứ nhất xác định phương thức nào sẽ được sữ dụng khi gửi yêu cầu (GET or POST), đối số thứ hai cho biết địa chỉ URL của script Server-side, đối số thứ ba cho biết yêu cầu sẽ được điều khiển bất đồng bộ hay không.
Phương thức send() gửi yêu cầu đến server.
Nếu chúng ta xác nhận file html và asp được đặt trong cùng một thư mục, thì đoạn code như sau:
xmlhttp.open("get","time.asp",true);
xmlhttp.send(null);
Bây giờ chúng ta phải xác định khi nào hàm ajaxFunction() được thực thi.
Chúng ta hãy để hàm được thực thi khi người dùng gõ vào trường "Name" bằng thuộc tính onkeyup = "ajaxFunction();
Chúng ta sẽ thêm vào file "testAjax.html" vài dòng code:

AJAX - Script ASP
Bây giờ chúng ta sẽ tạo ra một server-side script để hiển thị thời gian hiện tại trong trường time.
Thuộc tính responseText sẽ lưu trữ dữ liệu được trả về từ server, ở đây chúng ta sẽ trả về thời gian hiện tại.
Code trong trang "time.asp" như sau:
<%
response.expires = -1
response.write(time)
%>
Chú ý: lệnh response.expire thiết lập thời gian một trang web sẽ được đưa vào trình duyệt trước khi nó hết hiệu lực

AJAX XMLHttpRequest

AJAX sử dụng đối tượng XMLHttpRequest
Để nhận/gửi thông tin từ/đến một cơ sở dữ liệu hoặc một tập tin trên server với JavaScript truyền thống, bạn sẽ phải tạo ra một form HTML, và người dùng sẽ phải nhấn vào nút "Submit" để gửi/nhận thông tin, đợi Serverphản hồi, sau đó một trang mới sẽ load kết quả trả về. Ứng dụng web truyền thống có thể chạy chậm và trờ nên kém thân thiện hơn, bởi vì Server trả về một trang mới mỗi lần người dùng đưa vào.
Với AJAX, JavaScript của bạn giao tiếp trực tiếp với máy chủ, thông qua đối tượng JavaScript XMLHttpRequest.
Với đối tượng XMLHttpRequest, một trang web có thể tạo một yêu cầu đến hoặc nhận một phản hồi từ một web Server mà không phải load lại trang. Người dùng sẽ ở trên cùng một trang, và người đó sẽ không nhận thấy gần các trang yêu cầu các Script, hoặc gửi dữ liệu đến một Server.
Đối tượng XMLHttpRequest
Bằng cách sử dụng đối tượng XMLHttpRequest, một nhà phát triển web có thể cập nhật một trang web với dữ liệu từ một Server sau đó trang được tải về.
AJAX đã được phổ biến vào năm 2005 bởi Google ( với Google Suggest).
Google Suggest đang sử dụng đối tượng XMLHttpRequest để tạo một giao diện trang web rất động: khi bạn bắt đầu gõ vào khung search của Google, một JavaScript gửi các ký tự đến một Server và Server trả về một danh sách các đề nghị.
Đối tượng XMLHttpRequest được hỗ trợ trong tất cả các trình duyệt chuyên nghiệp (Internet Explore, Firefox, Chrome, Opera, Safari).

Giới thiệu Ajax!

AJAX viết tắt từ Asynchronous JavaScript and XML
AJAX không phải là một ngôn ngữ lập trình mới, mà đó là một công nghệ mới để tạo ra các ứng dụng web tôt hơn, nhanh hơn, và tương tác hơn.
Với AJAX, JavaScript có thể giao tiếp trực tiếp với server, với đối tượng XMLHttpRequest. Với đối tượng này, JavaScript có thể trao đổi dữ liệu với một web server mà không cần tải lại trang.
AJAX sử dụng chuyển dữ liệu bất đồng bộ (HTTP requests) giữa trình duyệt và Web Server, cho phép các trang web yêu cầu các mẫu thông tin từ Server thay cho toàn bộ trang web.
Công nghệ AJAX làm cho các ứng dụng Internet nhỏ hơn, nhanh hơn và thân thiện với người dùng hơn.
AJAX dựa trên các tiêu chuẩn Internet.
AJAX dựa trên các chuẩn sau:

• JavaScript
• HTML
• XML
• CSS

Các ứng dụng AJAX là các trình duyệt và nền tảng độc lập
AJAX thì tốt hơn về các ứng dụng Internet
Các ứng dụng Ineternet thì có nhiều lợi ích hơn các ứng dụng Desktop; Các ứng dụng Internet có thể tiếp cận với một đối tượng rộng hơn, chúng thì dễ dàng hơn để cài đặt, hỗ trợ và phát triển .

Ngẫu nhiên hay cố ý

Những phát hiện thú vị về bàn phím máy tính....Ngẫu nhiên hay cố ý. Phím C luôn sát cánh bên phím V, tình cảm giữa Chồng và Vợ luôn bền vững và sát cánh bên nhau. Ngay phía dưới phím A là phím Z, thế mà xưa nay ta cứ tưởng A và Z xa nhau lắm. Có nhiều thứ cũng nghĩ là khác nhau rõ ràng như A và Z…hóa ra khoảng cánh cũng mong manh lắm. Phím S và phím D nằm cạnh bên nhau, trong cuộc sống sự phân biệt và khoảng cách giữa Đúng và Sai có bao giờ rõ ràng … Tại sao phím U luôn đứng cạnh phím I nhỉ ? Và ngay bên trái đó là 2 phím T và Y nữa ? Vi` Tình yêu” của “U and I", đúng thế ! khá thú vị đấy chứ.

Only love

Dành 1 phút để mOng… Dành 1 giờ để nhớ… Dành 1 tháng để chờ… Dành 1 năm để đợi… Dành cả đời để … yêu 1người… love + love = very love , love - love = begin love , love x love = limitless love , love / love ÷ love = only love

Bài toán cuộc sống

Trong cuộc sống của chúng ta nếu: A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, tương đương với giá trị: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26 thì - Làm việc tích cực (hardwork) chỉ là: H+A+R+D+W+O+R+K=8+1+18+4+23+15+18+11=98%. - Kiến thức (knowledge) vẫn chỉ là: K+N+O+W+L+E+D+G+E=11+14+15+23+12+5+4+7+5=96% - Hay là may mắn (luck)? L+U+C+K=12+21+3+11=47%. - Vậy là tiền bạc (money)? Không! Khả năng lãnh đạo (Leadership)? Vẫn không phải! Chỉ có thái độ (attitude) là 100%: A+T+T+I+T+U+D+E=1+20+20+9+20+21+4+5=100%. Mọi việc đều có giải pháp riêng của nó, chỉ khi chúng ta thay đổi thái độ (attitude) của chính chúng ta.