ผู้แต่ง: Cloves Carneiro
ผู้แปล: ซิมโมน
คำชี้แจงลิขสิทธิ์: เว็บไซต์ใดๆ ที่ได้รับอนุญาตจาก Matrix เมื่อพิมพ์ซ้ำ โปรดระบุแหล่งที่มาดั้งเดิมและข้อมูลผู้เขียนของบทความและคำชี้แจงนี้ในรูปแบบของไฮเปอร์ลิงก์ ผู้แต่ง: Cloves Carneiro;simmone
ที่อยู่เดิม: http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html
ที่อยู่จีน: http://www.matrix.org.cn/resource/article/43/43926_DWR_AJAX.html
คำสำคัญ: DWR javascript :void(0);">AJAX
ภาพรวม
บทความนี้จะอธิบายการใช้โปรเจ็กต์โอเพ่นซอร์ส DWR (Direct Web Remoting) และแนวคิดของ javascript :void(0);">AJAX (Asynchronous JavaScript and XML ) เพื่อปรับปรุงการใช้งานเว็บแอปพลิเคชัน ผู้เขียนแสดงทีละขั้นตอน วิธีที่ DWR สร้าง javascript :void(0);">แอปพลิเคชัน AJAX นั้นง่ายและรวดเร็ว (1,600 คำ; 20 มิถุนายน 2548)
javascript :void(0);">AJAX หรือ Asynchronous JavaScript และ XML อธิบายเทคโนโลยี การพัฒนาที่ใช้ส่วนผสมของ HTML (หรือ XHTML) และสไตล์ชีตแบบเรียงซ้อนเพื่อแสดงข้อมูลเพื่อสร้างแอปพลิเคชันเว็บเชิงโต้ตอบ DocumentObject Model (DOM ) JavaScript แสดงและโต้ตอบกับข้อมูลที่แสดงแบบไดนามิก และอ็อบเจ็กต์ XMLHttpRequest แลกเปลี่ยนและประมวลผลข้อมูลแบบอะซิงโครนัสกับเว็บเซิร์ฟเวอร์
ตัวอย่างมากมายบนอินเทอร์เน็ตสาธิตขั้นตอนที่จำเป็นในการโต้ตอบกับเซิร์ฟเวอร์โดยใช้ XMLHttpRequest ภายในไฟล์ HTML เมื่อเขียนและบำรุงรักษาโค้ด XMLHttpRequest ด้วยตนเอง นักพัฒนาจะต้องจัดการกับปัญหาที่อาจเกิดขึ้นมากมาย โดยเฉพาะอย่างยิ่งปัญหาเช่นความเข้ากันได้ในการใช้งาน DOM ข้ามเบราว์เซอร์ สิ่งนี้จะนำไปสู่การใช้เวลานับไม่ถ้วนในการเขียนโค้ดและแก้ไขโค้ด Javascript ซึ่งเห็นได้ชัดว่าไม่เป็นมิตรกับนักพัฒนา
โครงการ DWR (Direct Web Remoting) เป็นโซลูชันโอเพ่นซอร์สภายใต้ลิขสิทธิ์ Apache สำหรับนักพัฒนาที่ต้องการใช้ javascript :void(0);">AJAX และ XMLHttpRequest ด้วยวิธีง่ายๆ มีชุดฟังก์ชัน Javascript ที่ทำให้การ วิธี การเรียกอ็อบเจ็กต์ Java บนแอปพลิเคชันเซิร์ฟเวอร์จากหน้า HTML มันจัดการพารามิเตอร์ประเภทต่าง ๆ ในขณะที่ยังคงความสามารถในการอ่านโค้ด HTML
DWR ไม่ใช่การแทรกลงในการออกแบบ และไม่ได้บังคับให้ออบเจ็กต์ใช้โครงสร้างการสืบทอดใดๆ ทำงานได้ดีกับแอปพลิเคชันภายในกรอบงานเซิร์ฟเล็ต สำหรับนักพัฒนาที่ขาดประสบการณ์ในการเขียนโปรแกรม DHTML DWR ยังมีไลบรารี JavaScript ที่มีงาน DHTML ที่ใช้บ่อย เช่น การประกอบตาราง การกรอกรายการแบบหล่นลงที่เลือกด้วยรายการ และการเปลี่ยนแปลงเนื้อหาขององค์ประกอบ HTML เช่น <div> และ <span . >
เว็บไซต์ DWR มีรายละเอียดครบถ้วนและมีเอกสารประกอบมากมายซึ่งเป็นพื้นฐานสำหรับบทความนี้ ตัวอย่างบางส่วนมีไว้เพื่อแสดงวิธีการใช้ DWR และงาน ประเภทใดที่สามารถทำได้ด้วยไลบรารี
บทความนี้ช่วยให้ผู้อ่านเห็นว่าเว็บแอปพลิเคชันที่ใช้ DWR ถูกสร้างขึ้นทีละขั้นตอนอย่างไร ฉันจะแสดงรายละเอียดที่จำเป็นเพื่อสร้างแอปพลิเคชันตัวอย่างง่ายๆ นี้ ซึ่งสามารถดาวน์โหลดได้และปรับใช้ในสภาพแวดล้อมของคุณเพื่อดูว่า DWR ทำงานอย่างไร
หมายเหตุ: การค้นหาข้อมูลเกี่ยวกับ javascript :void(0);">AJAX นั้นไม่ใช่เรื่องยาก มีบทความและบล็อกหลายรายการบนเว็บที่ครอบคลุมหัวข้อนี้ แต่ละบทความพยายามชี้ให้เห็นและแสดงความคิดเห็นในแง่มุมที่แตกต่างกันของแนวคิด ในส่วนแหล่งข้อมูล คุณจะพบลิงก์ที่น่าสนใจไปยังตัวอย่างและบทความเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ javascript :void(0);">AJAX
แอปพลิเคชันตัวอย่าง <BR>แอปพลิเคชันตัวอย่างที่ใช้ในบทความนี้จำลองเครื่องมือค้นหาการเช่าอพาร์ทเมนต์ในโตรอนโต ผู้ใช้สามารถเลือกชุดเกณฑ์การค้นหาก่อนค้นหาได้ เพื่อปรับปรุงการโต้ตอบ javascript :void(0);">AJAX จะถูกใช้ในสองสถานการณ์ต่อไปนี้:
·แอปพลิเคชันจะแจ้งให้ผู้ใช้ทราบว่าจะส่งคืนผลการค้นหาจำนวนเท่าใดตามการเลือกของเขา หมายเลขนี้อัปเดตแบบเรียลไทม์ - โดยใช้ javascript :void(0);">AJAX - เมื่อจำนวนห้องนอนและห้องน้ำที่ผู้ใช้เลือกหรือช่วงราคาเปลี่ยนแปลง เมื่อไม่มีผลการค้นหาที่ตรงกับเกณฑ์มากเกินไปหรือมากเกินไป ผู้ใช้ไม่จำเป็นต้องคลิกปุ่มค้นหา
· การสืบค้น ฐานข้อมูล และการดึงผลลัพธ์ทำได้โดย javascript :void(0);">AJAX เมื่อผู้ใช้กดปุ่มแสดงผลลัพธ์ ฐานข้อมูลจะทำการค้นหา ด้วยวิธีนี้ แอปพลิเคชันจะดูตอบสนองมากขึ้น และทั้ง ไม่จำเป็นต้องโอเวอร์โหลดเพื่อแสดงผลลัพธ์
ฐานข้อมูล <BR>ฐานข้อมูลที่เราใช้คือ HSQL ซึ่งเป็นกลไกฐานข้อมูล Java SQL ที่ใช้ทรัพยากรน้อยมากและสามารถรวมเข้ากับเว็บแอปพลิเคชันได้โดยไม่ต้องติดตั้ง และกำหนดค่า ไฟล์ SQL ใช้เพื่อสร้างตารางในหน่วยความจำและเพิ่มบันทึกบางส่วนเมื่อบริบทแอปพลิเคชันเว็บเริ่มต้นขึ้น
แอปพลิเคชัน คลาส Java <BR>ประกอบด้วยคลาสหลักสองคลาสที่เรียกว่า Apartment และ ApartmentDAO คลาส Apartment.java เป็นคลาส Java ธรรมดาที่มีคุณสมบัติและวิธีการ getter/setter ApartmentDAO.java เป็นคลาสการเข้าถึงข้อมูลที่ใช้ในการสืบค้นฐานข้อมูลและส่งคืนข้อมูลตามเกณฑ์การค้นหาของผู้ใช้ การใช้งานคลาส ApartmentDAO นั้นตรงไปตรงมา โดยใช้การเรียกการเชื่อมต่อฐานข้อมูล Java โดยตรงเพื่อรับจำนวนอพาร์ทเมนท์ทั้งหมดและรายการอพาร์ทเมนต์ที่ว่างซึ่งตรงกับคำขอของผู้ใช้
การกำหนดค่าและการใช้ DWR <BR>การตั้งค่าการใช้ DWR นั้นง่ายดาย: คัดลอกไฟล์ jar DWR ลงในไดเร็กทอรี WEB-INF/lib ของเว็บแอปพลิเคชัน เพิ่มการประกาศเซิร์ฟเล็ตใน web.xml และสร้างไฟล์การกำหนดค่า DWR จำเป็นต้องมีไฟล์ jar แยกต่างหากสำหรับการแจกจ่าย DWR คุณต้องเพิ่มเซิร์ฟเล็ต DWR ลงในส่วนคำอธิบายการใช้งานใน WEB-INF/web.xml ของแอปพลิเคชันของคุณ
<เซิร์ฟเล็ต>
<servlet-name>dwr-inviver</servlet-name>
<ชื่อที่แสดง>เซิร์ฟเล็ต DWR</ ชื่อที่แสดง>
<description>เซิร์ฟเวอร์ Direct Web Remoter</description>
<servlet-คลาส>uk.ltd.getahead.dwr.DWRServlet</servlet-คลาส>
<init-พารามิเตอร์>
<param-name>แก้จุดบกพร่อง</param-name>
<param-value>จริง</param-value>
</init-พารามิเตอร์>
</เซิร์ฟเล็ต>
<การแมปเซิร์ฟเล็ต>
<servlet-name>dwr-inviver</servlet-name>
<url-รูปแบบ>/dwr/*</url-รูปแบบ>
</การแมปเซิร์ฟเล็ต>
ขั้นตอนที่เป็นทางเลือกคือการตั้งค่า DWR ให้เป็นโหมดดีบัก - ดังตัวอย่างข้างต้น - โดยการตั้งค่าพารามิเตอร์การดีบักเป็นจริงในส่วนคำอธิบายเซิร์ฟเล็ต เมื่อ DWR อยู่ในโหมดแก้ไขข้อบกพร่อง คุณสามารถดูออบเจ็กต์ Java ที่สามารถเข้าถึงได้ทั้งหมดได้จากหน้า HTML หน้าเว็บที่มีรายการวัตถุที่มีอยู่จะปรากฏที่ URL /WEBAPP/dwr ซึ่งแสดงวิธีการสาธารณะของวัตถุ วิธีการที่แสดงสามารถเรียกได้จากเพจ ทำให้คุณสามารถเรียกใช้เมธอดบนอ็อบเจ็กต์บนเซิร์ฟเวอร์ได้เป็นครั้งแรก รูปภาพต่อไปนี้แสดงให้เห็นว่าหน้าดีบักมีลักษณะอย่างไร:
หน้าแก้ไขข้อบกพร่อง
ตอนนี้ คุณต้องแจ้งให้ DWR ทราบว่าวัตถุใดจะได้รับคำขอผ่านวัตถุ XMLHttpRequest งานนี้สำเร็จได้ด้วยไฟล์คอนฟิกูเรชันชื่อ dwr.xml ในไฟล์การกำหนดค่า คุณกำหนดออบเจ็กต์ที่ DWR อนุญาตให้คุณโทรจากหน้าเว็บ จากการออกแบบ DWR อนุญาตให้เข้าถึงวิธีการสาธารณะทั้งหมดของคลาสที่เผยแพร่ แต่ในกรณีของเรา เราอนุญาตให้เข้าถึงได้เพียงไม่กี่วิธีเท่านั้น นี่คือไฟล์การกำหนดค่าสำหรับตัวอย่างของเรา:
<dwr>
<อนุญาต>
<convert converter="bean" match="dwr.sample.Apartment"/>
<สร้าง creator="ใหม่" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO">
<รวมวิธีการ="findApartments"/>
<รวมวิธีการ="countApartments"/>
</สร้าง>
</อนุญาต>
</dwr>
ไฟล์ด้านบนบรรลุเป้าหมายทั้งสองในตัวอย่างของเรา ขั้นแรก แท็ก <convert> จะบอก DWR ให้แปลงประเภทของออบเจ็กต์ dwr.sample.Apartment ให้เป็นอาร์เรย์ที่เชื่อมโยง เนื่องจากด้วยเหตุผลด้านความปลอดภัย DWR จะไม่แปลง bean ธรรมดาตามค่าเริ่มต้น ประการที่สอง แท็ก <create> ช่วยให้ DWR เปิดเผยคลาส dwr.sample.ApartmentDAO สำหรับการเรียก JavaScript ไฟล์ JavaScript ที่เราใช้ในหน้านั้นถูกกำหนดโดยแอตทริบิวต์ javascript เราต้องใส่ใจกับแท็ก <include> ซึ่งระบุวิธีการของคลาส dwr.sample.ApartmentDAO ที่พร้อมใช้งาน
หลังจากกำหนด ค่าโค้ด HTML/JSP แล้ว คุณสามารถเริ่มเว็บแอปพลิเคชันของคุณได้ ในขณะนี้ DWR จะพร้อมที่จะเรียกใช้วิธีการที่จำเป็นจาก HTML หรือเพจฝั่งเซิร์ฟเวอร์ Java (JSP) ของคุณ คุณสร้างไฟล์ JavaScript ในไฟล์ search.jsp เราต้องเพิ่มอินเทอร์เฟซ JavaScript ที่ DWR มอบให้ รวมถึงกลไก DWR และเพิ่มสามบรรทัดต่อไปนี้ในโค้ด ของเรา :
<script src='dwr/interface/ApartmentDAO.js'></ สคริปต์>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
เราสังเกตเห็นว่าเมื่อผู้ใช้เปลี่ยนเกณฑ์การค้นหา นี่เป็นแอปพลิเคชันแรกของ javascript :void(0);">AJAX ในโปรแกรมตัวอย่าง ในขณะที่เขา เห็น จำนวนอพาร์ทเมนท์ที่มีอยู่ได้รับการอัปเดตเมื่อเกณฑ์เปลี่ยนแปลง ฉันสร้างฟังก์ชัน JavaScript สองฟังก์ชัน: ฟังก์ชัน ApartmentDAO.countApartments() เป็นส่วนที่น่าสนใจที่สุดคือพารามิเตอร์แรกคือฟังก์ชัน loadTotal() ซึ่งระบุวิธีการ JavaScript ที่ DWR จะเรียกเมื่อได้รับการตอบกลับจากเซิร์ฟเวอร์ loadTotal จะถูกเรียกเพื่อแสดงผลลัพธ์ใน <div> ของฟังก์ชัน JavaScript ที่ใช้ในสถานการณ์แบบโต้ตอบ:
function updateTotal() {
$("resultTable").style.display = 'ไม่มี';
ห้องนอน var = document.getElementById("ห้องนอน").value;
var bathrooms = document.getElementById("ห้องน้ำ").value;
ราคา var = document.getElementById("ราคา").value;
อพาร์ทเมนต์DAO.countApartments(โหลดรวม, ห้องนอน, ห้องน้ำ, ราคา);
-
ฟังก์ชั่น loadTotal (ข้อมูล) {
document.getElementById("totalRecords").innerHTML = ข้อมูล;
} แน่นอนว่าผู้ใช้ต้องการดูรายการอพาร์ตเมนต์ที่ตรงกับเกณฑ์การค้นหาของเขา จากนั้น เมื่อผู้ใช้พอใจกับเกณฑ์การค้นหาของเขาและผลรวมถูกต้อง เขาจะกดปุ่มที่แสดงผลลัพธ์ ซึ่งเรียกเมธอด updateResults() JavaScript:
ฟังก์ชั่น updateResults () {
DWRUtil.removeAllRows("อพาร์ทเมนท์ร่างกาย");
ห้องนอน var = document.getElementById("ห้องนอน").value;
var bathrooms = document.getElementById("ห้องน้ำ").value;
ราคา var = document.getElementById("ราคา").value;
อพาร์ทเมนต์DAO.findApartments(โต๊ะเติม ห้องนอน ห้องน้ำ ราคา);
$("resultTable").style.display = '';
-
ฟังก์ชั่น fillTable (อพาร์ตเมนต์) {
DWRUtil.addRows("apartmentsbody", อพาร์ทเมนต์, [ getId, getAddress, getRooms, getBathrooms, getPrice ]);
-
เมธอด updateResults() จะล้างฟิลด์ตารางที่เก็บผลลัพธ์การค้นหาที่ส่งคืน รับพารามิเตอร์ที่จำเป็นจากอินเทอร์เฟซผู้ใช้ และส่งพารามิเตอร์เหล่านี้ไปยังออบเจ็กต์ ApartmentDAO ที่สร้างโดย DWR จากนั้นแบบสอบถามฐานข้อมูลจะถูกดำเนินการและ fillTable() จะถูกเรียก ซึ่งจะแยกวิเคราะห์อ็อบเจ็กต์ที่ส่งคืนโดย DWR (อพาร์ตเมนต์) และแสดงลงในเพจ (partmentsbody)
ปัจจัยด้านความปลอดภัย <BR>เพื่อให้ตัวอย่างกระชับ คลาส ApartmentDAO จะถูกเก็บไว้ให้เรียบง่ายที่สุดเท่าที่จะเป็นไปได้ แต่คลาสดังกล่าวมักจะมีชุดวิธีการตั้งค่าเพื่อจัดการข้อมูล เช่น insert(), update() และ Delete() DWR เปิดเผยวิธีการสาธารณะทั้งหมดที่เรียกใช้โดยหน้า HTML ทั้งหมด ด้วยเหตุผลด้านความปลอดภัย จึงไม่ฉลาดที่จะเปิดเผยชั้นการเข้าถึงข้อมูลของคุณเช่นนี้ นักพัฒนาสามารถสร้างส่วนหน้าที่รวมศูนย์การสื่อสารระหว่างฟังก์ชัน JavaScript ทั้งหมดและส่วนประกอบทางธุรกิจที่สำคัญ ซึ่งจะช่วยจำกัดการเปิดเผยฟังก์ชันการทำงานที่มากเกินไป
<BR> บทความนี้เป็นเพียงจุดเริ่มต้นสำหรับคุณในการใช้ javascript ที่ขับเคลื่อนด้วย DWR :void(0);">AJAX ในโครงการของคุณ DWR ช่วยให้คุณมุ่งเน้นไปที่วิธีปรับปรุงรูปแบบการโต้ตอบของแอปพลิเคชันของคุณ โดยกำจัด ภาระในการเขียนและแก้ไขโค้ด JavaScript ความท้าทายที่น่าสนใจที่สุดเกี่ยวกับ javascript :void(0);">AJAX คือการกำหนดตำแหน่งและวิธีปรับปรุงการใช้งาน DWR มีหน้าที่รับผิดชอบในการดำเนินการสื่อสารระหว่างเว็บเพจและออบเจ็กต์ Java ของคุณ ซึ่งช่วยให้คุณมุ่งเน้นไปที่วิธีทำให้อินเทอร์เฟซผู้ใช้ของแอปพลิเคชันของคุณเป็นมิตรมากขึ้น
ฉันอยากจะขอบคุณ Mircea Oancea และ Marcos Pereira ที่อ่านบทความนี้และให้ข้อเสนอแนะอันมีค่ามาก
แหล่งข้อมูล ·javaworld.com:javaworld.com
·ชุมชนนักพัฒนา Matrix-Java: http://www.matrix.org.cn/
·onjava.com:onjava.com
·ดาวน์โหลดซอร์สโค้ดทั้งหมดของโปรแกรมตัวอย่าง: http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war
·DWR: http://www.getahead.ltd.uk/dwr/index.html
·HSQL: http://hsqldb.sourceforge.net/
·javascript :void(0);">คำจำกัดความของ AJAX: http://en.wikipedia.org/wiki/javascript :void(0);">AJAX
· "javascript :void(0);">AJAX: เส้นทางใหม่สู่เว็บแอปพลิเคชัน": Jesse James Garrett (Adaptive Path, 2005.2): http://www.adaptivepath.com/publications/essays/archives/000385.php
· “เว็บอินเตอร์เฟสแบบไดนามิกมาก” Drew McLellan (xml.com, 2005.2): http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
·XMLHttpRequest & javascript :void(0);">ตัวอย่างการทำงานของ AJAX: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples
· “แนวทางปฏิบัติ XMLHttpRequest ที่ใช้งานได้” โทมัส Baekdal (Baekdal.com, 2005.3): http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/
· "แนวทางการใช้งาน XMLHttpRequest" Thomas Baekdal (Baekdal.com, 2005.2): http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines/
