1.1. Ajax là gì
1.1.1. Lịch sử
Phương pháp tải không đồng bộ nội dung trên một trang web đã xuất hiện trong thành tố IFRAME của Internet Explorer 3 (1996) và thành tố LAYER của Netscape 4.0 năm 1997. Tuy nhiên, hầu hết các câu chuyện về nguồn gốc của AJAX được bắt đầu từ khi Microsoft phát triển công nghệ Remote Scripting vào năm 1998. Khi giới thiệu Internet Explorer 4.0, Microsoft đã sử dụng mô hình đối tượng DOM khác biệt. Đến năm 2000, Netscape hoàn toàn đánh mất thị trường trình duyệt vào tay hãng phần mềm của Bill Gates và thành tố LAYER cũng không còn được các chuyên gia phát triển web chú ý tới. Vài năm sau, AJAX mới tạo được sự quan tâm của giới công nghệ và trở thành công cụ cải tiến giao diện người dùng cho ứng dụng web. Thuật ngữ Ajax được Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 năm 2005 trong bài viết nối tiếng của ông trên trang Adaptive Path để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 nãm trước. Từ đó, AJAX trở thành trung tâm trong mọi câu chuyện liên quan đến thế hệ Web 2.0.
1.1.2. Khái niệm
Ajax viết tắt của "Asynchronous JavaScript And XML". Ajax được xây dựng từ các công nghệ phổ biến: JavaScript và XML và sự truyền thông bất đồng bộ giữa browser và server.
Ajax Là một kỹ thuật phát triển web nhằm tạo ra những ứng dụng web có tính tương tác cao và là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách chia nhỏ dữ liệu và chỉ cập nhật những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.
Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:
• HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
• Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
• Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. (Mặc dù, việc trao đổi này có thể được thực hiện với nhiều định dạng như HTML, văn bản thường, JSON và thậm chí EBML, nhưng XML là ngôn ngữ thường được sử dụng).
• XML thường là định dạng cho dữ liệu truyền, mặc dù bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.
Giống như DHTML, LAMP hay SPA, Ajax tự nó không phải là một công nghệ mà là một thuật ngữ mô tả việc kết hợp một nhóm nhiều công nghệ với nhau. Trong thực tế, các công nghệ dẫn xuất hoặc kết hợp dựa trên Ajax như AFLAX cũng đã xuất hiện.
Khi được định nghĩa, nó được hình dung như sau:
• XHTML hay HTML và Cascading Style Sheets (CSS) cung cấp các tiêu chuẩn thể hiện nội dung trang Web với người dùng.
• Document Object Model (DOM) cung cấp cấu trúc cho phép hiển thị động nội dung và các tương tác liên quan. DOM mở ra nhiều cách thức mạnh cho người dùng khi muốn truy cập và thao tác với đối tượng nằm trong một văn bản bất kỳ.
• XML và XSLT cung cấp kiểu định dạng cho dữ liệu, để dữ liệu có thể được thao tác, truyền tải hoặc trao đổi giữa máy chủ (server) và máy khách (client).
• XML HTTP Request: Điểm bất cập lớn nhất trong xây dựng ứng dụng Web là mỗi lần một webpage được tải về trình duyệt của người dùng, kết nối server liên quan sẽ bị cắt. Hơn nữa, đường dẫn bên trong trang còn đòi hỏi phải thiết lập một kết nối khác với server và tải về toàn bộ trang cho dù người dùng chỉ muốn mở rộng một đường link đơn giản. XML HTTP Request cho phép truy vấn dữ liệu không đồng bộ và đảm bảo các trang web không bị load trở lại khi thay đổi trong yêu cầu người dùng ở mức nhỏ nhất.
• JavaScript (JS): là ngôn ngữ kịch bản hợp nhất các đối tượng để hoạt động với nhau một cách hiệu quả, do đó giữ vai trò đáng kể trong ứng dụng web.
Chính bởi các thành phần này mà khi nói đến AJAX người ta thường nghĩ đến khả năng tương tác cao, tốc độ nhanh và dễ dùng. Công nghệ trong AJAX phong phú hơn nhiều và rất thân thiện cho người dùng, vì các ứng dụng Web được thiết kế tương tự ứng dụng để bàn “truyền thống” như Google Docs và Spreadsheets, Google Maps hay Yahoo! Mail.
1.1.3. So sánh với các ứng dụng web truyền thống
Hiểu nôm na: Điểm khác biệt cơ bản nhất của công nghệ này là việc xử lý thông tin được thực hiện trên máy yêu cầu dịch vụ thay vì trên máy xử lý yêu cầu dịch vụ như cách truyền thống. Máy xử lí yêu cầu dịch vụ chỉ làm một việc đơn giản là nhận thông tin từ máy khách và trả các dữ liệu về cho máy khách. Máy yêu cầu dịch vụ xử lý sơ bộ thông tin của người dùng nhập vào, sau đó chuyển về máy xử lí yêu cầu dịch vụ rồi nhận dữ liệu từ máy xử lí yêu cầu dịch vụ và xử lý để hiển thị cho người dùng.
Các ứng dụng Ajax phần lớn trông giống như thể chúng được đặt trên máy của người sử dụng hơn là được đặt trên một máy phục vụ thông qua Internet. Lý do: các trang được cập nhật nhưng không nạp lại (refresh) toàn bộ. "Mọi thao tác của người sử dụng sẽ gửi mẫu của một lời gọi JavaScript tới bộ xử lý (engine) Ajax thay vì tạo ra một yêu cầu HTTP (HTTP request)", Jesse James Garrett đã ghi như vậy trong bài luận đầu tiên định nghĩa về thuật ngữ này. "Mọi đáp ứng cho thao tác của người sử dụng sẽ không cần truy vấn tới máy phục vụ – ví dụ như việc kiểm tra một cách đơn giản sự hợp lệ của dữ liệu, sửa đổi dữ liệu trong bộ nhớ và thậm chí một vài thao tác duyệt trang – bộ xử lý Ajax tự nó đảm nhận trách nhiệm này. Nếu bộ xử lý cần gì từ máy phục vụ để đáp ứng – như khi nó gửi dữ liệu để xử lý, tải về bổ sung các mã giao diện hay nhận về dữ liệu mới – nó sẽ thực hiện các yêu cầu tới máy phục vụ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người sử dụng với ứng dụng web".
Các ứng dụng truyền thống về bản chất là gửi dữ liệu từ các form, được nhập bởi người sử dụng, tới một máy phục vụ web. Máy phục vụ web sẽ trả lời bằng việc gửi về một trang web mới. Do máy phục vụ phải tạo ra một trang web mới mỗi lần như vậy nên các ứng dụng chạy chậm và "lúng túng" hơn.
Mặt khác, các ứng dụng Ajax có thể gửi các yêu cầu tới máy phục vụ web để nhận về chỉ những dữ liệu cần thiết, thông qua việc dùng SOAP hoặc một vài dịch vụ web dựa trên nền tảng XML cục bộ khác. Trên máy thân chủ (client), JavaScript sẽ xử lý các đáp ứng của máy chủ. Kết quả là trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều. Thời gian xử lý của máy chủ web cũng vì thế mà được giảm theo vì phần lớn thời gian xử lý được thực hiện trên máy khách của người dùng.
Có thể xem xét một website nhiếp ảnh cho phép người sử dụng nhập các tiêu đề như một ví dụ về cách làm việc của Ajax. Với một ứng dụng web truyền thống, toàn bộ trang web bao gồm cả các ảnh cần được nạp lại. Với các công nghệ Ajax, DHTML có thể thay thế chỉ những đoạn tiêu đề và kết quả là người dùng có những giao dịch "mượt mà" đáng quan tâm.
1.1.4. Ưu nhược điểm
1.1.4.1. Ưu điểm
• Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang. Nếu sử dụng các phương pháp truyền thống, những nội dụng đó sẽ phải nạp lại toàn bộ với từng yêu cầu. Tuy nhiên, nếu sử dụng Ajax, một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải cập nhật, do đó giảm lượng lớn băng thông và thời gian nạp trang.
• Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý Ajax, thay vì tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy chủ. Nếu cần gì từ server, như tải về bổ sung mã giao diện hay nhận dữ liệu mới, Ajax sẽ truyền yêu cầu tới máy chủ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người dùng với ứng dụng web. Do đó người dùng không phải chờ đợi server thực hiện, các giao dịch sẽ trở nên dễ dàng và nhanh chóng hơn.
• Việc sử dụng Ajax có thể làm giảm các kết nối đến server, do các mã kịch bản (script) và các style sheet chỉ phải yêu cầu một lần
1.1.4.2. Nhược điểm
• Các trang web được tạo động không được ghi vào bộ lưu lịch sử lướt web của trình duyệt, do đó nút "back" (quay lui) của trình duyệt sẽ mất tác dụng quay lại trang thái trước đó của trang sử dụng Ajax, thay vào đó sẽ quay lại trang web trước đó mà người dùng ghé thăm. Để khắc phục có thể dùng các IFrame không hiển thị để gây ra sự thay đổi trong lịch sử trình duyệt và thay đổi phần neo của URL (bằng mã a #) khi chạy Ajax và theo dõi những sự thay đổi của nó.
• Việc cập nhật các trang web động cũng gây khó khăn cho người dùng trong việc bookmark (đánh dấu địa chỉ yêu thích) một trạng thái nào đó của ứng dụng. Cũng có những các khắc phục cho vấn đề này, một số trong đó sử dụng mã xác định đoạn (fragment identifier) URL (phần URL ở sau dấu '#') để lưu vết, và cho phép người dùng đánh dấu và quay lại một trạng thái nào đó của ứng dụng.
• Do hầu hết các web crawler không thực thi mã JavaScript, các ứng dụng web sẽ cung cấp một phương thức thay thế để truy cập nội dung thông thường được truy cập bằng Ajax, để cho phép các máy tìm kiếm lập chỉ mục chúng.
• Bất kỳ người dùng nào có trình duyệt không hỗ trợ Ajax hay JavaScript, hoặc đơn giản là đã bị vô hiệu hóa JavaScript, sẽ đương nhiên không thể sử dụng Ajax. Tương tự, các thiết bị như điện thoại di động, PDA, và thiết bị đọc màn hình (screen reader) có thể không hỗ trợ JavaScript hay đối tượng XMLHttp được yêu cầu. Ngoài ra, các thiết bị đọc màn hình nếu có thể sử dụng Ajax đi nữa cũng vẫn có thể không đọc chính xác các nội dung động.
• Việc thiếu các chuẩn cơ bản của Ajax đồng nghĩa với việc không có nhiều sự chọn lựa thực tiễn tốt nhất để kiểm tra các ứng dụng Ajax. Các công cụ kiểm thử cho Ajax thương không hiểu các mô hình sự kiện, mô hình dữ liệu và giao thức của Ajax.
• Mở ra một các thức khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển web có thể không kiểm thử hết được.
Ghi chú
Web crawler, web spider hay web robot (còn gọi là bọ tìm kiếm) là một chương trình tự động tìm kiếm trên Internet. Nó được thiết kết để thu thập tài nguyên Internet (trang Web, hình ảnh, video, tài liệu Word, PDF hay PostScrips) , cho phép máy tìm kiếm đánh chỉ số sau đó.
Để đánh chỉ số các tài nguyên Web, mỗi bọ tìm kiếm (robot) sẽ đi theo các liên kết mà nó tìm thấy tại một trang trung tâm. Sau đó, mỗi trang đã duyệt sẽ được ghi nhớ lại và gán cho tần số đánh lại chỉ số dựa vào mức độ cập nhật thường xuyên hay không của trang.
Một số bọ tìm kiếm phổ biến của các máy tìm kiếm :
• Googlebot của Google
• MSNBot của MSN
• Slurp của Yahoo
• Scooter của Alta Vista
• Baidu của Baidu
1.1.5. Những điểm cần lưu ý khi sử dụng Ajax
Những tính năng mạnh mẽ mà Ajax đem lại đôi khi lại trở thành trở ngại trong một số trường hợp. Vì thế trong quá trình tạo những dự án có sử dụng Ajax, bạn cần chú ý đến một số điểm sau đây:
• Tạo bối rối cho người dùng nếu bạn áp dụng công nghệ Ajax mà không suy nghĩ kỹ. Người dùng thường đã quen với việc nhấn nút để thực hiện một tác vụ nào đó - trong khi Ajax cho phép bạn thực hiện thay đổi ngay lập tức. Đây là một điểm yếu khá nghiêm trọng: Bản chất của Ajax là không dung thứ ("forgiveless"). Chính vì bạn có thể thực hiện các thay đổi ngay lập tức, đôi khi người dùng chỉ vô tình cũng đã thay đổi dữ liệu trong cơ sở dữ liệu của bạn mà. Cách an toàn nhất là chỉ sử dụng Ajax để thực hiện các tác vụ kiểm tra mà không tác động trực tiếp đến dữ liệu, hoặc là bạn phải chắc chắn rằng mình cung cấp một cơ chế để khôi phục các lỗi vô tình, hoặc là bạn tạo ra một cơ chế để xác nhận mỗi khi hành động của người dùng có khả năng tạo ra những thay đổi dữ liệu.
• Tương thích: Ajax chỉ hoạt động nếu trình duyệt hỗ trợ đối tượng XMLHttpRequest. Đây là vấn đề mà Gmail gặp phải đối với trình duyệt Opera trước khi Opera 8 ra đời. Tuy nhiên, đến thời điểm hiện tại thì các trình duyệt phổ biến nhất đều hỗ trợ XMLHttpRequest (Firefox, Internet Explorer, Opera 8, Sarafi). Cho dù vậy, hãy luôn xây dựng một cơ chế dự phòng trường hợp trình duyệt không hỗ trợ (ví dụ nếu người dùng sử dụng máy Palm,…)
• Tương tác người dùng: mặc dù Ajax giải quyết được một vấn đề then chốt về tương tác người dùng của các ứng dụng web, nó lại tạo ra một số vấn để nhỏ khác. Chính vì Ajax thực hiện tác vụ quá nhanh nên đôi khi người dùng không tin là nó đã được thực hiện! Tất nhiên đây đơn thuần là vấn đề về thói quen, tuy nhiên để đảm bảo khả năng tương tác ở mức tốt nhất, bạn nên có một cơ chế giúp xác nhận những gì đang diễn ra ở bên trong (bạn sẽ được biết qua sau khi đọc xong phần về control UpdateProgress trong ASP.NET Ajax).
1.1.6. Ứng dụng của Ajax
Có thể nói, kể từ khi cái tên "Ajax" ra đời đến nay, tiềm năng của nó vẫn chưa được đánh giá hết và các nhà phát triển web vẫn còn đang mày mò nghiên cứu tìm ra những ứng dụng của công nghệ này. Đến thời điểm hiện tại, đã có rất nhiều những ứng dụng thể hiện khả năng đặc biệt của công nghệ này chẳng hạn các ứng dụng khá phổ biến như Gmail, Google Map và Window Live. Việc sử dụng Ajax làm cho các trang web có khả năng tương tác như các ứng dụng phần mềm cho desktop. Thử duyệt Google Map hoặc Window Live chắc chắn bạn sẽ không khỏi bất ngờ trước những gì mà Ajax có thể làm được: thử phóng to, thu nhỏ, di chuyển quanh bản đồ - bạn gần như không phải đợi chút xíu nào; hình ảnh cứ xuất hiện thành một chuỗi liên tục như bạn đang xem bản đồ trên phần mềm ở máy mình vậy.
Ngoài việc ứng dụng cho những dự án lớn như Google Map (http://maps.google.com/), Ajax cũng thể hiện thế mạnh của mình trong những ứng dụng nhỏ và đơn giản. Một trong những ứng dụng nhỏ cần nói tới nhất của Ajax là tính năng "Live Search", bắt chước công nghệ Spotlight Apple được giới thiệu trong phiên bản Mac OSX 10.4 Tiger. Chỉ cần gõ một ký tự vào ô tìm kiếm và gần như ngay lập tức, một danh sách các kết quả xuất hiện bên dưới, gõ thêm một ký tự nữa và danh sách đó tự động rút ngắn lại,… Bạn có thể làm được chức năng này sau khi đọc về AutoComplete Extender.
Một số ứng dụng khác cũng khá phổ biến như:
1. Tính năng "Auto save" (lưu tự động): Sử dụng Ajax, bạn có thể bắt chước tính năng của các phần mềm soạn thảo tự động lưu những gì người dùng đã gõ được sau một khoản thời gian nhất định (sẽ thật tuyệt nếu như các trình webmail có tính năng này. Nếu bạn sử dụng Gmail, bạn có thể sử dụng tính năng này bằng cách tải về trình bổ sung)
2. Kiểm tra trùng lặp: bạn tạo ra một mẫu đơn đăng ký với yêu cầu là tên đăng nhập phải không bị trùng lặp với bất kỳ ai trong cơ sở dữ liệu. Thông thường, bạn sẽ bắt người dùng nhập hết thông tin và gửi đơn đăng ký lên máy chủ và rồi mới kiểm tra. Tại sao không kiểm tra ngay sau khi người dùng vừa mới chọn xong tên? Đây chính là ví dụ mà tớ đã viết ra để minh họa cho bài viết này (xem phân sau).
3. Dịch trực tuyến: bạn có thể sử dụng Ajax để tạo ra tính năng cho phép người dùng chỉ cần chọn một từ trên trang web của bạn và hiển thị từ tương ứng của các ngôn ngữ khác (sử dụng các dịch vụ của các trang tự điển)
4. Các trang bán hàng trực tuyến: cập nhật theo thời gian thực danh sách những gì người mua chọn và giá cả mà không cần phải tải lại trang web (ví dụ người dùng nhấn chọn thêm một mặt hàng, ngay lập tức nó xuất hiện trong danh sách bên cạnh và tổng giá tiền cũng sẽ được cập nhật tương ứng)
5. Hệ thống đánh giá ở các trang web nhạc số: Người dùng nhấn một nút đánh giá và ngay lập tức nó sẽ được cập nhật vào hệ thống (hai trang Nhạc Số và Nhạc Việt có lẽ nên tìm hiểu áp dụng kỹ thuật này)
(Tổng hợp từ nhiều nguồn trên Internet)
Mời các bạn đón xem
Bài 1- Part 2- Kĩ thuật lập trình Ajax
Yin Yang
23-01-2010, 02:29 PM
1.2. Kĩ thuật lập trình Ajax
1.2.1. Các thành phần của Ajax
• JavaScript: theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống như Java, JavaScript có cú pháp tương tự C, ngắn gọn và dễ hiểu. JavaScript là ngôn ngữ kịch bản trên web phổ biến nhất, và được hỗ trợ trên tất cả các trình duyệt phổ biến. Các ứng dụng Ajax được xây dựng trên JavaScript.
• Document Object Model (DOM): Định nghĩa cấu trúc của một trang web và tập hợp các đối tượng có thể truy xuất để lập trình thông qua JavaScript. Trong lập trình Ajax, việc nắm vững mô hình DOM giúp cho việc hiển thị lại một phần của trang hiệu quả hơn.
• Cascading Style Sheets (CSS): Định nghĩa cách thức hiển thị, giao diện các thành phần trên trang web. CSS được dùng để thay đổi giao diện tương tác bên ngoài trong ứng dụng Ajax.
• XMLHttpRequest: Cho phép các mã kịch bản phía client thực hiện một yêu cầu HTTP. Ứng dụng Ajax sử dụng đối tượng XMLHttpRequest để tạo các yêu cầu bất đồng bộ đến server nhằm hạn chế việc nạp lại toàn bộ trang.
Ghi chú Cái tên XMLHttpRequest có thể gây một chút nhầm lẫn bởi vì dữ liệu có thể được truyền đi dưới dạng XML hoặc dạng thuần văn bản. Nền tảng ASP.NET Ajax phụ thuộc vào một định dạng gọi là JavaScript Object Notation (JSON) để phân phối dữ liệu đến và từ server.
Liệt kê các công nghệ thì rất dễ dàng, tuy nhiên để hiểu được chúng làm việc như thế nào, và làm sao để ứng dụng trong những dự án khác nhau để có thể đạt hiệu quả tốt nhất thì không phải đơn giản.
Bạn có thể hình dung rằng trong một ứng dụng Ajax, JavaScript như một chất keo dính kết nối mọi thứ lại với nhau. Khi dữ liệu được cần tới, đối tượng XMLHttpRequest được sử dụng để tạo một yêu cầu tới server. Khi dữ liệu được trả về, DOM và CSS sẽ cập nhật sự hiển thị của trang trên trình duyệt một cách linh động.
1.2.2. Lập trình Web bất đồng bộ
Thông thường, khi người dùng thực hiện thao tác như nhấn một nút trên form để thực thi một yêu cầu tới server. Sau đó server sẽ xử lý yêu cầu, thực hiện một vài tính toán, lấy dữ liệu…và sau đó trả về cho client một trang mới hoàn toàn để hiển thị. Server sẽ phải lặp qua chu kì sống của trang một lần nữa và trả lại cho trình duyệt HTML, CSS và bất kì tài nguyên khác cần thiết để cập nhật lại trang. Việc này khiến người dùng phải chờ đợi và làm lãng phí thời gian cũng như băng thông một cách không cần thiết.
Một ứng dụng Ajax làm việc theo cách sử dụng một thành phần trung gian nằm giữa client và server. Thành phần này có chức năng liên lạc với server một cách bất đồng bộ, đại diện cho client gửi yêu cầu tới server và trả về dữ liệu cần thiết để cập nhật nội dung trên trang.
Chú ý rằng trong mô hình này, một lời gọi được bắt nguồn từ JavaScript đến bộ máy Ajax thay vì đến server để lấy và nhận dữ liệu. Bên trong bộ máy Ajax này là đối tượng XMLHttpRequest, chúng ta sẽ cùng tìm hiểu trong phần sau để giúp bạn nắm rõ cách thức làm việc của Ajax.
1.2.3. Đối tượng XMLHttpRequest
Đối tượng XMLHttpRequest đã xuất hiện khá sớm vào năm 1998, khi Microsoft giới thiệu nó lần đầu trong phiên bản trình duyệt IE 4.0. Tuy nhiên lúc bấy giờ, nó khá hạn chế về chức năng, và sau đó nó đã trở thành một ActiveXObject trong IE 5.0. Việc ứng dụng đối tượng này trở nên phổ biến trong một số dự án của Google, ví dụ như Google Maps và quen thuộc hơn với chúng ta là GMail. Sau đó, Microsoft ứng dụng nó để xây dựng nên Virtual Earth.
Đối tượng XMLHttpRequest là trái tim của lập trình Ajax nghĩa là XMLHttpRequest chính là đối tượng được dùng để gửi request và nhận response.
Trong các bản Internet Explore 5.0 và 6, XMLHttpRequest thể hiện dưới dạng một ActiveX Object. Còn trong IE 7 về sau và các trình duyệt khác như: FireFox, Safari, Opera, … XMLHttpRequest thể hiện dưới một đối tượng JavaScript được hỗ trợ sẵn. Nên trong mã JavaScript ta phải khởi tạo một XMLHttpRequest bằng cách dùng ActiveX Object và JavaScript Object. Đầu tiên kiểm tra trình duyệt có hỗ trợ ActiveX Object hay không nếu không thì tạo XMLHttpRequest như một JavaScript Object thông thường.
Chú ý Đối tượng XMLHttpRequest không thể làm việc trên trình duyệt IE 6.0 nếu như ActiveX bị vô hiệu hóa.
Đoạn mã 1‑1 Tạo đối tượng XMLHttpRequest
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
}
catch(e) {}
}
Kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest không. Nếu có hỗ trợ thì tạo XMLHttpRequest như một đối tượng JavaScript thông. Các trình duyệt hiện tại đa số đều hỗ trợ đối tượng này nên ta sẽ ưu tiên kiểm tra trước.
: Trường hợp trình duyệt không hỗ trợ XMLHttpRequest thì kiểm tra xem trình duyệt có hỗ trợ ActiveX Object hay không, nếu có (Đây chính là Internet Explore 5.x, 6) thì tạo một ActiveX Object thông qua một chuỗi để chỉ định loại ActiveX Object nào, ở đây chính là “Microsoft.XMLHTTP”.
1.2.3.1. Phương thức và thuộc tính của đối tượng XMLHttpRequest:
• Phương thức:
open(string method, string url, boolean asynch, string username, string password) hay open(String method, string url):
method: phương gửi đi, bạn phải nhận vào tên phương thức(GET, POST hay PUT)
url: trang web có thể là servlet, JSP hay PHP, ASP, .. mà bạn sẽ gọi tới.
asynch: tùy chọn này có nghĩa là bất đồng bộ, với biến này bạn có thể bỏ qua vì mặc định là true. Nếu chọn false, xử lý sẽ chờ khi nào response được gửi tới mới tiếp tục. Lời khuyên được đưa ra là true.
Username, password: tên của chúng đã tự nói lên ý nghĩa của chúng rồi.
Ví dụ: Để thực hiện 1 request yêu cầu server trả về nội dung file data.txt nằm trên thư mục chứa trang web trên server thì ta thực hiện như sau:
xmlHttp.open("get", "info.txt", true);
void send(content): phương thức này thực sự gửi request tới server, nếu request khai báo là bất đồng bộ(asynchronous) thì phương thức này trả về ngay lập tức, ngược lai sẽ chờ cho tới khi nhận được response.
content: có thể là DOM object, input stream, hay String. Và nội dung của content được gửi như một phần của request.
void setRequestHeader(string header, string value): dùng để gán giá trị cho một giá trị trong header của HTTP request theo ý muốn. Phương thức này phải được gọi sau phương thức open().
abort(): Dùng để dừng request.
getAllResponseHeaders(): Trả về một chuỗi chứa tất cả headers của response. Header bao gồm: Content-Length, Date, and URI.
getResponseHeader( String header): Nhận vào một tham số thể hiện giá trị của header mà bạn muốn, trả về giá trị dưới dạng chuỗi.
• Thuộc tính
onreadystatechange: Mỗi lần thuộc tính readyState thay đổi giá trị thì sự kiện readystatechange được phát sinh và hàm xử lí sự kiện onreadystatechange được gọi. Do các browser cài đặt đối tượng XMLHttp khác nhau nên để đảm bảo trang web của mình có thể chạy được trên nhiều browser thì ta chỉ nên dùng các giá trị sau của thuộc tính readyState: 0, 1 và 4
Trong hầu hết các trường hợp, ta chỉ cần xét trường hợp thuộc tính readyState có giá trị là 4, tức là khi toàn bộ dữ liệu từ server đã gởi đến client. Bên dưới sẽ đề cập cụ thể từng giá trị của trạng thái.
readyState . Trạng thái của request. Có năm giá trị:
0 (Uninitialized): đối tượng được tạo nhưng phương thức open() chưa được gọi.
1 (Loading): phương thức open() đã được gọi nhưng request chưa được gửi.
2 (Loaded): Request đã được gửi.
3 (Interactive). Một phần response được nhận.
4 (Complete): Tất cả dữ liệu được nhận từ response và kết nối được đóng
responseText: Response từ server dưới dạng chuỗi.
responseXML. Response từ server dưới dạng XML, đối tượng này có thể được phân tích và kiểm tra như một DOM object.
status. Trạng thái mã(code) từ server. Ví dụ: 200: OK, 400: Not Found, Bạn có thể tham khảo các mã HTTP Specification để biết chi tiết giá trị của thuộc tính này tại http://www.w3.org/Protocols/rfc2616/...c10.html#sec10
statusText: text ví dụ OK hay Not Found, …
1.2.3.2. Dùng GET và POST request
GET request: khi mục đích là không làm thay đổi trạng thái của server và mô hình dữ liệu của ứng dụng. Như ý nghĩa của nó, mỗi khi bạn thực hiện request này, dữ liệu trả về của nó sẽ như nhau.
POST request: dữ liệu mà request dạng này gửi cho server có thể được sử dụng để thay đổi trạng thái của ứng dụng; ví dụ như thêm một dòng vào database hoặc xóa thông tin từ server.
Một request dạng GET nên được dùng để lấy dữ liệu. Nó có thể cần thiết phải gửi một vài dữ liệu tới server, ví dụ như gửi đi một mã nhân viên để nhận lại thông tin của nhân viên đó. Trong trường hợp dữ liệu được gửi đến server để tạo thay đổi nào đó, bạn nên sử dụng POST.
Tuy nhiên, về mặt bảo mật, người ta thường sử dụng POST thay cho GET, vì việc dùng GET sẽ chuyển dữ liệu thành một chuỗi truy vấn và người dùng có thể nhìn được chuỗi truy vấn này.
Phần tiếp theo (1.2.3.3. Ví dụ minh họa sử dụng XMLHttpRequest)
1.1.1. Lịch sử
Phương pháp tải không đồng bộ nội dung trên một trang web đã xuất hiện trong thành tố IFRAME của Internet Explorer 3 (1996) và thành tố LAYER của Netscape 4.0 năm 1997. Tuy nhiên, hầu hết các câu chuyện về nguồn gốc của AJAX được bắt đầu từ khi Microsoft phát triển công nghệ Remote Scripting vào năm 1998. Khi giới thiệu Internet Explorer 4.0, Microsoft đã sử dụng mô hình đối tượng DOM khác biệt. Đến năm 2000, Netscape hoàn toàn đánh mất thị trường trình duyệt vào tay hãng phần mềm của Bill Gates và thành tố LAYER cũng không còn được các chuyên gia phát triển web chú ý tới. Vài năm sau, AJAX mới tạo được sự quan tâm của giới công nghệ và trở thành công cụ cải tiến giao diện người dùng cho ứng dụng web. Thuật ngữ Ajax được Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 năm 2005 trong bài viết nối tiếng của ông trên trang Adaptive Path để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 nãm trước. Từ đó, AJAX trở thành trung tâm trong mọi câu chuyện liên quan đến thế hệ Web 2.0.
1.1.2. Khái niệm
Ajax viết tắt của "Asynchronous JavaScript And XML". Ajax được xây dựng từ các công nghệ phổ biến: JavaScript và XML và sự truyền thông bất đồng bộ giữa browser và server.
Ajax Là một kỹ thuật phát triển web nhằm tạo ra những ứng dụng web có tính tương tác cao và là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách chia nhỏ dữ liệu và chỉ cập nhật những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.
Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:
• HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
• Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
• Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. (Mặc dù, việc trao đổi này có thể được thực hiện với nhiều định dạng như HTML, văn bản thường, JSON và thậm chí EBML, nhưng XML là ngôn ngữ thường được sử dụng).
• XML thường là định dạng cho dữ liệu truyền, mặc dù bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.
Giống như DHTML, LAMP hay SPA, Ajax tự nó không phải là một công nghệ mà là một thuật ngữ mô tả việc kết hợp một nhóm nhiều công nghệ với nhau. Trong thực tế, các công nghệ dẫn xuất hoặc kết hợp dựa trên Ajax như AFLAX cũng đã xuất hiện.
Khi được định nghĩa, nó được hình dung như sau:
• XHTML hay HTML và Cascading Style Sheets (CSS) cung cấp các tiêu chuẩn thể hiện nội dung trang Web với người dùng.
• Document Object Model (DOM) cung cấp cấu trúc cho phép hiển thị động nội dung và các tương tác liên quan. DOM mở ra nhiều cách thức mạnh cho người dùng khi muốn truy cập và thao tác với đối tượng nằm trong một văn bản bất kỳ.
• XML và XSLT cung cấp kiểu định dạng cho dữ liệu, để dữ liệu có thể được thao tác, truyền tải hoặc trao đổi giữa máy chủ (server) và máy khách (client).
• XML HTTP Request: Điểm bất cập lớn nhất trong xây dựng ứng dụng Web là mỗi lần một webpage được tải về trình duyệt của người dùng, kết nối server liên quan sẽ bị cắt. Hơn nữa, đường dẫn bên trong trang còn đòi hỏi phải thiết lập một kết nối khác với server và tải về toàn bộ trang cho dù người dùng chỉ muốn mở rộng một đường link đơn giản. XML HTTP Request cho phép truy vấn dữ liệu không đồng bộ và đảm bảo các trang web không bị load trở lại khi thay đổi trong yêu cầu người dùng ở mức nhỏ nhất.
• JavaScript (JS): là ngôn ngữ kịch bản hợp nhất các đối tượng để hoạt động với nhau một cách hiệu quả, do đó giữ vai trò đáng kể trong ứng dụng web.
Chính bởi các thành phần này mà khi nói đến AJAX người ta thường nghĩ đến khả năng tương tác cao, tốc độ nhanh và dễ dùng. Công nghệ trong AJAX phong phú hơn nhiều và rất thân thiện cho người dùng, vì các ứng dụng Web được thiết kế tương tự ứng dụng để bàn “truyền thống” như Google Docs và Spreadsheets, Google Maps hay Yahoo! Mail.
1.1.3. So sánh với các ứng dụng web truyền thống
Hiểu nôm na: Điểm khác biệt cơ bản nhất của công nghệ này là việc xử lý thông tin được thực hiện trên máy yêu cầu dịch vụ thay vì trên máy xử lý yêu cầu dịch vụ như cách truyền thống. Máy xử lí yêu cầu dịch vụ chỉ làm một việc đơn giản là nhận thông tin từ máy khách và trả các dữ liệu về cho máy khách. Máy yêu cầu dịch vụ xử lý sơ bộ thông tin của người dùng nhập vào, sau đó chuyển về máy xử lí yêu cầu dịch vụ rồi nhận dữ liệu từ máy xử lí yêu cầu dịch vụ và xử lý để hiển thị cho người dùng.
Các ứng dụng Ajax phần lớn trông giống như thể chúng được đặt trên máy của người sử dụng hơn là được đặt trên một máy phục vụ thông qua Internet. Lý do: các trang được cập nhật nhưng không nạp lại (refresh) toàn bộ. "Mọi thao tác của người sử dụng sẽ gửi mẫu của một lời gọi JavaScript tới bộ xử lý (engine) Ajax thay vì tạo ra một yêu cầu HTTP (HTTP request)", Jesse James Garrett đã ghi như vậy trong bài luận đầu tiên định nghĩa về thuật ngữ này. "Mọi đáp ứng cho thao tác của người sử dụng sẽ không cần truy vấn tới máy phục vụ – ví dụ như việc kiểm tra một cách đơn giản sự hợp lệ của dữ liệu, sửa đổi dữ liệu trong bộ nhớ và thậm chí một vài thao tác duyệt trang – bộ xử lý Ajax tự nó đảm nhận trách nhiệm này. Nếu bộ xử lý cần gì từ máy phục vụ để đáp ứng – như khi nó gửi dữ liệu để xử lý, tải về bổ sung các mã giao diện hay nhận về dữ liệu mới – nó sẽ thực hiện các yêu cầu tới máy phục vụ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người sử dụng với ứng dụng web".
Các ứng dụng truyền thống về bản chất là gửi dữ liệu từ các form, được nhập bởi người sử dụng, tới một máy phục vụ web. Máy phục vụ web sẽ trả lời bằng việc gửi về một trang web mới. Do máy phục vụ phải tạo ra một trang web mới mỗi lần như vậy nên các ứng dụng chạy chậm và "lúng túng" hơn.
Mặt khác, các ứng dụng Ajax có thể gửi các yêu cầu tới máy phục vụ web để nhận về chỉ những dữ liệu cần thiết, thông qua việc dùng SOAP hoặc một vài dịch vụ web dựa trên nền tảng XML cục bộ khác. Trên máy thân chủ (client), JavaScript sẽ xử lý các đáp ứng của máy chủ. Kết quả là trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều. Thời gian xử lý của máy chủ web cũng vì thế mà được giảm theo vì phần lớn thời gian xử lý được thực hiện trên máy khách của người dùng.
Có thể xem xét một website nhiếp ảnh cho phép người sử dụng nhập các tiêu đề như một ví dụ về cách làm việc của Ajax. Với một ứng dụng web truyền thống, toàn bộ trang web bao gồm cả các ảnh cần được nạp lại. Với các công nghệ Ajax, DHTML có thể thay thế chỉ những đoạn tiêu đề và kết quả là người dùng có những giao dịch "mượt mà" đáng quan tâm.
1.1.4. Ưu nhược điểm
1.1.4.1. Ưu điểm
• Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang. Nếu sử dụng các phương pháp truyền thống, những nội dụng đó sẽ phải nạp lại toàn bộ với từng yêu cầu. Tuy nhiên, nếu sử dụng Ajax, một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải cập nhật, do đó giảm lượng lớn băng thông và thời gian nạp trang.
• Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý Ajax, thay vì tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy chủ. Nếu cần gì từ server, như tải về bổ sung mã giao diện hay nhận dữ liệu mới, Ajax sẽ truyền yêu cầu tới máy chủ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người dùng với ứng dụng web. Do đó người dùng không phải chờ đợi server thực hiện, các giao dịch sẽ trở nên dễ dàng và nhanh chóng hơn.
• Việc sử dụng Ajax có thể làm giảm các kết nối đến server, do các mã kịch bản (script) và các style sheet chỉ phải yêu cầu một lần
1.1.4.2. Nhược điểm
• Các trang web được tạo động không được ghi vào bộ lưu lịch sử lướt web của trình duyệt, do đó nút "back" (quay lui) của trình duyệt sẽ mất tác dụng quay lại trang thái trước đó của trang sử dụng Ajax, thay vào đó sẽ quay lại trang web trước đó mà người dùng ghé thăm. Để khắc phục có thể dùng các IFrame không hiển thị để gây ra sự thay đổi trong lịch sử trình duyệt và thay đổi phần neo của URL (bằng mã a #) khi chạy Ajax và theo dõi những sự thay đổi của nó.
• Việc cập nhật các trang web động cũng gây khó khăn cho người dùng trong việc bookmark (đánh dấu địa chỉ yêu thích) một trạng thái nào đó của ứng dụng. Cũng có những các khắc phục cho vấn đề này, một số trong đó sử dụng mã xác định đoạn (fragment identifier) URL (phần URL ở sau dấu '#') để lưu vết, và cho phép người dùng đánh dấu và quay lại một trạng thái nào đó của ứng dụng.
• Do hầu hết các web crawler không thực thi mã JavaScript, các ứng dụng web sẽ cung cấp một phương thức thay thế để truy cập nội dung thông thường được truy cập bằng Ajax, để cho phép các máy tìm kiếm lập chỉ mục chúng.
• Bất kỳ người dùng nào có trình duyệt không hỗ trợ Ajax hay JavaScript, hoặc đơn giản là đã bị vô hiệu hóa JavaScript, sẽ đương nhiên không thể sử dụng Ajax. Tương tự, các thiết bị như điện thoại di động, PDA, và thiết bị đọc màn hình (screen reader) có thể không hỗ trợ JavaScript hay đối tượng XMLHttp được yêu cầu. Ngoài ra, các thiết bị đọc màn hình nếu có thể sử dụng Ajax đi nữa cũng vẫn có thể không đọc chính xác các nội dung động.
• Việc thiếu các chuẩn cơ bản của Ajax đồng nghĩa với việc không có nhiều sự chọn lựa thực tiễn tốt nhất để kiểm tra các ứng dụng Ajax. Các công cụ kiểm thử cho Ajax thương không hiểu các mô hình sự kiện, mô hình dữ liệu và giao thức của Ajax.
• Mở ra một các thức khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển web có thể không kiểm thử hết được.
Ghi chú
Web crawler, web spider hay web robot (còn gọi là bọ tìm kiếm) là một chương trình tự động tìm kiếm trên Internet. Nó được thiết kết để thu thập tài nguyên Internet (trang Web, hình ảnh, video, tài liệu Word, PDF hay PostScrips) , cho phép máy tìm kiếm đánh chỉ số sau đó.
Để đánh chỉ số các tài nguyên Web, mỗi bọ tìm kiếm (robot) sẽ đi theo các liên kết mà nó tìm thấy tại một trang trung tâm. Sau đó, mỗi trang đã duyệt sẽ được ghi nhớ lại và gán cho tần số đánh lại chỉ số dựa vào mức độ cập nhật thường xuyên hay không của trang.
Một số bọ tìm kiếm phổ biến của các máy tìm kiếm :
• Googlebot của Google
• MSNBot của MSN
• Slurp của Yahoo
• Scooter của Alta Vista
• Baidu của Baidu
1.1.5. Những điểm cần lưu ý khi sử dụng Ajax
Những tính năng mạnh mẽ mà Ajax đem lại đôi khi lại trở thành trở ngại trong một số trường hợp. Vì thế trong quá trình tạo những dự án có sử dụng Ajax, bạn cần chú ý đến một số điểm sau đây:
• Tạo bối rối cho người dùng nếu bạn áp dụng công nghệ Ajax mà không suy nghĩ kỹ. Người dùng thường đã quen với việc nhấn nút để thực hiện một tác vụ nào đó - trong khi Ajax cho phép bạn thực hiện thay đổi ngay lập tức. Đây là một điểm yếu khá nghiêm trọng: Bản chất của Ajax là không dung thứ ("forgiveless"). Chính vì bạn có thể thực hiện các thay đổi ngay lập tức, đôi khi người dùng chỉ vô tình cũng đã thay đổi dữ liệu trong cơ sở dữ liệu của bạn mà. Cách an toàn nhất là chỉ sử dụng Ajax để thực hiện các tác vụ kiểm tra mà không tác động trực tiếp đến dữ liệu, hoặc là bạn phải chắc chắn rằng mình cung cấp một cơ chế để khôi phục các lỗi vô tình, hoặc là bạn tạo ra một cơ chế để xác nhận mỗi khi hành động của người dùng có khả năng tạo ra những thay đổi dữ liệu.
• Tương thích: Ajax chỉ hoạt động nếu trình duyệt hỗ trợ đối tượng XMLHttpRequest. Đây là vấn đề mà Gmail gặp phải đối với trình duyệt Opera trước khi Opera 8 ra đời. Tuy nhiên, đến thời điểm hiện tại thì các trình duyệt phổ biến nhất đều hỗ trợ XMLHttpRequest (Firefox, Internet Explorer, Opera 8, Sarafi). Cho dù vậy, hãy luôn xây dựng một cơ chế dự phòng trường hợp trình duyệt không hỗ trợ (ví dụ nếu người dùng sử dụng máy Palm,…)
• Tương tác người dùng: mặc dù Ajax giải quyết được một vấn đề then chốt về tương tác người dùng của các ứng dụng web, nó lại tạo ra một số vấn để nhỏ khác. Chính vì Ajax thực hiện tác vụ quá nhanh nên đôi khi người dùng không tin là nó đã được thực hiện! Tất nhiên đây đơn thuần là vấn đề về thói quen, tuy nhiên để đảm bảo khả năng tương tác ở mức tốt nhất, bạn nên có một cơ chế giúp xác nhận những gì đang diễn ra ở bên trong (bạn sẽ được biết qua sau khi đọc xong phần về control UpdateProgress trong ASP.NET Ajax).
1.1.6. Ứng dụng của Ajax
Có thể nói, kể từ khi cái tên "Ajax" ra đời đến nay, tiềm năng của nó vẫn chưa được đánh giá hết và các nhà phát triển web vẫn còn đang mày mò nghiên cứu tìm ra những ứng dụng của công nghệ này. Đến thời điểm hiện tại, đã có rất nhiều những ứng dụng thể hiện khả năng đặc biệt của công nghệ này chẳng hạn các ứng dụng khá phổ biến như Gmail, Google Map và Window Live. Việc sử dụng Ajax làm cho các trang web có khả năng tương tác như các ứng dụng phần mềm cho desktop. Thử duyệt Google Map hoặc Window Live chắc chắn bạn sẽ không khỏi bất ngờ trước những gì mà Ajax có thể làm được: thử phóng to, thu nhỏ, di chuyển quanh bản đồ - bạn gần như không phải đợi chút xíu nào; hình ảnh cứ xuất hiện thành một chuỗi liên tục như bạn đang xem bản đồ trên phần mềm ở máy mình vậy.
Ngoài việc ứng dụng cho những dự án lớn như Google Map (http://maps.google.com/), Ajax cũng thể hiện thế mạnh của mình trong những ứng dụng nhỏ và đơn giản. Một trong những ứng dụng nhỏ cần nói tới nhất của Ajax là tính năng "Live Search", bắt chước công nghệ Spotlight Apple được giới thiệu trong phiên bản Mac OSX 10.4 Tiger. Chỉ cần gõ một ký tự vào ô tìm kiếm và gần như ngay lập tức, một danh sách các kết quả xuất hiện bên dưới, gõ thêm một ký tự nữa và danh sách đó tự động rút ngắn lại,… Bạn có thể làm được chức năng này sau khi đọc về AutoComplete Extender.
Một số ứng dụng khác cũng khá phổ biến như:
1. Tính năng "Auto save" (lưu tự động): Sử dụng Ajax, bạn có thể bắt chước tính năng của các phần mềm soạn thảo tự động lưu những gì người dùng đã gõ được sau một khoản thời gian nhất định (sẽ thật tuyệt nếu như các trình webmail có tính năng này. Nếu bạn sử dụng Gmail, bạn có thể sử dụng tính năng này bằng cách tải về trình bổ sung)
2. Kiểm tra trùng lặp: bạn tạo ra một mẫu đơn đăng ký với yêu cầu là tên đăng nhập phải không bị trùng lặp với bất kỳ ai trong cơ sở dữ liệu. Thông thường, bạn sẽ bắt người dùng nhập hết thông tin và gửi đơn đăng ký lên máy chủ và rồi mới kiểm tra. Tại sao không kiểm tra ngay sau khi người dùng vừa mới chọn xong tên? Đây chính là ví dụ mà tớ đã viết ra để minh họa cho bài viết này (xem phân sau).
3. Dịch trực tuyến: bạn có thể sử dụng Ajax để tạo ra tính năng cho phép người dùng chỉ cần chọn một từ trên trang web của bạn và hiển thị từ tương ứng của các ngôn ngữ khác (sử dụng các dịch vụ của các trang tự điển)
4. Các trang bán hàng trực tuyến: cập nhật theo thời gian thực danh sách những gì người mua chọn và giá cả mà không cần phải tải lại trang web (ví dụ người dùng nhấn chọn thêm một mặt hàng, ngay lập tức nó xuất hiện trong danh sách bên cạnh và tổng giá tiền cũng sẽ được cập nhật tương ứng)
5. Hệ thống đánh giá ở các trang web nhạc số: Người dùng nhấn một nút đánh giá và ngay lập tức nó sẽ được cập nhật vào hệ thống (hai trang Nhạc Số và Nhạc Việt có lẽ nên tìm hiểu áp dụng kỹ thuật này)
(Tổng hợp từ nhiều nguồn trên Internet)
Mời các bạn đón xem
Bài 1- Part 2- Kĩ thuật lập trình Ajax
Yin Yang
23-01-2010, 02:29 PM
1.2. Kĩ thuật lập trình Ajax
1.2.1. Các thành phần của Ajax
• JavaScript: theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống như Java, JavaScript có cú pháp tương tự C, ngắn gọn và dễ hiểu. JavaScript là ngôn ngữ kịch bản trên web phổ biến nhất, và được hỗ trợ trên tất cả các trình duyệt phổ biến. Các ứng dụng Ajax được xây dựng trên JavaScript.
• Document Object Model (DOM): Định nghĩa cấu trúc của một trang web và tập hợp các đối tượng có thể truy xuất để lập trình thông qua JavaScript. Trong lập trình Ajax, việc nắm vững mô hình DOM giúp cho việc hiển thị lại một phần của trang hiệu quả hơn.
• Cascading Style Sheets (CSS): Định nghĩa cách thức hiển thị, giao diện các thành phần trên trang web. CSS được dùng để thay đổi giao diện tương tác bên ngoài trong ứng dụng Ajax.
• XMLHttpRequest: Cho phép các mã kịch bản phía client thực hiện một yêu cầu HTTP. Ứng dụng Ajax sử dụng đối tượng XMLHttpRequest để tạo các yêu cầu bất đồng bộ đến server nhằm hạn chế việc nạp lại toàn bộ trang.
Ghi chú Cái tên XMLHttpRequest có thể gây một chút nhầm lẫn bởi vì dữ liệu có thể được truyền đi dưới dạng XML hoặc dạng thuần văn bản. Nền tảng ASP.NET Ajax phụ thuộc vào một định dạng gọi là JavaScript Object Notation (JSON) để phân phối dữ liệu đến và từ server.
Liệt kê các công nghệ thì rất dễ dàng, tuy nhiên để hiểu được chúng làm việc như thế nào, và làm sao để ứng dụng trong những dự án khác nhau để có thể đạt hiệu quả tốt nhất thì không phải đơn giản.
Bạn có thể hình dung rằng trong một ứng dụng Ajax, JavaScript như một chất keo dính kết nối mọi thứ lại với nhau. Khi dữ liệu được cần tới, đối tượng XMLHttpRequest được sử dụng để tạo một yêu cầu tới server. Khi dữ liệu được trả về, DOM và CSS sẽ cập nhật sự hiển thị của trang trên trình duyệt một cách linh động.
1.2.2. Lập trình Web bất đồng bộ
Thông thường, khi người dùng thực hiện thao tác như nhấn một nút trên form để thực thi một yêu cầu tới server. Sau đó server sẽ xử lý yêu cầu, thực hiện một vài tính toán, lấy dữ liệu…và sau đó trả về cho client một trang mới hoàn toàn để hiển thị. Server sẽ phải lặp qua chu kì sống của trang một lần nữa và trả lại cho trình duyệt HTML, CSS và bất kì tài nguyên khác cần thiết để cập nhật lại trang. Việc này khiến người dùng phải chờ đợi và làm lãng phí thời gian cũng như băng thông một cách không cần thiết.
Một ứng dụng Ajax làm việc theo cách sử dụng một thành phần trung gian nằm giữa client và server. Thành phần này có chức năng liên lạc với server một cách bất đồng bộ, đại diện cho client gửi yêu cầu tới server và trả về dữ liệu cần thiết để cập nhật nội dung trên trang.
Chú ý rằng trong mô hình này, một lời gọi được bắt nguồn từ JavaScript đến bộ máy Ajax thay vì đến server để lấy và nhận dữ liệu. Bên trong bộ máy Ajax này là đối tượng XMLHttpRequest, chúng ta sẽ cùng tìm hiểu trong phần sau để giúp bạn nắm rõ cách thức làm việc của Ajax.
1.2.3. Đối tượng XMLHttpRequest
Đối tượng XMLHttpRequest đã xuất hiện khá sớm vào năm 1998, khi Microsoft giới thiệu nó lần đầu trong phiên bản trình duyệt IE 4.0. Tuy nhiên lúc bấy giờ, nó khá hạn chế về chức năng, và sau đó nó đã trở thành một ActiveXObject trong IE 5.0. Việc ứng dụng đối tượng này trở nên phổ biến trong một số dự án của Google, ví dụ như Google Maps và quen thuộc hơn với chúng ta là GMail. Sau đó, Microsoft ứng dụng nó để xây dựng nên Virtual Earth.
Đối tượng XMLHttpRequest là trái tim của lập trình Ajax nghĩa là XMLHttpRequest chính là đối tượng được dùng để gửi request và nhận response.
Trong các bản Internet Explore 5.0 và 6, XMLHttpRequest thể hiện dưới dạng một ActiveX Object. Còn trong IE 7 về sau và các trình duyệt khác như: FireFox, Safari, Opera, … XMLHttpRequest thể hiện dưới một đối tượng JavaScript được hỗ trợ sẵn. Nên trong mã JavaScript ta phải khởi tạo một XMLHttpRequest bằng cách dùng ActiveX Object và JavaScript Object. Đầu tiên kiểm tra trình duyệt có hỗ trợ ActiveX Object hay không nếu không thì tạo XMLHttpRequest như một JavaScript Object thông thường.
Chú ý Đối tượng XMLHttpRequest không thể làm việc trên trình duyệt IE 6.0 nếu như ActiveX bị vô hiệu hóa.
Đoạn mã 1‑1 Tạo đối tượng XMLHttpRequest
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
}
catch(e) {}
}
Kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest không. Nếu có hỗ trợ thì tạo XMLHttpRequest như một đối tượng JavaScript thông. Các trình duyệt hiện tại đa số đều hỗ trợ đối tượng này nên ta sẽ ưu tiên kiểm tra trước.
: Trường hợp trình duyệt không hỗ trợ XMLHttpRequest thì kiểm tra xem trình duyệt có hỗ trợ ActiveX Object hay không, nếu có (Đây chính là Internet Explore 5.x, 6) thì tạo một ActiveX Object thông qua một chuỗi để chỉ định loại ActiveX Object nào, ở đây chính là “Microsoft.XMLHTTP”.
1.2.3.1. Phương thức và thuộc tính của đối tượng XMLHttpRequest:
• Phương thức:
open(string method, string url, boolean asynch, string username, string password) hay open(String method, string url):
method: phương gửi đi, bạn phải nhận vào tên phương thức(GET, POST hay PUT)
url: trang web có thể là servlet, JSP hay PHP, ASP, .. mà bạn sẽ gọi tới.
asynch: tùy chọn này có nghĩa là bất đồng bộ, với biến này bạn có thể bỏ qua vì mặc định là true. Nếu chọn false, xử lý sẽ chờ khi nào response được gửi tới mới tiếp tục. Lời khuyên được đưa ra là true.
Username, password: tên của chúng đã tự nói lên ý nghĩa của chúng rồi.
Ví dụ: Để thực hiện 1 request yêu cầu server trả về nội dung file data.txt nằm trên thư mục chứa trang web trên server thì ta thực hiện như sau:
xmlHttp.open("get", "info.txt", true);
void send(content): phương thức này thực sự gửi request tới server, nếu request khai báo là bất đồng bộ(asynchronous) thì phương thức này trả về ngay lập tức, ngược lai sẽ chờ cho tới khi nhận được response.
content: có thể là DOM object, input stream, hay String. Và nội dung của content được gửi như một phần của request.
void setRequestHeader(string header, string value): dùng để gán giá trị cho một giá trị trong header của HTTP request theo ý muốn. Phương thức này phải được gọi sau phương thức open().
abort(): Dùng để dừng request.
getAllResponseHeaders(): Trả về một chuỗi chứa tất cả headers của response. Header bao gồm: Content-Length, Date, and URI.
getResponseHeader( String header): Nhận vào một tham số thể hiện giá trị của header mà bạn muốn, trả về giá trị dưới dạng chuỗi.
• Thuộc tính
onreadystatechange: Mỗi lần thuộc tính readyState thay đổi giá trị thì sự kiện readystatechange được phát sinh và hàm xử lí sự kiện onreadystatechange được gọi. Do các browser cài đặt đối tượng XMLHttp khác nhau nên để đảm bảo trang web của mình có thể chạy được trên nhiều browser thì ta chỉ nên dùng các giá trị sau của thuộc tính readyState: 0, 1 và 4
Trong hầu hết các trường hợp, ta chỉ cần xét trường hợp thuộc tính readyState có giá trị là 4, tức là khi toàn bộ dữ liệu từ server đã gởi đến client. Bên dưới sẽ đề cập cụ thể từng giá trị của trạng thái.
readyState . Trạng thái của request. Có năm giá trị:
0 (Uninitialized): đối tượng được tạo nhưng phương thức open() chưa được gọi.
1 (Loading): phương thức open() đã được gọi nhưng request chưa được gửi.
2 (Loaded): Request đã được gửi.
3 (Interactive). Một phần response được nhận.
4 (Complete): Tất cả dữ liệu được nhận từ response và kết nối được đóng
responseText: Response từ server dưới dạng chuỗi.
responseXML. Response từ server dưới dạng XML, đối tượng này có thể được phân tích và kiểm tra như một DOM object.
status. Trạng thái mã(code) từ server. Ví dụ: 200: OK, 400: Not Found, Bạn có thể tham khảo các mã HTTP Specification để biết chi tiết giá trị của thuộc tính này tại http://www.w3.org/Protocols/rfc2616/...c10.html#sec10
statusText: text ví dụ OK hay Not Found, …
1.2.3.2. Dùng GET và POST request
GET request: khi mục đích là không làm thay đổi trạng thái của server và mô hình dữ liệu của ứng dụng. Như ý nghĩa của nó, mỗi khi bạn thực hiện request này, dữ liệu trả về của nó sẽ như nhau.
POST request: dữ liệu mà request dạng này gửi cho server có thể được sử dụng để thay đổi trạng thái của ứng dụng; ví dụ như thêm một dòng vào database hoặc xóa thông tin từ server.
Một request dạng GET nên được dùng để lấy dữ liệu. Nó có thể cần thiết phải gửi một vài dữ liệu tới server, ví dụ như gửi đi một mã nhân viên để nhận lại thông tin của nhân viên đó. Trong trường hợp dữ liệu được gửi đến server để tạo thay đổi nào đó, bạn nên sử dụng POST.
Tuy nhiên, về mặt bảo mật, người ta thường sử dụng POST thay cho GET, vì việc dùng GET sẽ chuyển dữ liệu thành một chuỗi truy vấn và người dùng có thể nhìn được chuỗi truy vấn này.
Phần tiếp theo (1.2.3.3. Ví dụ minh họa sử dụng XMLHttpRequest)