10 bí quyết trong lập trình Ajax

10 bí quyết trong lập trình Ajax

Giờ đây, khi nhắc đến Ajax, chắc hẳn bạn - những người yêu
thích lập trình - không còn cảm thấy xa lạ như trước kia mà thậm
chí còn hình dung ra sự giản đơn và thuận tiện biết bao khi ứng
dụng nó.
Nhưng, liệu bạn đã nắm vững những quy tắc then chốt, những
“mẹo nhỏ” hữu ích khi lập trình với Ajax chưa nhỉ? Dù bạn đã rõ
hay...trót quên, vẫn xin mời bạn tham khảo bài viết này như một
cách ôn lại kiến thức trọng tâm đầy bổ ích!

A. 10 lưu ý vàng cần ghi nhớ

1. Đánh dấu trang và quay lại

Khi tự bạn điều khiển những gì đang diễn ra trên website, sử dụng JavaScript để làm xuất hiện
hay biến mất các đối tượng trên trang hay thậm chí là sau khi toàn bộ trang được hiển thị hoàn
toàn, bạn sẽ nhanh chóng nhận ra rằng, nút Quay lại (Back) của trình duyệt đã mất hoàn toàn tác
dụng! Nút Quay lại này hoạt động bằng cách dùng đối tượng ‘history’ của trình duyệt, lưu lại
danh sách tất cả các trang đã được truy cập liên tiếp gần đây nhất. Nhưng, nếu bạn không mở bất
kỳ trang mới nào (vâng, như bạn biết, Ajax không cần phải refresh trang khi cần hiển thị thông
tin), thì đối tượng ‘history’ kia rõ ràng chẳng lưu được chút manh mối gì. Đây là điều bạn cần
lưu ý khi viết các ứng dụng Ajax.

Và nếu như cần thiết, hãy trang bị cho site của bạn một nút Back của riêng mình. Người dùng có
thể muốn quay lại cửa sổ trước đó và bạn có nhiệm vụ phải lưu giữ những thông tin di chuyển
này. Thật đáng tiếc là ngay cả tiện ích đánh dấu trang (Bookmark) cũng trở nên vô dụng như thế!
Đáp án cụ thể cho bài toán này ra sao, xin được dành câu trả lời cho bạn nghiên cứu.

2.
Đưa ra thông báo trực quan

Phần lớn thời gian của mình, Ajax hoạt động một cách “thầm lặng” và điều này đôi khi “làm
khó” người dùng. Nếu bạn tải về một lượng lớn thông tin và đang chờ đợi phản hồi từ phía máy
chủ, chắc chắn một hình ảnh “nhấp nháy” nào đấy sẽ vô cùng có ích với người dùng. Một chiếc
đồng hồ cát xoay tròn, và khách hàng sẽ biết rằng họ cần kiên nhẫn! B
ức hình này nên là dạng
ảnh động (.gif), đồng thời phối hợp với đoạn mã JavaScript dưới đây, hiệu ứng “ẩn, hiện” sẽ
càng thêm phần thú vị:

document.getElementById(“image1”).style.visibility= “visible”;
document.getElementById(“image1”).style.visibility= “hidden”;

Rõ ràng rằng, người dùng luôn muốn thấy một tín hiệu nào đấy báo cho họ biết rằng kết nối đang
được thực hiện, dạng như thanh tiến trình màu xanh với các gạch nối càng lúc càng đầy cũng là
một ý tưởng không tồi, và chắc ch
ắn họ sẽ hài lòng với site của bạn!

3. Hãy để người dùng "tự nhiên"

Các ứng dụng Ajax dường như đang tự mình thi hành “phận sự” bởi chúng được thực thi phía
sau giao diện người dùng. Chúng luôn sẵn sàng kết nối tới server, ngay cả khi người dùng không
hề mong muốn – trong trường hợp họ vô tình gõ nhầm thông tin chẳng hạn. Rất dễ hình dung
cảm giác lúc đó của bạn ra sao, khi ngay lúc bạn vừa gõ một chữ nào đấy, lập tức thông tin này
đã được lưu lại database mà chẳng hề “xin phép” lấy một lời. Vậy nên, để tốt nhất, bạn hãy lưu ý
một số điều nhỏ sau:

- Đừng bao giờ lưu thông tin ngay lập tức, vừa tốn băng thông mà chưa chắc đã được sự đồng ý
của người dùng.

- Hãy nhớ rằng, người dùng luôn muốn “giao tiếp” nhiều hơn với ứng dụng. Hãy làm các thủ tục

xác thực dữ liệu ngắn g
ọn hơn, đỡ mất thời gian hơn và cho người dùng quyền quyết định khi
nào thì cần xác thực. Đấy chính là yếu tố tiên quyết trong quá trình thiết kế giao diện người
dùng!

- Cuối cùng, đừng quên cung cấp cho người dùng cách thức “sửa sai” thao tác (Undo).

4. Ghi nhớ các trình duyệt

Thế giới thật rộng lớn và cũng có rất nhiều trình duyệt! Người dùng sử dụng trình duyệt họ yêu
thích, còn bạn, sẽ ra sao khi chỉ kiểm tra ứ
ng dụng của mình trên một loại trình duyệt mà thôi?
Sẽ thật tệ nếu bạn chỉ viết riêng cho Internet Explorer, Firefox mà quên mất rằng, trong thế giới
World Wide Web, có vô vàn trình duyệt khác nhau, có loại thậm chí còn không hỗ trợ
JavaScript, loại khác lại mặc định tắt chúng đi! Hãy ghi nhớ điều này và xây dựng trước một
phương án dự phòng không bao giờ là thừa cả.

5. Cho người dùng thấy sự thay đổi

Sức mạnh của Ajax chính là việ
c hiển thị dữ liệu trên một trang không cần refresh bằng cách
dùng thẻ
, , hay ngay cả các đối tượng thuần HTML như textbox chẳng hạn. ứng dụng Ajax có thể thay
đổi dữ liệu ngay sau khi chúng thông báo tới server, nhưng lại không thông báo với người dùng.
Lấy ví dụ, bạn có một bảng dữ liệu và mặc định rằng sẽ được tự động cập nhật ngay khi database
có thay đổi. Người dùng có thể không nhận thấy rằng thông tin đã không còn như trước, rằng bạn
đã thay đổi thành phần trang, và đương nhiên là họ đã hụt mất những thông tin quan trọng. Lại
một lần nữa, việc phát ra “tín hiệu” thay đổi tới người dùng sẽ giúp bạn rất nhiều. Nếu bạn vừa
thay đổi một số chữ, đơn giản thôi, hãy làm cho nó hiển thị khác đi một chút. Đoạn mã sau dùng
để thay đổi màu chữ trong thẻ

thành màu đỏ bằng cách sử dụng linh hoạt thuộc tính style:

document.getElementById(“targetDiv”).style.color = “red”;.

Còn nếu bạn muốn thay đổi màu nền, hãy dùng đoạn mã

document.getElementById(“targetDiv”).style.background-color = “red”;

Trong đó, “targetDiv” là mã ký hiệu của thẻ Div mà bạn gán cho.

6. Tránh làm chậm trình duyệt

Những ứng dụng Ajax có thể rất lớn và chắc chắn chiếm dụng một lượng tài nguyên vật lí không
nhỏ. Tốc độ CPU, bộ nhớ RAM có thể bị “ngốn” rất nhiều nếu như bạn không quan tâm xử lí
những đối tượng phức tạp trong quá trình khởi tạo hay tham chiếu. Thông thường, một số nhà
phát triển ứng dụng lại xài Ajax cũng chỉ bởi vì nó đang “nóng”!! Quan niệm này cần được lưu
tâm hơn! Đúng vậy, Ajax có thể giải quyết được nhiều vấn đế, nhưng bạn không nhất thiết phải
dùng nó nếu chẳng có lí do gì. Đừng quên rằng, không phải trình duyệt nào cũng hỗ trợ Ajax
(hoặc thậm chí ở chế độ mặc định tắt JavaScript). Vậy nên, đừng vì độ “hot” của Ajax mà quên
đi mất tính khả dụng và tôc độ của chương trình bạn nhé!

7. Quản lý những thông tin riêng tư

Với Ajax, thật dễ để bạn gửi thông tin lên server mà không cần sự chú ý của người dùng. Nói
theo cách khác, quá trình liên lạc giữa máy khách (client) và máy chủ (server) được diễn ra một
cách “thầm lặng”. Nhưng sự thật là, không phải người dùng nào cũng muốn gửi thông tin lên
server ngay. Bạn hãy lưu tâm đến vấn đề nhạy cảm này! Mặc dù thương mại điện tử tại Việt
Nam chỉ mới chập chững những bước đầu tiên, những tổn thất xảy ra là điều không thể tránh
khỏi, nhưng chính vì thế bạn càng phải nâng cao tinh thần bảo vệ người dùng. Internet rõ ràng
đầy rẫy những cạm bẫy và sự thật thì môi trường này không phải là nơi hoàn hảo để lưu giữ

thông tin có tính riêng tư. Nếu bạn định gửi mã số Thẻ tín dụng hoặc mã Bảo mật của thẻ mà
không được sự đồng ý của người dùng, rất có thể bạn sẽ phải đói mặt với nhiều rắc rối! Do đó,
hãy cho người dùng thấy được lợi ích của việc hoài nghi: Luôn hỏi trước khi gửi dữ liệu!

8. Xây dựng phương án dự phòng

Sự sống còn của Ajax phụ thuộc vào tín hiệu kết nối tới server, nhưng người dùng thì không phải
lúc nào cũng trực tuyến. Server của bạn có thể bị “chết đứng” bất cứ lúc nào, và người dùng rất
có thể đang làm việc với các thông tin được lưu trong bộ đệm trình duyệt từ trước đó! Nếu bạn
không thể kết nối đến server khi đang online, thì việc xây dựng một phương án dự phòng là rất
cần thiết (một server dự trữ chẳng hạn). Cũng đừng quên việc hỗ trợ các trình duyệt không có
JavaScript nữa nhé!

9. Hiển thị thông tin trên các cỗ máy tìm kiếm

Cơ chế tìm kiếm của Google dựa trên việc sàng lọc thông tin từ hàng tỉ website theo thông số mà
người dùng cung cấp, nhưng ứng dụng Ajax của bạn lại load thông tin lên dựa trên sự tương tác
của người dùng mà chẳng cần refresh lại trang - điều này khiến Google sẽ không thể “nhìn” th
ấy
được những thông tin như thế. Vậy nên ghi nhớ kỹ rằng, để thông tin trên website của bạn có thể
được các cỗ máy tìm kiếm “mò” tới, bạn cần cung cấp những dữ liệu đặc tả nội dung trang. Làm
điều này như thế nào? Không khó! Chỉ cần sử dụng các thẻ < meta> đặt trong phân đoạn của mã
trang, các cỗ máy tìm kiếm có thể “đánh dấu” bạn dễ dàng! Và nếu thực sự hứng thú về các thẻ <
meta> này, mời bạn ghé qua địa chỉ sau đây để tìm hiểu thêm cặn kẽ:
/>

10. Cuối cùng, xin lưu ý đến bộ đệm trình duyệt

Một số trình duyệt như Internet Explorer thường lưu lại thông tin về các website đã truy cập
trong bộ đệm riêng của nó (thuật ngữ chuyên ngành gọi là “cache”). Điều này đồng nghĩa với

việc, nếu ai đó truy cập đến cùng một địa chỉ URL trong một khoảng thời gian giới hạn nào đấy,
thông tin hiện lên cho họ có thể chính là những thông tin vừa xem (đượ
c lấy ra từ cache).

Về nguyên tắc, điều này làm quá trình tải trang nhanh chóng hơn, các thông tin được coi là giống
với lần truy cập trước có thể sẽ không cần phải tải về lần nữa, mà chỉ cần lấy từ cache ra và hiển
thị lên. Nhưng với các website có ứng dụng Ajax thì đây đúng là một vấn đề lớn! Tại sao lại như
vậy? Rất đơn giản, ở Ajax không có tính năng làm mới toàn bộ trang mà chỉ là một vài thành
phần trong trang! Do đó, nếu khi bạn đã thay đổi dữ liệu trên trang mà kết quả trả về giống hệt
như lúc trước thì không còn nghi ngờ gì nữa, bạn chắc hẳn đã gặp rắc rối rồi! Vậy nên, để hạn
chế việc lưu thông tin đệm trong ứng dụng Ajax, bạn có thể đặt nhiều thông số header khác nhau
khi gửi trả dữ liệu từ server, như đoạn code PHP dưới đây:

header(“Cache-Control”, “no-cache”);
header(“Du-lieu-header-tuy-y”, “no-cache”);
header(“Expires”, “-1”);

Mặc dù vậy, đoạn code trên lại không có tác dụng gì với Internet Explorer do việc lưu thông tin
trong cache của IE lại phụ thuộc phần lớn vào địa chỉ trình duyệt. Do đó, có một cách rất hay là
luôn thay đổi địa chỉ ứng dụng khi truy vấn đến server. Để làm điều này, bạn chỉ cần khai báo
một biến ngẫu nhiên nào đấy (mà server chẳng dùng làm gì) vào phần cuối của địa chỉ, chẳng
hạn như:

var myUrl = “data.php?name=bcvt” + “&t=” + new Date().getTime();

Một ý tưởng không tồi khi đưa thêm biến “t” vào địa chỉ URL trên, với “t” là thời gian hiện tại
tính bằng mili giây. Vì địa chỉ này chắc chắn chưa từng được truy cập, nó sẽ không bị lưu trong
bộ đệm cache trước đây và ứng dụng của bạn chắc chắn sẽ chạy “ngon lành”!

B. Lời kết

Như bạn thấy đó, việc l
ập trình Ajax tuy hết sức thú vị những cũng ẩn chứa nhiều “rắc rối nho
nhỏ” phải không nào? Nếu không biết cách khắc phục chúng hoặc không để ý lưu tâm, các ứng
dụng của bạn rất có thể sẽ hoạt động không được như mong muốn khi thiết kế. Hy vọng qua bài
viết, các bạn hiểu được phần nào những “yếu điểm” của Ajax để từ đó tìm tòi hơn, sáng t
ạo ra
những “chiêu thức” khắc phục cho riêng mình.