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ẻ <meta id="refresher"> 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ẻ <Div> 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ẽ: http://www.searchenginewatch.com/webmasters/meta.html

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.