Ajax cho các nhà phát triển Java: Xây dựng các ứng dụng Java động Ajax mở đường cho các ứng dụng Web tốt hơn doc

Ajax cho các nhà phát triển Java: Xây dựng các ứng dụng Java động Ajax mở đường cho các ứng dụng Web tốt hơn Philip McCarthy, Nhà Phát triển, SmartStream Technologies Ltd Tóm tắt: Chu trình nạp lại-trang trình bày một trong những trở ngại của tiện ích lớn nhất trong việc phát triển ứng dụng Web và là một thách thức quan trọng cho các nhà phát triển Java™. Trong loạt bài này, tác giả Philip McCarthy giới thiệu một cách tiếp cận có tính đột phá để tạo ra những trải nghiệm ứng dụng Web động. Ajax (Asynchronous JavaScript và XML) là một kỹ thuật lập trình cho phép bạn kết hợp các công nghệ Java, XML và JavaScript cho các ứng dụng Web dựa trên Java để ngắt mô hình nạp lại-trang. Ajax hoặc JavaScript và XML không đồng bộ, là một cách tiếp cận để phát triển ứng dụng Web có sử dụng tạo kịch bản lệnh phía-khách để trao đổi dữ liệu với máy chủ Web. Kết quả là, các trang Web được cập nhật động mà không phải làm mới toàn bộ trang khi ngắt luồng tương tác. Với Ajax, bạn có thể tạo các giao diện người dùng ứng dụng Web động hơn, phong phú hơn để tiếp cận trực tiếp và khả năng sử dụng các ứng dụng máy tính bản địa. Ajax không là một công nghệ, nó còn hơn một mẫu một cách để nhận biết và mô tả một kỹ thuật thiết kế có lợi. Về ý nghĩa nào đó Ajax là mới nên nhiều nhà phát triển chỉ đang bắt đầu nhận biết về nó, nhưng tất cả các thành phần triển khai thực hiện một ứng dụng Ajax đã tồn tại trong nhiều năm. Các tin đồn hiện nay là do sự nổi lên trong năm 2004 và 2005 của các giao diện người dùng (UI) động quan trọng dựa vào công nghệ Ajax, đáng chú ý nhất là các ứng dụng GMail và Maps của Google và trang chia sẻ hình ảnh Flickr. Các UI này đã có đủ tính đột phá được một số nhà phát triển gọi là "Web 2.0", khiến người ta quan tâm nhiều đến ứng dụng Ajax. Trong loạt bài này, tôi sẽ cung cấp cho bạn tất cả các công cụ mà bạn cần để bắt đầu phát triển các ứng dụng riêng của bạn khi sử dụng Ajax. Trong bài viết đầu tiên này, tôi sẽ giải thích các khái niệm đằng sau Ajax và trình diễn các bước cơ bản để tạo ra một giao diện Ajax cho ứng dụng Web dựa trên Java. Tôi sẽ sử dụng các ví dụ mã để biểu thị cả mã Java phía máy chủ lẫn mã JavaScript phía máy khách để tạo ra các ứng dụng Ajax động. Cuối cùng, tôi sẽ chỉ ra một số khó khăn của cách tiếp cận Ajax, cũng như các khả năng sử dụng rộng hơn và về khả năng tiếp cận mà bạn cần cân nhắc khi tạo các ứng dụng Ajax. Một giỏ mua hàng tốt hơn Bạn có thể sử dụng Ajax để nâng cao các ứng dụng Web truyền thống, sắp xếp hợp lý hóa tương tác bằng cách loại bỏ việc nạp trang. Để giải thích điều này, tôi sẽ sử dụng các ví dụ đơn giản về một giỏ mua hàng được tự động cập nhật khi các mục hàng được thêm vào giỏ. Được tích hợp trong cửa hàng trực tuyến, cách tiếp cận này sẽ cho phép những người dùng tiếp tục duyệt và thêm các mục hàng vào giỏ hàng của họ mà không cần phải chờ sau mỗi lần nhấp chuột để cập nhật một trang đầy đủ. Trong khi một số mã trong bài viết này dành riêng cho ví dụ giỏ hàng, các kỹ thuật được minh họa có thể được áp dụng cho bất kỳ ứng dụng Ajax nào. Liệt kê 1 cho thấy mã HTML được ví dụ giỏ mua hàng này sử dụng. Tôi sẽ quay lại mã HTML này trong suốt bài viết. Liệt kê 1. Các đoạn mã có liên quan của ví dụ giỏ mua hàng <! Table of products from store's catalog, one row per item > <th>Name</th> <th>Description</th> <th>Price</th> <th></th> <tr> <! Item details > <td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td> <td> <! Click button to add item to cart via Ajax request > <button onclick="addToCart('hat001')">Add to Cart</button> </td> </tr> <! Representation of shopping cart, updated asynchronously > <ul id="cart-contents"> <! List-items will be added here for each item in the cart > </ul> <! Total cost of items in cart displayed inside span element > Total cost: <span id="total">$0.00</span> Chu trình vòng tròn (roundtrip) của Ajax Một tương tác Ajax bắt đầu bằng một đối tượng JavaScript tên là XMLHttpRequest (Yêu cầu XMLHttp). Như tên cho thấy, nó cho phép một kịch bản lệnh phía máy khách thực hiện các yêu cầu HTTP và nó sẽ phân tích cú pháp câu trả lời của máy chủ XML. Bước đầu tiên trong chu trình vòng tròn Ajax là tạo một cá thể XMLHttpRequest. Phương thức HTTP để sử dụng cho các yêu cầu (GET hoặc POST) và URL đích sau đó được đặt trên đối tượng XMLHttpRequest. Bây giờ, bạn có nhớ tại sao chữ a đầu tiên trong Ajax là chữ viết tắt của không đồng bộ (asynchronous) không? Khi bạn gửi yêu cầu HTTP đó, bạn không muốn trình duyệt bị treo khi chờ máy chủ trả lời. Thay vào đó, bạn muốn nó tiếp tục phản ứng lại với sự tương tác của người dùng với trang đó và xử lý trả lời đến từ máy chủ. Để thực hiện việc này, bạn có thể đăng ký một hàm gọi lại với XMLHttpRequest rồi gửi đi XMLHttpRequest không đồng bộ. Rồi kiểm soát các trả về tới trình duyệt, trừ ra hàm gọi lại sẽ được gọi khi trả lời của máy chủ đến. Trên máy chủ Web Java, yêu cầu đến giống như bất kỳ HttpServletRequest khác nào. Sau khi phân tích cú pháp các tham số yêu cầu, servlet gọi logic ứng dụng cần thiết, tuần tự hóa trả lời của nó thành XML và ghi nó vào HttpServletResponse. Quay lại phía máy khách, hàm gọi lại được đăng ký trên XMLHttpRequest bây giờ được gọi để xử lý tài liệu XML do máy chủ trả về. Cuối cùng, giao diện người dùng được cập nhật đáp lại dữ liệu từ máy chủ, khi sử dụng JavaScript để thao tác HTML DOM của các trang. Hình 1 là một sơ đồ trình tự của chu trình vòng tròn Ajax. Hình 1. Chu trình vòng tròn Ajax Bây giờ bạn có một khung nhìn mức cao về chu trình vòng tròn Ajax, tôi sẽ phóng to để xem xét chi tiết hơn ở mỗi bước trên đường đi. Quay trở lại Hình 1 nếu bạn không tìm thấy vị trí của mình, trình tự này không hoàn toàn dễ hiểu do tính chất không đồng bộ của cách tiếp cận Ajax. Gửi đi một XMLHttpRequest Tôi sẽ xuất phát tại điểm bắt đầu của trình tự Ajax: tạo và gửi đi một XMLHttpRequest từ trình duyệt. Thật không may, phương thức để tạo ra một XMLHttpRequest khác với từ trình duyệt đến trình duyệt. Hàm JavaScript trong Liệt kê 2 làm phẳng các nếp gấp phụ thuộc trình duyệt này, tìm ra cách tiếp cận đúng cho trình duyệt hiện tại và trả về một XMLHttpRequest đã sẵn sàng để sử dụng. Thật tốt để nghĩ về điều này như là mã soạn sẵn: chỉ cần chép nó vào trong thư viện JavaScript của bạn và sử dụng nó khi bạn cần một XMLHttpRequest. Liệt kê 2. Tạo một XMLHttpRequest của trình duyệt chéo /* * Returns a new XMLHttpRequest object, or false if this browser * doesn't support it */ function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { // Create XMLHttpRequest object in non-Microsoft browsers xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Create XMLHttpRequest via MS ActiveX try { // Try to create XMLHttpRequest in later versions // of Internet Explorer xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // Failed to create required ActiveXObject try { // Try version supported by older versions // of Internet Explorer xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // Unable to create an XMLHttpRequest with ActiveX } } } return xmlreq; } Sau đó, tôi sẽ thảo luận các kỹ thuật để xử lý các trình duyệt không hỗ trợ XMLHttpRequest. Bây giờ, các ví dụ giả định rằng hàm newXMLHttpRequest từ Liệt kê 2 sẽ luôn luôn trả về một cá thể XMLHttpRequest. Quay trở lại kịch bản ví dụ giỏ mua hàng, tôi muốn gọi một sự tương tác Ajax bất cứ khi nào người dùng nhấn vào nút Add to Cart (Thêm vào giỏ hàng) với một mục hàng. Trình xử lý (handler) onclick có tên là addToCart() có trách nhiệm cập nhật trạng thái giỏ hàng thông qua một cuộc gọi Ajax (xem Liệt kê 1). Như thể hiện trong Liệt kê 3, điều đầu tiên mà addToCart() cần làm là nhận một cá thể XMLHttpRequest bằng cách gọi hàm newXMLHttpRequest() từ Liệt kê 2. Tiếp theo, nó đăng ký một hàm gọi lại để nhận được trả lời của máy chủ (tôi sẽ giải thích chi tiết điều này sau; xem Liệt kê 6). Do yêu cầu này sẽ thay đổi trạng thái trên máy chủ, tôi sẽ sử dụng một HTTP POST để làm chứng thư. Việc gửi dữ liệu thông qua POST yêu cầu ba bước. Đầu tiên, tôi cần phải mở một kết nối POST tới nguồn tài nguyên của máy chủ mà tôi giao tiếp trong trường hợp này một servlet được ánh xạ đến địa chỉ URL cart.do. Tiếp theo, tôi đặt ra một tiêu đề trên XMLHttpRequest để nói rằng nội dung của yêu cầu là dữ liệu biểu mẫu có mã hóa. Cuối cùng, tôi gửi yêu cầu đó với dữ liệu biểu mẫu có mã hóa làm phần thân. Liệt kê 3 kết hợp các bước này lại với nhau. Liệt kê 3. Gửi một XMLHttpRequest Thêm vào giỏ hàng /* * Adds an item, identified by its product code, * to the shopping cart * itemCode - product code of the item to add. */ function addToCart(itemCode) { // Obtain an XMLHttpRequest instance var req = newXMLHttpRequest(); // Set the handler function to receive callback notifications // from the request object var handlerFunction = getReadyStateHandler(req, updateCart); req.onreadystatechange = handlerFunction; // Open an HTTP POST connection to the shopping cart servlet. // Third parameter specifies request is asynchronous. req.open("POST", "cart.do", true); // Specify that the body of the request contains form data req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Send form encoded data stating that I want to add the // specified item to the cart. req.send("action=add&item="+itemCode); } Và ngay sau đó, bạn đã nhìn thấy phần đầu tiên của việc thiết lập chu trình vòng tròn Ajax cụ thể là việc tạo ra và gửi đi yêu cầu HTTP từ phía máy khách. Tiếp theo là mã servlet Java được sử dụng để xử lý yêu cầu này. Xử lý yêu cầu servlet Việc xử lý một XMLHttpRequest bằng một servlet phần lớn giống như việc xử lý một yêu cầu HTTP thông thường từ trình duyệt. Dữ liệu biểu mẫu đã mã hóa được gửi trong phần thân của yêu cầu của POST có thể được các cuộc gọi HttpServletRequest.getParameter() thu nhận. Các yêu cầu Ajax tham gia vào HttpSession giống như các yêu cầu Web thông thường từ ứng dụng. Điều này có ích cho kịch bản trong ví dụ giỏ mua hàng vì nó cho phép tôi tóm lược trạng thái giỏ hàng của người dùng trong một JavaBean và vẫn tiếp tục trạng thái đó cho phiên làm việc giữa các yêu cầu. Liệt kê 4 là một phần của một servlet đơn giản có xử lý các yêu cầu Ajax để cập nhật giỏ hàng. Một bean Cart được lấy từ phiên làm việc của người dùng và trạng thái của nó được cập nhật theo các tham số yêu cầu. Cart sau đó được tuần tự hóa tới XML và XML đó được ghi vào ServletResponse. Quan trọng là thiết lập kiểu nội dung cho application/xml, nếu không XMLHttpRequest sẽ không phân tích cú pháp nội dung trả lời trong một XML DOM. Liệt kê 4. Mã servlet để xử lý các yêu cầu Ajax [...]... nhiều cách sai lầm với Ajax Một số trong những vấn đề tôi thảo luận ở đây hiện đang thiếu các giải pháp dễ dàng nhưng sẽ được cải tiến khi Ajax đã hoàn thiện Khi cộng đồng nhà phát triển thu được kinh nghiệm phát triển ứng dụng Ajax, các cách thực hành và hướng dẫn tốt nhất sẽ được viết thành tài liệu Tính sẵn sàng của XMLHttpRequest Một trong những vấn đề lớn nhất ở phía trước các nhà phát triển Ajax. .. kiến thức Ajax lõi cần thiết để xem xét các khía cạnh khác này Đó là tin tốt nếu bạn đang cảm thấy nản lòng bởi sự phức tạp của việc viết một ứng dụng Ajax lớn bằng cách sử dụng các kỹ thuật được thể hiện ở đây Tùy theo các khung công tác như Struts, Spring và Hibernate đã tiến triển tới việc phát triển ứng dụng Web trừu tượng cách xa khỏi các chi tiết mức thấp của Servlet API và JDBC, do đó các bộ công... để phát triển Ajax dễ dàng Một số trong các khung công tác này chỉ tập trung vào phía khách, cung cấp các cách thức dễ dàng để thêm các hiệu ứng trực quan vào các trang web của bạn hoặc sắp xếp hợp lý việc sử dụng XMLHttpRequest Các khung công tác khác tiến xa hơn, đưa ra các phương tiện để tự động tạo các giao diện Ajax từ mã phía máy chủ Các khung công tác này cố gắng để hoàn thành công việc cho. .. bạn đang triển khai trên Web công cộng, tất nhiên phải lưu ý rằng với cách quá tự tin vào XMLHttpRequest có sẵn, bạn đang có khả năng ngăn người dùng sử dụng các trình duyệt cũ hơn, các trình duyệt cho người khuyết tật hoặc trình duyệt đơn giản trên các thiết bị cầm tay sử dụng ứng dụng của bạn Vì vậy, bạn nên cố gắng để làm cho ứng dụng của bạn "giảm duyên dáng" đi và duy trì chức năng trong các trình... một kiến thức về các thành phần cơ bản của các thành phần phía máy khách và phía máy chủ có tham gia tương tác Ajax Đây là các khối tạo dựng của một ứng dụng Web Ajax dựa trên Java Ngoài ra, bạn cũng nên hiểu một số vấn đề thiết kế mức cao đi kèm tiếp cận Ajax Việc tạo một ứng dụng Ajax thành công đòi hỏi một cách tiếp cận toàn diện từ thiết kế giao diện người dùng thông qua thiết kế JavaScript đến... kiểu người dùng Khi phát triển một ứng dụng Ajax, hãy có ý thức về việc bạn sắp gửi đến máy chủ bao nhiêu yêu cầu và kết quả nạp máy chủ mà việc này sẽ gây ra Bạn có thể làm giảm nhẹ việc nạp máy chủ bằng cách tạo tầng đệm cho các yêu cầu trên máy khách và nhớ nhanh các trả lời của máy chủ trên máy khách, khi thích hợp Bạn cũng nên cố gắng thiết kế các ứng dụng Ajax Web của bạn để cho có thể thực hiện... bản Ajax của ứng dụng hoặc một phiên bản dựa trên biểu mẫu thông thường khi thích hợp Các mối quan tâm về khả năng sử dụng Một số vấn đề về khả năng sử dụng xung quanh các ứng dụng Ajax phổ biến hơn Chẳng hạn, điều quan trọng là cho người dùng biết rằng nguồn vào của họ đã được đăng ký, vì các cơ chế phản hồi thông thường của con trỏ đồng hồ cát và việc quay tròn trình duyệt "throbber" không áp dụng cho. .. Nếu bạn xem xét Cart .java trong mã nguồn ứng dụng có sẵn từ phần Tải về, bạn sẽ thấy rằng XML được tạo ra đơn giản bằng cách gắn thêm các chuỗi lại với nhau Khi chỉ vừa đủ cho ví dụ này, thị việc này gần như cũng là cách xấu nhất để tạo ra XML từ mã Java Tôi sẽ đề xuất một số cách tiếp cận tốt hơn trong phần tiếp theo của loạt bài này Vì vậy, bây giờ bạn đã biết cách CartServlet đáp ứng với một XMLHttpRequest... hút một cách khôn khéo mắt của người dùng đến các vùng cập nhật của trang Các vấn đề khác do việc cập nhật các trang với Ajax gây ra bao gồm "phá vỡ" nút quay về của trình duyệt và URL trong thanh địa chỉ không phản ánh toàn bộ trạng thái của trang, ngăn ngừa đánh dấu Xem phần Tài nguyên với các bài viết tập trung đặc biệt vào các vấn đề về khả năng sử dụng của các ứng dụng Ajax Nạp máy chủ Việc triển. .. một cách tiếp cận mức cao hơn để phát triển Ajax Tôi sắp xem xét một số trong số các khung công tác đó trong loạt bài này Cộng đồng Ajax đang phát triển nhanh và có rất nhiều thông tin có giá trị ngoài cộng đồng này Trước khi đọc bài viết tiếp theo trong loạt bài này, tôi khuyên bạn nên tham khảo các bài viết được liệt kê trong phần tài nguyên, đặc biệt khi bạn mới bắt đầu đến với Ajax hoặc phát triển . Ajax cho các nhà phát triển Java: Xây dựng các ứng dụng Java động Ajax mở đường cho các ứng dụng Web tốt hơn Philip McCarthy, Nhà Phát triển, SmartStream Technologies. trải nghiệm ứng dụng Web động. Ajax (Asynchronous JavaScript và XML) là một kỹ thuật lập trình cho phép bạn kết hợp các công nghệ Java, XML và JavaScript cho các ứng dụng Web dựa trên Java để. khăn của cách tiếp cận Ajax, cũng như các khả năng sử dụng rộng hơn và về khả năng tiếp cận mà bạn cần cân nhắc khi tạo các ứng dụng Ajax. Một giỏ mua hàng tốt hơn Bạn có thể sử dụng Ajax để