CHƯƠNG 9: CÁC VẤN ĐỀ MỞ RỘNG
9.2.1 Giao tiếp với máy chủ
Chìa khóa cho việc giao tiếp khách/chủ trong Ajax là sử dụng đối tượng XMLHttpRequest của JavaScript. Đối tượng này được hầu hết các trình duyệt hỗ trợ, gồm Windows® Internet Explorer 5.0 và các bản cao hơn, Safari 1.2, Mozilla Firefox, Opera 8 và các bản cao hơn, và Netscape 7. Để hiểu được sự khác nhau giữa các giao tiếp khách/chủ truyền thống và giao tiếp khách/chủ dựa trên Ajax, tôi sẽ sử dụng một ví dụ. Theo truyền thống, để trình duyệt khách gửi nội dung đến máy chủ để xử lý hoặc lưu trữ trong một cơ sở dữ liệu, bạn thường sử dụng một hành động POST để gửi nội dung từ các trường đầu vào thu thập được ở phía khách tới máy chủ. Máy chủ xử lý nội dung này bằng cách sử dụng PHP (hoặc bất kỳ ngôn ngữ kịch bản lệnh nào mà bạn lựa chọn), đọc hoặc lưu dữ liệu bằng cách sử dụng một cơ sở dữ liệu, và trả lại các kết quả được nhúng bên trong mã HTML. Sau đó HTML sẽ được trình duyệt xử lý và một trang mới được biểu hiện ra cho người sử dụng cuối cùng xem. Hình 1 mô tả rõ kịch bản này.
Hình 1. Quy trình truyền thống để đệ trình dữ liệu và nhận kết quả
Thực tế là bằng cách sử dụng Ajax, bạn có thể phát triển toàn bộ ứng dụng web bằng cách sử dụng chỉ một trang HTML đơn lẻ, mặc dù tôi hết sức khuyên bạn đừng làm như vậy. Theo cách truyền thống, nếu bạn muốn gửi một biểu mẫu cho máy chủ, bạn thiết lập một hành động (action) của biểu mẫu đó và chỉ định rõ kiểu hành động là POST. Với Ajax, bạn không thực sự đệ trình một biểu mẫu trực tiếp cho máy chủ. Thay vào đó, bạn gọi một hàm JavaScript, nó kiểm tra lại và thu thập các giá trị từ biểu mẫu của bạn và sau đó gửi dữ liệu đến một hàm ở phía máy chủ bằng cách sử dụng XMLHttpRequest. Kết quả được gửi trả lại tại một điểm cho trình khách, sau đó trình khách xử lý kết quả và cập nhật các phần của trang cần được cập nhật. Trong trường hợp này, trang đó không được làm mới lại toàn bộ. Do đó, cần ít thời gian hơn để xử lý mã HTML. Kết quả là hiệu năng hoạt động tốt hơn. Hình 2 minh hoạ quy trình này hơi khác đi như thế nào khi sử dụng Ajax để tạo ra một cập nhật cho trang web chứ không phải là làm mới toàn bộ trang.
Figure Quy trình Ajax để đệ trình và nhận kết quả
Hãy quan sát các bước cần thiết để thực hiện giao tiếp với máy chủ, một thực tế từ mã JavaScript của bạn. Trước tiên, bạn định nghĩa biểu mẫu sẽ trông như thế nào, như trong Liệt kê 1.
Mẫu HTML
<body>
My First Ajax Page <form name="myForm">
Press button to view server time: <input type="button" value="Update" onClick="ajaxFunction();" />
Server Time Is: <input type="text" name="time" /> </form>
</body>
Mẫu này sinh ra kết quả đầu ra như Hình 5.
Figure Đầu ra của biểu mẫu HTML
Biểu mẫu này không làm điều gì thật sự có ích, nhưng hy vọng nó giúp bạn bắt đầu thấy những nơi mà bạn có thể tích hợp Ajax vào mã của mình.
Hãy chú ý rằng sự kiện onClick được xác định trên nút nhấn. Sự kiện này được thiết lập để gọi một hàm JavaScript có tên là ajaxFunction. Đây là nơi mọi điều trở nên thú vị trong thế giới Ajax. Trong phạm vi phương thức này, bạn thực hiện một vài bước, chúng được giải thích trong phần này:
1. Tạo một cá thể của đối tượng XMLHttpRequest cần có.
2. Mở một kết nối đến dịch vụ phía máy chủ mà bạn muốn gọi.
3. Báo cho Ajax biết sẽ gọi phương thức nào khi mã phía máy chủ thi hành xong và trả lại kết quả.
4. Gửi yêu cầu.
5. Phản hồi không đồng bộ.