Học AJAX cơ bản và nâng cao

AJAX, là viết tắt của Asynchronous JavaScript and XML (tạm dịch là JavaScript và XML không đồng bộ), là một
kỹ thuật mới để tạo các ứng dụng web giàu tính tương tác, nhanh hơn và mượt mà hơn với sự giúp đỡ của
XML, HTML, CSS và JavaScript.

AJAX không phải là ngôn ngữ lập trình mới. Tên AJAX ở đây không có nghĩa là bạn phải học XML trước khi
cần học AJAX. Điều này là không cần thiết.

Dưới đây là mục lục các bài hướng dẫn học AJAX cơ bản và nâng cao trong loạt bài này:

MỤC LỤC

 AJAX là gì ?

 Đối tượng XMLHttpRequest

 Request trong AJAX

 Xử lý Response

 Sự kiện onreadystatechange

 Ví dụ ứng dụng AJAX

 AJAX và PHP

 AJAX và ASP

 Truy cập Database với AJAX

Phải khẳng định một điều là: AJAX là ước mơ của các lập trình viên phát triển các ứng dụng Web, bởi vì bạn
có thể:

 Cập nhật một Webpage mà không cần tải lại trang. Điều này giúp trang web của bạn chạy mượt mà hơn.

 Request dữ liệu từ một Server - sau khi trang đã được load.

 Nhận dữ liệu từ một Server - sau khi trang đã được load.

 Gửi dữ liệu tới một Server - trong phần xử lý ở background.

 AJAX là gì ?
AJAX, là viết tắt của Asynchronous JavaScript and XML, (tạm dịch là JavaScript và XML không đồng bộ), là
một kỹ thuật mới để tạo các ứng dụng web giàu tính tương tác, nhanh hơn và mượt mà hơn với sự giúp đỡ
của XML, HTML, CSS và JavaScript.

AJAX không phải là ngôn ngữ lập trình mới. Tên AJAX ở đây không có nghĩa là bạn phải học XML trước khi
cần học AJAX. Điều này là không cần thiết.

AJAX cho phép các trang web được cập nhật một cách không đồng bộ bằng cách trao đổi các lượng dữ liệu
nhỏ với Server. Tức là AJAX giúp cập nhật các phần nhỏ trong trang mà không cần tải lại toàn bộ trang. Nếu
đến đây bạn chưa hiểu thì các dòng tiếp theo đây sẽ giúp bạn hiểu cách AJAX làm việc hơn.

Như các bạn đã biết, các ứng dụng web truyền thống (trước khi có AJAX) truyền tải thông tin tới và từ Server
một cách không đồng bộ. Tức là, khi bạn điền thông tin vào một Form, nhấn nút Submit và sau đó bạn sẽ
được hướng tới một trang khác với thông tin mới từ Server trả về.

Với AJAX, khi bạn nhấn nút Submit, JavaScript sẽ tạo một Request tới Server, thông dịch các kết quả, và cập
nhật màn hình hiện tại (chứ không tải lại toàn bộ trang hoặc hướng bạn tới một trang khác như trên). Tất
nhiên là người sử dụng sẽ không bao giờ biết được những gì đã được truyền tải tới Server.

AJAX là một kỹ thuật phát triển Web độc lập với các phần mềm Web Server.

Với AJAX, người dùng có thể tiếp tục sử dụng ứng dụng trong khi các chương trình trên Client tạo Request để
lấy thông tin từ Server.

AJAX là ứng dụng giàu tính Internet

Từ AJAX được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào 2/2005 để chỉ kỹ thuật này. AJAX là
một ứng dụng giàu tính Internet và bên cạnh đó AJAX cũng không thể làm việc một cách độc lập, kỹ thuật
mới này sử dụng kết hợp:

 HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin.

 Sử dụng đối tượng XMLHttpRequest để nhận dữ liệu từ một Web Server một cách không đồng bộ.

 Sử dụng mô hình DOM với sự trợ giúp của JavaScript để hiển thị/sử dụng dữ liệu.

 JavaScript to make everything happen.

 Bạn không nên hiểu nhầm tên đối tượng XMLHttpRequest. Tên này không nói lên điều
gì, tức là bạn không bắt buộc phải học và hiểu XML để có thể học, hiểu và sử dụng
AJAX.

Chương sau trình bày vấn đề gì về AJAX ?

Như phần trên đã trình bày, AJAX không thể làm việc một cách độc lập. Kỹ thuật mới này được sử dụng kết
hợp với các công nghệ khác để tạo các trang web có tính tương tác cao. Các công nghệ này bao gồm
JavaScript, mô hình DOM, CSS và đối tượng XMLHttpRequest.

Nếu bạn đã đọc chương giới thiệu về loạt bài AJAX này thì yêu cầu cơ bản nhất để đọc và hiểu loạt bài đó là
bạn phải nắm vững JavaScript, CSS, HTML. Do đó nếu bạn chưa nắm vững các công nghệ này, bạn có thể
tham khảo các loạt bài hướng dẫn mà VietJack cung cấp:

 Học JavaScript cơ bản và nâng cao

 Học HTML cơ bản và nâng cao

 Học CSS cơ bản và nâng cao

Nếu bạn đã chuẩn bị mọi thứ rồi thì còn chờ gì nữa. Chúng ta đến với chương tiếp theo: Đối tượng
XMLHttpRequest trong AJAX.

Đối tượng XMLHttpRequest là gì ?

Bạn cần phải biết rằng đối tượng XMLHttpReqrest là chìa khóa then chốt của kỹ thuật AJAX. Tất cả trình
duyệt Web hiện đại đều hỗ trợ đối tượng XMLHttpRequest.

Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với một Server ở Background. Tức là với đối
tượng XMLHttpRequest này, bạn có thể cập nhật các phần nhỏ của trang mà không cần tải lại toàn bộ trang.

Đối tượng XMLHttpRequest (viết tắt là XHR) là một API có thể được sử dụng bởi JavaScript, Jscript, VBScript
và một số ngôn ngữ phát triển ứng dụng Web khác để truyền tải và thao tác dữ liệu XML tới và từ một
WebServer bởi sử dụng HTTP bằng cách thiết lập một kênh kết nối độc lập giữa Client-Side và Server-Side.

Dữ liệu được trả về từ các lời gọi tới đối tượng XMLHttpRequest sẽ thường được cung cấp bởi Database ở
Backend. Ngoài định dạng XML, đối tượng XMLHttpRequest cong được sử dụng để lấy dữ liệu trong các định
dạng khác, chẳng hạn như JSON hay định dạng thuần text.
 Tạo đối tượng XMLHttpRequest trong AJAX
Xin nhắc lại lần nữa là tất cả trình duyệt hiện đại (Chrome, IE7+, FireFox, Safari và Opera) đều đã có sẵn và
hỗ trợ đối tượng XMLHttpRequest.

Dưới đây là cú pháp để tạo đối tượng XMLHttpRequest trong AJAX:

Ten_bien = new XMLHttpRequest();

Với các phiên bản IE cũ hơn (chẳng hạn như IE5 và IE6) sử dụng đối tượng ActiveXObject:

Ten_bien = new ActiveXObject("Microsoft.XMLHTTP");

Trong khi lập trình phát triển các ứng dụng Web, để bao tất cả các trường hợp và để xử lý mọi trình duyệt
như trong trường hợp này (để bao cả IE5 và IE6), bạn cần kiểm tra xem trình duyệt có hỗ trợ đối tượng
XMLHttpRequest không. Nếu có, bạn tạo một đối tượng XMLHttpRequest; còn nếu không, bạn tạo một đối
tượng ActiveXObject:

var xhttp;

if (window.XMLHttpRequest){

xhttp= new XMLHttpRequest();

} else {

//tao doi tuong ActiveXObject neu trinh duyet khong ho tro XMLHttpRequest

xhttp= new ActiveXObject("Microsoft.XMLHTTP");

Các phương thức của đối tượng XMLHttpRequest trong

AJAX
 Phương thức abort()

Hủy Request hiện tại.

 Phương thức getAllResponseHeaders()

Trả về HTTP Header dưới dạng một chuỗi.

 Phương thức getResponseHeader( ten_truong_header )

 Trả về giá trị của một trường HTTP Header cụ thể.

 Phương thức open( method, URL )

open( phuong_thuc, URL, async )

open( phuong_thuc, URL, async, ten_nguoi_dung )

open( phuong_thuc, URL, async, ten_nguoi_dung, mat_khau )

Các form phương thức open() này được sử dụng để xác định phương thức (tham số phuong_thuc), đường
dẫn URL, và một số thuộc tính tùy ý khác cho một Request.

Trong đó:

o Tham số phuong_thuc có thể là một trong các giá trị GET, POST, hoặc HEAD. Bạn cũng có thể sử dụng các
phương thức PUT, DELETE. Tuy nhiên hai phương thức này chủ yếu được sử dụng trong các ứng dụng REST
app.

o Tham số async xác định xem Request nên được xử lý theo cách không đồng bộ hoặc đồng bộ. Tham số này
nhận hai giá trị true cho không đồng bộ, false cho đồng bộ.

 Phương thức send( content )

Gửi Request tới Server.

 setRequestHeader( header, value )

Thêm một cặp header/value tới trường HTTP Header để gửi đi.

Các thuộc tính của đối tượng XMLHttpRequest trong

AJAX
 Sự kiện onreadystatechange

Một Event Handler lắng nghe và xử lý một sự kiện khi có thay đổi về trạng thái nào diễn ra.

 readyState

Thuộc tính này định nghĩa trạng thái hiện tại của đối tượng XMLHttpRequest.

Bảng dưới đây liệt kê các giá trị cho thuộc tính readyState:
 Trạng Miêu tả
thái

0 Requet chưa được khởi tạo

1 Request đã được thiết lập.

2 Request đã được gửi.

3 Request đang được xử lý.

4 Kết thúc Request.

 responseText

Trả về phản hồi dưới dạng một chuỗi.

 responseXML

Trả về phản hồi dưới định dạng XML. Thuộc tính này trả về một đối tượng XML để có thể được parse bởi sử
dụng các phương thức và thuộc tính của mô hình DOM.

 status

Trả về trạng thái dưới dạng một số (ví dụ: 404 cho "Not Found", 200 cho "OK")

 statusText

Trả về trạng thái dưới dạng một số (ví dụ: "Not Found", "OK").

Như trong chương trước đã đề cập, đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với một
Server. Vậy hoạt động gửi Request tới và nhận Response từ Server diễn ra như thế nào khi sử dụng đối
tượng XMLHttpRequest. Chương này chúng ta cùng tìm hiểu khía cạnh thứ nhất: Gửi Request tới Server bởi
sử dụng đối tượng XMLHttpRequest.
 Gửi Request tới Server trong AJAX
Để gửi một Request tới một Server, chúng ta sử dụng các phương thức open() và send() của phương thức
XMLHttpRequest đã được trình bày trong chương trước.

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

Phương thức Tham số

open(phuong_thuc, url, async)
Xác định kiểu Request. Trong đó tham số phuong_thuc
xác định kiểu Request (chẳng hạn GET, POST), tham
số URL xác định vị trí file trên Server, tham số async
xác định cách xử lý Request: true cho không đồng bộ
hoặc false cho đồng bộ.

send() Gửi Request tới Server (được sử dụng với GET).

send(string) Gửi Request tới Server (được sử dụng với POST).

Nên sử dụng phương thức GET hay POST ?

Sử dụng phương thức GET thì đơn giản và nhanh hơn phương thức POST và GET có thể sử dụng trong hầu
hết các trường hợp.

Tuy nhiên, bạn cần sử dụng phương thức POST để tạo Request khi:

 Update dữ liệu của Database trên Server.

 Gửi một lượng dữ liệu lớn (phương thức POST không có giới hạn về kích cỡ dữ liệu được gửi, còn GET thì có).

 Gửi dữ liệu nhập bởi người dùng (ví dụ như Password). Sử dụng POST thì an toàn hơn GET.

Cached Result là gì ?
Trước khi đi vào tìm hiểu một số ví dụ minh họa về cách gửi Request tới Server bởi sử dụng các phương thức
của đối tượng XMLHttpRequest trong AJAX, mình xin giải thích khái niệm Cached Result.
Với các trình duyệt Web, mỗi khi bạn gửi một Request với một URL nào đó (có ID cụ thể) bởi sử dụng
phương thức GET và nhận Response từ Server cho yêu cầu này và trình duyệt sẽ lưu phần phản hồi này
(tương ứng với URL và ID trên). Lần tới, khi bạn tạo Request cũng với phương thức GET và URL này, thì trình
duyệt sẽ tự động trả về Response đã lưu trước đó mà không tạo một Request tới Server nữa. Đây chính là
Cached Result (tạm dịch: kết quả đã được lưu giữ vào bộ nhớ trình duyệt và lập trình viên thường gọi hiện
tượng này là KÍCH).

Ví dụ sử dụng phương thức GET trong AJAX

Dưới đây là một ví dụ đơn giản để tạo một Request với phương thức GET.

<html>

<body>

<h2>Ky thuat AJAX</h2>

<button type="button" onclick="loadDoc()">Tao Request toi Server</button>

<p id="demo"></p>

<script>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

};

xhttp.open("GET", "demo_get.asp", true);

xhttp.send();

</script>

</body>

</html>
Với ví dụ trên, bạn có thể nhận một Cached Result. Để tránh điều này, bạn nên xác định thêm một ID duy
nhất cho URL.

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);

xhttp.send();

Nếu bạn muốn gửi một số thông tin nào đó bởi sử dụng phương thức GET này, bạn thêm thông tin này vào
URL.

xhttp.open("GET", "demo_get2.asp?fname=Viet&lname=Jack", true);

xhttp.send();

Ví dụ sử dụng phương thức POST trong AJAX

Tiếp theo là ví dụ minh họa cách gửi dữ liệu tới Server bởi sử dụng phương thức POST.

Ví dụ

<html>

<body>

<h2>Ky thuat AJAX</h2>

<button type="button" onclick="loadDoc()">Tao Request toi Server</button>

<p id="demo"></p>

<script>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

};

xhttp.open("POST", "demo_post.asp", true);

 xhttp.send();

</script>

</body>

</html>

Để gửi dữ liệu (giả sử một HTML Form chẳng hạn), bạn sử dụng phương thức setRequestHeader() để thêm
một HTTP Header. Sau đó xác định kiểu dữ liệu bạn muốn gửi trong phương thức send() của đối tượng
XMLHttpRequest.

Phương thức Tham số

setRequestHeader(header, value) Tham số header xác định tên của Header, và tham số
value xác định giá trị cho Header

Tham số URL trong phương thức open()

Tham số URL trong phương thức open() xác định địa chỉ của một file trên Server.

xhttp.open("GET", "ajax_test.asp", true);

File này có thể là bất kỳ loại nào (ví dụ .txt hay .xml) hay bất kỳ dạng Script File nào (giống như .asp hoặc
.php).

Tham số async của phương thức open()

AJAX là viết tắt của Asynchronous JavaScript and XML (tạm dịch: JavaScript và XML không đồng bộ) và để đối
tượng XMLHttpRequest vận hành với kỹ thuật mới AJAX, bạn nên thiết lập tham số async của phương thức
open() thành true:

xhttp.open("GET", "ajax_test.asp", true);

Gửi các Request không đồng bộ là một bước cải tiến lớn cho các lập trình viên Web. Nhiều tác vụ cùng được
thực hiện trên Server là rất tốn kém. Trước khi có AJAX, việc này có thể gây hiện tượng treo hoặc thậm chí
dừng ứng dụng.

Với AJAX, JavaScript không cần phải đợi phản hồi Response được trả về từ Server, thay vào đó nó có thể:
 Thực thi các tác vụ khác trong khi đợi Response từ Server.

 Sau đó xử lý Response khi đã phần phản hồi này đã sẵn sàng trả về.

Trường hợp 1: async = true

Khi thiết lập tham số async là true, bạn nên xác định một hàm để thực thi khi Response đã sẵn sàng với sự
kiện onreadystatechange:

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

Chúng ta sẽ tìm hiểu về sự kiện onreadystatechange trong một chương riêng.

Trường hợp 2: async = false

Việc thiết lập async thành false là một việc thực sự không nên làm và việc này chỉ thích hợp với một số
Request nhỏ.

Bạn nên nhớ rằng JavaScript sẽ KHÔNG tiếp tục thực thi cho đến khi Response được trả về đã sẵn sàng. Nếu
Server của bạn đang bận hoặc chậm chạp trong việc xử lý nhiều Request thì ứng dụng của bạn có thể bị treo
hoặc bị dừng.

Ghi chú: khi thiết lập là false, bạn ĐỪNG viết một hàm để xử lý sự kiện onreadystatechange. Bạn nên đặt
phần code ngay sau phương thức send() như dưới đây:

xhttp.open("GET", "ajax_info.txt", false);

xhttp.send();

document.getElementById("demo").innerHTML = xhttp.responseText;

Để nhận phản hồi Response từ một Server, bạn sử dụng thuộc tính responseText hoặc responseXML của
đối tượng XMLHttpRequest. Trong đó:
 Thuộc tính responseText nhận dữ liệu phản hồi dưới dạng chuỗi.

 Thuộc tính responseXML nhận dữ liệu phản hồi dưới dạng XML.

Thuộc tính responseText trong AJAX

Nếu Response từ một Server không phải là dữ liệu dưới dạng XML, bạn nên sử dụng thuộc tính responseText
của đối tượng XMLHttpRequest trong AJAX.

Thuộc tính responseText trả về dữ liệu dưới dạng chuỗi và bạn có thể sử dụng nó như sau:

<html>

<body>

<div id="demo"><h2>Hay de AJAX thay doi phan text nay</h2></div>

<button type="button" onclick="loadDoc()">Click vao day</button>

<script>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

</script>

</body>

</html>

Thuộc tính responseXML trong AJAX

Nếu Response từ một Server là dữ liệu dưới dạng XML, bạn nên sử dụng thuộc tính responseXML của đối
tượng XMLHttpRequest trong AJAX.
Thuộc tính responseXML trả về dữ liệu dưới dạng XML và bạn có thể sử dụng nó như sau:

<html>

<body>

<h2>Bo suu tap CD</h2>

<button type="button" onclick="loadDoc()">Hien thi danh sach cac dia CD</button>

<p id="demo"></p>

<script>

function loadDoc() {

var xhttp, xmlDoc, txt, x, i;

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

xmlDoc = xhttp.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("ARTIST");

for (i = 0; i < x.length; i++) {

txt = txt + x[i].childNodes[0].nodeValue + "<br>";

document.getElementById("demo").innerHTML = txt;

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.send();

</script>

</body>

</html>
 Sự kiện onreadystatechange trong AJAX

Khi bạn đã gửi một Request tới một Server, có thể bạn muốn thực hiện một số hoạt động nào đó trên phần
Response được trả về. Điều này có thể thực hiện thông qua sự giúp đỡ của sự kiện onreadystatechange trong
AJAX.

Sự kiện onreadystatechange này sẽ được kích hoạt mỗi khi trạng thái readyState thay đổi. Mà thuộc tính
readyState này giữ phần biểu diễn status của đối tượng XMLHttpRequest, do đó dựa vào từng giá trị của
readyState thì bạn có thể cung cấp hoạt động tương ứng nào đó.

Bảng dưới nhắc lại một số thuộc tính quan trọng của đối tượng XMLHttpRequest trong AJAX:

Thuộc tính Miêu tả

onreadystatechange Một Event Handler lắng nghe và xử lý một sự kiện khi có thay đổi về
trạng thái nào diễn ra.

readyState Thuộc tính này định nghĩa trạng thái hiện tại của đối tượng
XMLHttpRequest.

 0: Requet chưa được khởi tạo

 1: Request đã được thiết lập

 2: Request đã được gửi

 3: Request đang được xử lý

 4: Kết thúc Request

status Trả về trạng thái dưới dạng một số (ví dụ: 404 cho "Not Found", 200
cho "OK")

Trong sự kiện onreadystatechange, chúng ta sẽ xác định xem điều gì sẽ xảy ra khi Response từ Server đã sẵn
sàng để được xử lý.

Khi readyState là 4 và status là 200 thì tức là Response đã sẵn sàng:

<html>

<body>

<div id="demo"><h2>Hay de AJAX giup ban thay doi phan text nay</h2></div>

<button type="button" onclick="loadDoc()">Click vao day</button>

<script>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

</script>

</body>

</html>

Ghi chú: sự kiện onreadystatechange được kích hoạt 5 lần (tương ứng với các giá trị của status).

Sử dụng hàm callback trong sự kiện

onreadystatechange
Hàm Callback là một hàm được truyền dưới dạng như là một THAM SỐ cho một hàm khác.

Nếu bạn có nhiều hơn một tác vụ AJAX trên Website của bạn, thì bạn nên tạo một hàm để tạo đối tượng
XMLHttpRequest, và gọi hàm này cho mỗi tác vụ AJAX.

Lời gọi hàm này nên có một URL và điều cần làm tương ứng với sự kiện onreadystatechange (có thể khác
nhau cho mỗi lời gọi hàm).

function loadDoc(url, cfunc) {

 var xhttp;

xhttp=new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

cfunc(xhttp);

};

xhttp.open("GET", url, true);

xhttp.send();

Ví dụ ứng dụng AJAX

Qua các chương trước, có lẽ bạn đã dần mường tượng ra cách một ứng dụng AJAX hoạt động. Để minh họa
chi tiết hơn, chương này mình sẽ cung cấp một ví dụ về một ứng dụng AJAX đơn giản, sau đó giải thích chi
tiết các hoạt động xảy ra trong ứng dụng AJAX này.

Các bước tạo ứng dụng AJAX

 Một sự kiện xảy ra trên Client (ví dụ nhập thông tin vào một form nào đó).

 Tạo đối tượng XMLHttpRequest.

 Cấu hình cho đối tượng XMLHttpRequest.

 Đối tượng XMLHttpRequest tạo một Ansyn Request (ansyn: không đồng bộ) tới Webserver.

 Webserver trả về kết quả dưới dạng XML.

 Đối tượng XMLHttpRequest gọi một hàm callback và xử lý kết quả.

 Cuối cùng HTML DOM được cập nhật.

Sự kiện xảy ra trên Client

Tất nhiên trong khi lập trình, tương ứng với mỗi sự kiện xảy ra thì bạn sẽ có hành động tương ứng, và kết
quả là một hàm JavaScript được gọi.

Ví dụ: hàm validateUserId() được sử dụng để xử lý sự kiện người dùng nhập thông tin vào một form nào đó.
Tạo đối tượng XMLHttpRequest trong AJAX
Bước tiếp theo và cũng là bước khởi tạo ứng dụng AJAX là bước tạo đối tượng XMLHttpRequest. Đối tượng
này là chìa khóa then chốt, là nền tảng của kỹ thuật AJAX.

var ajaxRequest; // Khai bao ten mot bien

function ajaxFunction(){

try{

//Voi cac trinh duyet dien dai: Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

}catch (e){

//Voi trinh duyet IE

try{

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e) {

try{

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

// Thong bao khi xay ra bat ky error nao

alert("Trinh duyet cua ban da bi hong!");

return false;

Cấu hình đối tượng XMLHttpRequest trong AJAX

Sau khi đã tạo đối tượng XMLHttpRequest, chúng ta sẽ viết một hàm mà sẽ được kích hoạt bởi sự kiện trên
Client. Tại đây, hàm callback có tên là processRequest() sẽ được kích hoạt để xử lý sự kiện tương ứng trên.

function validateUserId() {

ajaxFunction();
 // Ham processRequest() la mot ham callback.

ajaxRequest.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);

Tạo Ansyn Request tới Webserver trong AJAX

Để tạo một Request không đồng bộ tới Server, trong phương tức open() của đối tượng XMLHttpRequest bạn
cần thiết lập giá trị true cho tham số thứ ba.

function validateUserId() {

ajaxFunction();

// Ham processRequest() la mot ham callback.

ajaxRequest.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);

Giả sử trong UserId Box, bạn nhập giá trị VietJack thì với Request ở trên thì URL sẽ được thiết lập thành
validate?id=VietJack.

Server trả về kết quả dưới dạng XML

Bạn có thể lập trình ở Server-Side bằng bất kỳ ngôn ngữ lập trình nào, tuy nhiên logic chung cho ví dụ này
nên là như sau:

 Nhận một Request từ Client.

 Parse thông tin nhập vào từ Client.

 Thực hiện quá trình xử lý dữ liệu cần thiết.

 Cuối cùng, gửi kết quả trả về tới Client.

Nếu bạn đang sử dụng Servlet, thì chương trình sẽ có dạng:

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException,

ServletException

String targetId = request.getParameter("id");

if ((targetId != null) && !accounts.containsKey(targetId.trim()))

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("true");

else

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("false");

Gọi hàm callback trong AJAX

Giả sử hàm callback có tên gọi là processRequest(). Đối tượng XMLHttpRequest sẽ gọi hàm này khi trạng thái
readyState (thuộc tính của đối tượng XMLHttpRequest) thay đổi. Lúc này, hàm callback này sẽ nhận kết quả
từ Server và sẽ thực hiện quá trình xử lý cần thiết.

Như trong ví dụ sau, hàm này thiết lập giá trị cho một biến là true hoặc false dựa trên giá trị trả về từ Server.

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

var message = ...;

...

}
Cập nhật HTML DOM trong AJAX
Cuối cùng là bước HTML DOM sẽ được cập nhật. Để có được một tham chiếu tới một phần tử nào đó, bạn có
thể làm theo cách:

document.getElementById("userIdMessage"),

// userIdMessage la ten thuoc tinh ID cua phan tu

Với cách này, bạn có thể sửa đổi các thuộc tính của phần tử hoặc thêm, sửa, hoặc xóa các phần tử con. Ví
dụ:

<script type="text/javascript">

<!--

function setMessageUsingDOM(message) {

var userMessageElement = document.getElementById("userIdMessage");

var messageText;

if (message == "false") {

userMessageElement.style.color = "red";

messageText = "UserID khong hop le";

else

userMessageElement.style.color = "green";

messageText = "UserID hop le";

var messageBody = document.createTextNode(messageText);

// Neu phan tu messageBody da duoc tao: thay the phan tu nay

// Neu phan tu messageBody chua duoc tao: phu them mot phan tu moi

if (userMessageElement.childNodes[0]) {

userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);

else

userMessageElement.appendChild(messageBody);

}
}

-->

</script>

<body>

<div id="userIdMessage"><div>

</body>

AJAX và PHP
Ví dụ ứng dụng AJAX và PHP
Chương này mình sẽ trình bày một ví dụ minh họa cách sử dụng kỹ thuật AJAX trên Client Side và ngôn ngữ
PHP trên Server Side.

Trong ví dụ này, khi người dùng gõ một ký tự trong trường input, hàm JavaScript có tên là showHint() sẽ
được thực thi. Hàm này được kích hoạt bởi sự kiện onkeyup.

<html>

<body>

<h3>Ban hay nhap mot ten trong truong input ben duoi:</h3>

<form action="">

First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">

</form>

<p>Suggestion: <span id="txtHint"></span></p>

<script>

function showHint(str) {

var xhttp;

if (str.length == 0) {

document.getElementById("txtHint").innerHTML = "";

return;

xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("txtHint").innerHTML = xhttp.responseText;

};

xhttp.open("GET", "gethint.php?q="+str, true);

xhttp.send();

</script>

</body>

</html>

Giải thích

Đầu tiên, kiểm tra xem nếu trường input là trống hay không (điều kiện str.length == 0). Nếu là trống thì xóa
nội dung của Placeholder và thoát khỏi hàm.

Nếu trường input là không trống, thực hiện:

 Tạo một đối tượng XMLHttpRequest.

 Tạo một hàm để thực thi khi Response từ Server đã sẵn sàng.

 Gửi Request tới một PHP file (giả sử có tên là gethint.php) trên Server.

 Bạn nên chú ý rằng tham số q được thêm vào "gethint.php?q=" + str.

 Biến str giữ nội dung của trường input.

Nội dung của gethint.php

PHP file này kiểm tra mảng các tên và sau đó trả về tên tương ứng cho trình duyệt.

<?php

// Mot mang cac ten Sinh Vien

$a[] = "An";

$a[] = "Bao";

$a[] = "Chinh";

$a[] = "Doanh";

$a[] = "Em";
$a[] = "Gam";

$a[] = "Hoang";

$a[] = "Kim";

$a[] = "Linh";

$a[] = "Ngoc";

$a[] = "Oanh";

$a[] = "Phuc";

$a[] = "Anh";

$a[] = "Nam";

$a[] = "Sen";

$a[] = "Dong";

$a[] = "Sinh";

$a[] = "Torres";

$a[] = "Ronaldo";

$a[] = "Messi";

$a[] = "Suares";

$a[] = "Morinho";

$a[] = "Van Gan";

$a[] = "Viet";

// Lay tham so q tu dia chi URL

$q = $_REQUEST["q"];

$hint = "";

// Tim tat ca cac hint co trong Array neu tham so $q khac ""

if ($q !== "") {

$q = strtolower($q);

$len=strlen($q);

foreach($a as $name) {

if (stristr($q, substr($name, 0, $len))) {

if ($hint === "") {

$hint = $name;

} else {

$hint .= ", $name";

}
 }

// Ket qua "Khong co suggestion nao" neu khong tim thay bat ky hint nao trong Array

echo $hint === "" ? "Khong co suggestion nao" : $hint;

?>

AJAX và ASP

Ví dụ ứng dụng AJAX và ASP

Chương này mình sẽ trình bày một ví dụ minh họa cách sử dụng kỹ thuật AJAX trên Client Side và ngôn ngữ
ASP trên Server Side.

Trong ví dụ này, khi người dùng gõ một ký tự trong trường input, hàm JavaScript có tên là showHint() sẽ
được thực thi. Hàm này được kích hoạt bởi sự kiện onkeyup.

<html>

<body>

<h3>Ban hay nhap mot ten trong truong input ben duoi:</h3>

<form action="">

First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

<script>

function showHint(str) {

var xhttp;

if (str.length == 0) {

document.getElementById("txtHint").innerHTML = "";
 return;

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("txtHint").innerHTML = xhttp.responseText;

};

xhttp.open("GET", "gethint.php?q="+str, true);

xhttp.send();

</script>

</body>

</html>

Giải thích

Đầu tiên, kiểm tra xem nếu trường input là trống hay không (điều kiện str.length == 0). Nếu là trống thì xóa
nội dung của Placeholder và thoát khỏi hàm.

Nếu trường input là không trống, thực hiện:

 Tạo một đối tượng XMLHttpRequest.

 Tạo một hàm để thực thi khi Response từ Server đã sẵn sàng.

 Gửi Request tới một ASP file (giả sử có tên là gethint.asp) trên Server.

 Bạn nên chú ý rằng tham số q được thêm vào "gethint.asp?q=" + str.

 Biến str giữ nội dung của trường input.

Nội dung của gethint.asp

ASP file này kiểm tra mảng các tên và sau đó trả về tên tương ứng cho trình duyệt.

<%

response.expires=-1

dim a(30)

'Mot mang cac ten Sinh Vien

a(1)="An"

a(2)="Bao"

a(3)="Chinh"

a(4)="Doanh"

a(5)="Em"

a(6)="Gam"

a(7)="Hoang"

a(8)="Kim"

a(9)="Linh"

a(10)="Ngoc"

a(11)="Oanh"

a(12)="Phuc"

a(13)="Anh"

a(14)="Nam"

a(15)="Sen"

a(16)="Dong"

a(17)="Sinh"

a(18)="Torres"

a(19)="Ronaldo"

a(20)="Messi"

a(21)="Suares"

a(22)="Morinho"

a(23)="Van Gan"

a(24)="Viet"

'Lay tham so q tu dia chi URL

q=ucase(request.querystring("q"))

'Tim tat ca cac hint co trong Array neu do dai cua q>0

if len(q)>0 then

hint=""

for i=1 to 30

if q=ucase(mid(a(i),1,len(q))) then

if hint="" then

hint=a(i)

else
 hint=hint & " , " & a(i)

end if

end if

next

end if

'Ket qua "Khong co suggestion nao" neu khong tim thay bat ky hint nao trong Array

'hoac ket qua la gia tri ten bat ky co trong Array

if hint="" then

response.write("Khong co suggestion nao")

else

response.write(hint)

end if

%>

Truy cập Database sử dụng AJAX

Chương này mình trình bày một ví dụ minh họa cách truy cập Database bởi sử dụng kỹ thuật AJAX. Trước khi
thực hiện ví dụ, bạn cần tạo một bảng có tên là ajax_vietjack trong Database (MySQL chẳng hạn) với các
trường như sau:

CREATE TABLE 'ajax_database' (

'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY ('name')
)

Tiếp đó bạn sử dụng lệnh INSERT trong MySQL để chèn dữ liệu vào trong bảng.

INSERT INTO 'ajax_database' VALUES ('Phuc', 90, 'm', 20);

INSERT INTO 'ajax_database' VALUES ('Hoang', 75, 'm', 44);
INSERT INTO 'ajax_database' VALUES ('Manh', 45, 'm', 87);
INSERT INTO 'ajax_database' VALUES ('Oanh', 22, 'f', 72);
INSERT INTO 'ajax_database' VALUES ('Huong', 27, 'f', 0);
INSERT INTO 'ajax_database' VALUES ('Lien', 35, 'f', 90);

Nội dung của HTML File trên Client

Tạo một ajax.html trên Client có nội dung giống như:
<html>

<body>

<script language="javascript" type="text/javascript">

<!--

function ajaxFunction(){

var ajaxRequest; // Khai bao mot bien

try{

// Voi cac trinh duyet hien dai: Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

}catch (e){

// Voi trinh duyet IE

try{

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e) {

try{

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

// Thong bao khi xay ra loi

alert("Co loi xay ra voi trinh duyet cua ban!");

return false;

// Tao mot ham de nhan du lieu duoc gui tu Server

// va sau do se update the div trong page

ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){

var ajaxDisplay = document.getElementById('ajaxDiv');

ajaxDisplay.innerHTML = ajaxRequest.responseText;

}
 }

// Bay gio, lay gia tri da nhap tu user va truyen no toi server script

var age = document.getElementById('age').value;

var wpm = document.getElementById('wpm').value;

var sex = document.getElementById('sex').value;

var queryString = "?age=" + age ;

queryString += "&wpm=" + wpm + "&sex=" + sex;

ajaxRequest.open("GET", "ajax-example.php" + queryString, true);

ajaxRequest.send(null);

//-->

</script>

<form name='myForm'>

Max Age: <input type='text' id='age' /> <br />

Max WPM: <input type='text' id='wpm' /> <br />

Sex:

<select id='sex'>

<option value="m">m</option>

<option value="f">f</option>

</select>

<input type='button' onclick='ajaxFunction()' value='Query MySQL'/>

</form>

<div id='ajaxDiv'>Hien thi ket qua</div>

</body>

</html>

Phần code trên sẽ cho bạn một màn hình có dạng:

Max Age:

Max WPM:
Sex:

Nội dung của PHP File trên Server

Để đơn giản, trong PHP file này mình sẽ lấy tất cả dữ liệu bao gồm age, wpm, sex từ Database và gửi dữ liệu
này quay trở lại Client.

Dưới đây là nội dung của ajax-example.php:

<?php

$dbhost = "localhost";

$dbuser = "dbusername";

$dbpass = "dbpassword";

$dbname = "dbname";

//Ket noi MySQL Server

mysql_connect($dbhost, $dbuser, $dbpass);

//Select Database

mysql_select_db($dbname) or die(mysql_error());

// Lay du lieu

$age = $_GET['age'];

$sex = $_GET['sex'];

$wpm = $_GET['wpm'];

// Ngan hien tuong SQL Injection boi su dung ham escape

$age = mysql_real_escape_string($age);

$sex = mysql_real_escape_string($sex);

$wpm = mysql_real_escape_string($wpm);

//Xay dung cau QUERY

$query = "SELECT * FROM ajax_database WHERE sex = '$sex'";

if(is_numeric($age))

$query .= " AND age <= $age";

if(is_numeric($wpm))
 $query .= " AND wpm <= $wpm";

//Execute query

$qry_result = mysql_query($query) or die(mysql_error());

//Ket qua:

$display_string = "<table>";

$display_string .= "<tr>";

$display_string .= "<th>Name</th>";

$display_string .= "<th>Age</th>";

$display_string .= "<th>Sex</th>";

$display_string .= "<th>WPM</th>";

$display_string .= "</tr>";

// Chen mot hang moi vao trong bang

while($row = mysql_fetch_array($qry_result)){

$display_string .= "<tr>";

$display_string .= "<td>$row[name]</td>";

$display_string .= "<td>$row[age]</td>";

$display_string .= "<td>$row[sex]</td>";

$display_string .= "<td>$row[wpm]</td>";

$display_string .= "</tr>";

echo "Query: " . $query . "<br />";

$display_string .= "</table>";

echo $display_string;

?>