Giao tiếp giữa Java Scripts và Java Object hỗ trợ trao đổi dữ liệu để xử lý ở phía client – hạn chế post back về phía server

Giao tiếp giữa Java Scripts và Java Object hỗ trợ trao đổi dữ liệu để xử lý ở phía client – hạn chế post back về phía server

Mục đích: Chủ đề của bài này giới thiệu về mô hình ứng dụng kết hợp xử lý và lấy dữ liệu từ server nhưng không xử lý giao diện và chức năng ở phía server mà đem dữ liệu về phía client để hỗ trợ trình bày và xử lý tùy theo yêu cầu của người dùng. Mô hình này với mục đích hướng tới hạn chế post back về phía server làm giảm performance của hệ thống và tiến tới đáp ứng nhu cầu xử lý nhanh chóng ngay tại client tủy theo thói quen của người sử dụng và nghiệp vụ của ứng dụng.

Yêu cầu về kiến thức cơ bản

• Nắm vững các khái niệm về XML và cách viết tài liệu XML well-formed (tham khảo lại bài Giới thiệu về XML – định nghĩa, cách viết XML đúng cú pháp (XML well-formed) http://www.kieutrongkhanh.net/2016/08/gioi-thieu-ve-xml-inh-nghia-cach-viet.html)
• Nắm vững các khái niệm về XML-Schema và cách thức validation tài liệu XML dùng Schema (tham khảo lại tại địa chỉ http://www.kieutrongkhanh.net/2016/08/gioi-thieu-ve-xml-schema-inh-nghia-cach.html)
• Nắm vững các khái niệm về DOM và cách xây dựng ứng dụng khai thác dữ liệu sử dụng DOM (tham khảo lại tại địa chỉ http://www.kieutrongkhanh.net/2016/08/gioi-thieu-ve-dom-inh-nghia-dom-api-va.html )
• Nắm vững về cách xây dựng ứng dụng web và các khái niệm liên quan về Servlet (tham khảo tại địa chỉ http://www.kieutrongkhanh.net/search/label/Servlet%26JSP )
• Nắm vững khái niệm về ngôn ngữ lập trình Java, lập trình thao tác hướng đối tượng
• Nắm vững khái niệm và cách sử dụng JavaScripts (tham khảo tại địa chỉ http://www.w3schools.com/js/default.asp )
• Nắm vững các khái niệm về XML DOM trong JavaScripts (tham khảo tại địa chỉ https://msdn.microsoft.com/en-us/library/ms766487(v=vs.85).aspx )
• Đã viết và kiểm tra một tài liệu XML well-formed
• Nắm vững cách xây dựng web sử dụng mô hình MVC với J2EE/JavaEE
• Tools sử dụng ở đây là Netbeans 6.9.1 với JDK 6 update 22 hay Netbeans 7.3.1 với JDK 7 update 45 hay Netbeans 8.1 với JDK 8 update 66

Mô hình tổng quát

• Mô hình thể hiển qui trình tương tác của client và server như sau
• Client truy cập ứng dụng bằng cách gõ địa chỉ ứng dụng trên thanh url của browser. Browser sẽ gửi request đến server, server sẽ chuyển đến container
• Tại thời điểm server chạm container, container sẽ kích hoạt request listener để đón nhận yêu cầu của người dùng.
• Tại request listener này, chúng ta sẽ thực hiện xử lý thông qua việc lấy toàn bộ dữ liệu dưới DB thành dạng JAXB Object và marshaller chuyển đổi thành dạng XML String
• Request tiếp tục được container chuyển đến trang jsp và response về giao diện cho người sử dụng, kèm theo trong response message là chuổi xml đã được hình thành trong request listener
• XML String này sẽ được lưu trữ tại client để khi người dùng nhập giá trị Search và click nút Search tại Browser, ứng dụng sẽ thực hiện search tại client sử dụng XML DOM để tìm kiếm trên cây DOM ở client
• Kết quả tìm kiếm được trình bày ở client sử dụng javascript kết hợp với Dynamic HTML ở client để trình bày kết quả
• Đặc tính của mô hình
• Mô hình này tăng tốc độ xử lý ở phía client và hạn chế post back liên tục về phía server
• Tuy nhiên, khi áp dụng mô hình này chúng ta sẽ phải đón nhận khuyết điểm là dữ liệu được truy vấn ở client sẽ bị out of date. Nhưng vấn đề này có thể khắc phục bằng cách theo định kỳ thời gian chúng ta có thể xử lý làm mới dữ liệu lại ở client
• Nhìn ở một khía cạch khác, với nghiệp vụ bán hàng của một cửa hàng thì tại thời điểm request đầu tiên thì danh sách các món hàng có sẵn để search là hoàn toàn phù hợp và có thể không cần cập nhật liên tục vì danh mục hàng hóa không thay đổi về sản phẩm mà chỉ thay đổi về số lượng – nội dung này chúng ta sẽ kiểm tra ở phía server khi người dùng đặc hàng. Bên cạnh đó, đối với cửa hàng buôn bán các mặt hàng mới – nếu có – xảy ra liên tục thì việc người dùng trước và sau có sự chênh lệch về số món hàng vẫn có thể chấp nhận được
• Để triển khai mô hình trong thực tế, chúng tôi khuyến cáo áp dụng nghiệp vụ đối với khách hàng là member của hệ thống – truy cập thông qua account – chúng ta có thể dựa trên profile của người dùng để chọn những sản phẩm tùy theo thói quen và sở thích của người dùng để hỗ trợ load dữ liệu và trang nhanh lên. Đối với người dùng mới của hệ thống, chúng ta nên xây dựng cơ chế tạo danh mục món hàng theo xu hướng và mới nhất để đề xuất cho người dùng
• Ngoài ra, có một số đặc tính kỹ thuật mà chúng tôi sẽ trình bày trực tiếp khi hiện thực trong phần tiếp theo
• Các nội dung thực hiện theo từng bước như sau
• Bước 1: tạo thành phần bổ trợ cho JAXB Object
• Tạo Object DTO – JavaBean để chứa dữ liệu từng dòng dưới DB – do bài demo tiếp cận, chúng ta sẽ lấy hết toàn bộ dữ liệu từ DB lên

• Nội dung khung đỏ trong đoạn code trên, chúng tôi muốn thể hiện rằng chúng ta sẽ format định dạng xuất của tài liệu xml theo đúng thứ tự chúng ta mong muốn

• Tạo JAXB Object cha chứa tập JAXB Object con – DTO ở trên

• Bước 2: Tạo hàm hỗ trợ marshaller dữ liệu từ JAXB Object trở thành XML

• Phần comment được tô đỏ thể hiện rằng khi xuất dữ liệu dạng String về phía client, chúng ta không nên định dạng format cho đẹp bởi vì cơ bản dữ liệu sẽ được gắn vào code client dưới dạng chuỗi trong javascript. Khi có ký hiệu xuống hàng thì JavaScript coi như là thành phần câu lệnh gán dữ liệu kết thúc và giá trị biến chứa dữ liệu của chúng ta sẽ không thể truy vấn được vì dữ liệu đã được cắt bỏ đi.
• Bước 3: tạo request Listener để xử lý
• Tạo Java class implements từ ServletRequestListener và xử lý methods requestInitialized – methods này được container kích hoạt khi đón nhận request từ server chuyển vào container

• Lưu ý
• Methods này được kích hoạt với mọi request được chuyển từ server đến container. Do vậy, với việc triển khai ứng dụng thực sự, chúng ta cần phải xác định rõ request cụ thể nào mới được xử lý – sử dụng đối tượng ServletRequestEvent. Trong bài demo này, để dễ dàng tiếp cận chúng ta viết code trực tiếp mà không cần xét cái gì cả. Chính điều này sẽ gây giảm performance của hệ thống và xử lý dư thừa vì hệ thống phải luôn lấy dữ liệu từ DB, convert thành object và chuyển đổi thành XML String bất kể khi nào có request tới
• Ngoài ra, ứng dụng đang được lấy toàn bộ dữ liệu dưới DB mà chưa phân biệt cụ thể người dùng như là phân tích mô hình đã nêu ra ở trên
• Đăng ký class này với Container thông qua web.xml

• Bước 4: cài đặt JavaScript để đón nhận và xử lý dữ liệu ở client
• Cài đặt Script để parsing dữ liệu XML thông qua đối tượng regObj và hỗ trợ trình bày dữ liệu ra lưới thông qua hàm addRow và deleteRow

• Trong hàm searchProcess, chúng ta thấy có đoạn code delete các row sẵn có trong table ngoại trừ dòng 0 bởi vì javascript add thêm dòng vào lưới mà không xóa các dòng cũ đi. Tuy nhiên, mỗi lần người dùng nhập giá trị và nhấn nút Search nghĩa là kết quả search mới phải được thể hiện trên lưới. Nghĩa là phải xóa toàn bộ kết quả cũ trên lưới
• Mapping dữ liệu truyền từ server vào client – giao tiếp giữa Java Object và JavaScript Object – cụ thể kết quả XML String xử lý trong requestListener đã được đặt trong request Scope của ứng dụng web, chúng ta sẽ lấy giá trị này gán trực tiếp và biến thành chuỗi đẩy thẳng về phía client trong biến regObj của JavaScript

• Cài đặt biến cố onclick để kích hoạt hàm searchProcess đã được cài đặt trong javascipt để thực hiện search ở client khi người dùng click
• Bước 5: Clean and Build Project, Deploy, và chạy thử ứng dụng
• Khi mở ứng dụng trên browser, chúng ta sẽ thấy giao diện search. Đồng thời ở dưới server chúng ta đã thấy được RequestListener đã được kích hoạt

• Chúng ta nhập một giá trị bất kỳ vào ô search, click Search, chúng ta sẽ thấy được chuỗi xml đã có sẵn trong client

• Nếu chúng ta chọn chế độ view – debug ở browser chúng ta sẽ nhìn thấy được dữ liệu đã được nạp sẵn ở client như sau

• Sau đó, kết quả search sẽ được hiển thị trên lưới

• Tương tự, chúng ta thay đổi giá trị khác và click nút Search, table sẽ được cập nhật mới và không lưu lại giá trị cũ vì lưới đã được xóa trước khi in kết quả mới

Chúc mừng quí vị đã hoàn tất và nắm được mô hình trao đổi dữ liệu giữa Java Object và Java Object Scripts để thể hiện ý tưởng xử lý dữ liệu và trình bày chủ yếu ở phía client nhằm hạn chế post back về phía server. Tuy nhiên, mỗi mô hình đều có ưu điểm và khuyết điểm của nó tùy theo cách thực vận hành của chúng ta theo nghiệp vụ trong ứng dụng trong quá trình phát triển phần mềm

Chúng tôi hy vọng nội dung của bài này giúp ích quí vị.

Rất mong sự góp ý chân thành và chia sẻ của quí vị về vấn đề này. Hẹn gặp lại quý vị ở các chủ đề khác liên quan đến XML.