Thứ Năm, 1 tháng 12, 2016

Dữ liệu được request từ server và chuyển thành định dạng text gửi về client, client sử dụng JavaScript để xử lý chức năng và trình bày kết quả với giao diện

Dữ liệu được request từ server và chuyển thành định dạng text gửi về client, client sử dụng JavaScript để xử lý chức năng và trình bày kết quả với giao diện

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 khi có request nhằm đảm bảo dữ liệu luôn luôn được cập nhật mới nhất. Sau đó, dữ liệu được chuyển về client dưới dạng XML hay String để client sử dụng JavaScript để xử lý chức năng theo yêu cầu của người dùng và trình bày dữ liệu nhưng không làm refresh trang giao diện trình bày. Mô hình này với mục đích hướng tới hạn chế refresh trang hay tải lại trang của người dùng, xử lý cập nhật dữ liệu mới nhất cho người dùng và người dùng chỉ cảm nhận sự cập nhật nội dung của trang. Trong bài này, chúng tôi giới thiệu hai mô hình áp dụng.

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

Mô hình trường hợp 1

  • 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ẽ tìm trang tương ứng và response lại cho client.
    • Client chọn chức năng trên trang, ở đây, chúng tôi ví dụ là chức năng search. Lời yêu cầu được chuyển về phía server. Server chuyển vào container và container kích hoạt Servlet
    • Servlet sẽ lấy dữ liệu từ DB, convert thành XML trên page được render ở phía server và response lại client
    • Client khi nhận được chuỗi XML sẽ thực hiện xử lý chuyển đổi thành XML DOM, sau đó thực hiện xử lý theo qui trình chức năng yêu cầu của người dùng để trình bày kết quả ra giao diện
    • 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 đòi hỏi phải lấy dữ liệu ở phía server mỗi lần có request. Tuy nhiên, dữ liệu được lấy nhưng không thực hiện render giao diện ở phía server mà đem về client thực hiện xử lý theo yêu cầu của người dùng và trình bày giao diện áp dụng DHTML
    • 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 luôn phải request ở phía server và trang sẽ bị refresh hay load lại khi người dùng nhấn vào chức năng (Mô hình 2 tiếp theo bên dưới sẽ khắc phục trường hợp này).
    • Ngoài ra, mô hình này có thể tốn nhiều thời gian load và convert dữ liệu nếu số lượng dữ liệu càng nhiều ở phía server Nhưng vấn đề này có thể khắc phục bằng cách chúng ta thực hiện load dần dần theo yêu cầu với ý tưởng cơ bản là load theo tiêu chí như là cái gì mới nhất, phổ dụng nhất, theo sở thích của người dùng, ... để hạn chế việc load dữ liệu quá nhiều hay dư thừa.
  • 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
      • Database có cấu trúc table như sau

      • 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 trang JSP để xử lý chức năng và render về phía client javascript lẫn dữ liệu được request từ server

      • Các hàm addRow, deleteRow, searchNode, searchProcess sẽ tương tự như bài xử lý ở client, hạn chế post back về phía server, tham khảo tại địa chỉ http://www.kieutrongkhanh.net/2016/10/giao-tiep-giua-java-scripts-va-java.html
      • Dữ liệu của object JavaScript sẽ được lấy từ request scope và sử dụng EL để đưa thẳng trực tiếp chuỗi XML vào biến của JavaScripts

      • Form trong hình yêu cầu trực tiếp Servlet ở phía server để lấy dữ liệu
      • Và một table với tiêu đề cột và không có hàng để chở đón dữ liệu sau khi xử lý ở client sử dụng JavaScript
    • Bước 3: tạo Controller Servlet để đón nhận xử lý lấy dữ liệu từ DB và chuyển thành XML đưa lại cho biến JavaScript Object

    • Bước 4: 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.

      • Chúng ta nhập một giá trị bất kỳ vào ô search, click Search, chúng ta sẽ thấy được kết quả trên giao diện màn hình

Mô hình trường hợp 2

  • Mô hình thể hiển qui trình tương tác của client và server như sau
    • Mô hình này tương tự như trường hợp 1 ở trên. Tuy nhiên, ở đây chúng ta sẽ dùng XMLHttpRequest (tên gọi thường được gọi Ajax) để hỗ trợ chúng ta lấy dữ liệu trực tiếp từ server nhưng không làm refresh lại trang như mô hình 1
    • Ngoài ra, XMLHttpRequest hỗ trợ sẵn các thức chuyển đổi XML thành XML DOM khi đón nhận ở client mà không tốn theo công để parse XML trở thành XML DOM
    • Ở mô hình này, chúng tôi áp dụng cách chuyển đổi của JAXB để convert XML trở thành stream và tống thẳng trực tiếp vào respone để đưa vê phía client để tăng tính tối ưu trong việc lưu file hay biến thành String
  • Đặc tính của mô hình
    • Tương tự như mô hình 1 nhưng không làm refresh lại hay load lại trang và tạo cảm nhận
  • Các nội dung thực hiện theo từng bước như sau
    • Trong ví dụ này, chúng tôi không lấy dữ liệu từ DB mà thực hiện tạo thẳng Object ngay trên server để nhằm thể hiện cách thực hiện
    • Việc nhấn nút Search chỉ là hình thức thể hiện việc lấy dữ liệu về từ phía server về client để trình bày, không phải là search thực sự
    • Sau khi đã thực hiện và hiểu được demo, quí vị tự ứng dụng DB trong trường hợp 1 và cải tiến thành trường hợp 2 để cảm nhận được sự khác biệt khi làm trên cùng chức năng với ứng dụng
    • Bước 1: tạo thành phần bổ trợ cho JAXB Object

    • Bước 2: tạo trang JSP để xử lý

      • Các hàm addRow, deleteRow trong JavaScript tương tự như trường hợp 1
      • Hàm GetXMLHttpObjext được dùng để tạo ra đối tượng hỗ trợ truyền từ client đến server và ngược lại. Lưu ý: đối tượng này chỉ được gọi trong cùng context
      • Dòng code 99 cần lưu ý, khi triển khai ứng dụng và viết code cần phải bắt trạng thái của object theo biến cố onreadystatechange với trạng thái là 4 mới xử lý vì viết code theo dạng hình trên thì với dữ liệu ít mọi việc bình thường. Tuy nhiên, với dữ liệu cực kỳ lớn có thể gây nên tình trạng load về không kịp và nhấn nút lệnh hay link xử lý nhiều hơn 02 lần mới thấy kết quả
      • Trạng thái số 4 và biến cố được nêu ra ở trên để xác định được rằng server đã xử lý hoàn tất và đưa kết quả lại client
    • Bước 3: tạo Servlet để xử lý

      • Trong code hình có hàm marshall object trở thành XML Stream và đưa thành output stream để chúng ta có thể đưa thẳng vào trong respone
    • Bước 4: Clean and Build, Deploy và test thử
      • Giao diện đầu tiên chúng ta nhìn thấy được

      • Click nút Search, chúng ta sẽ đón nhận được object ở client

      • Khi nhấn OK, chúng ta có kết quả trình bày

Chúc mừng quí vị đã hoàn tất và nắm được mô hình lấy dữ liệu trực tiếp từ server từ DB chuyển thành Java Object và convert thành XML String/Stream tùy theo tình huống và đưa về client để sử dụng Java Scripts xử lý chức năng và trình bày giao diện ở phía client. Tuy nhiên, mỗi mô hình đều có ưu điểm và khuyết điểm của nó, quí vị nên so sánh với mô hình trong bài xử lý client http://www.kieutrongkhanh.net/2016/10/giao-tiep-giua-java-scripts-va-java.html để từ đó lựa chọn cho phù hợp với ứng dụng của quí vị đang phát triển

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.

Không có nhận xét nào:

Đăng nhận xét