แลกเปลี่ยนข้อมูลในแอปพลิเคชัน Ajax

วัตถุประสงค์เพียงอย่างเดียวของ Ajax core API (ที่เรียกว่า XMLHttpRequest) คือการส่งคำขอ HTTP เพื่อแลกเปลี่ยนข้อมูลระหว่างเว็บเบราว์เซอร์และเซิร์ฟเวอร์ โค้ด JavaScript ที่ทำงานอยู่ในเว็บเพจสามารถใช้ XMLHttpRequest เพื่อส่งพารามิเตอร์คำขอไปยังสคริปต์ฝั่งเซิร์ฟเวอร์ เช่น เพจ Servlet หรือ JSP การเรียก Servlet/JSP จะส่งการตอบกลับที่มีข้อมูลที่โดยทั่วไปใช้ในการอัปเดตมุมมองของผู้ใช้โดยไม่ต้องรีเฟรชทั้งหน้า แนวทางนี้นำเสนอข้อได้เปรียบที่ไม่เหมือนใครในแง่ของประสิทธิภาพและการใช้งาน เนื่องจากการรับส่งข้อมูลเครือข่ายลดลง และ UI ของเว็บก็ใช้งานได้เกือบเท่ากับ GUI ของเดสก์ท็อป

อย่างไรก็ตาม การพัฒนาอินเทอร์เฟซผู้ใช้ดังกล่าวไม่ใช่เรื่องง่าย เนื่องจากคุณต้องใช้การแลกเปลี่ยนข้อมูล การตรวจสอบ และการประมวลผลโดยใช้ JavaScript บนฝั่งไคลเอ็นต์และ Java (หรือภาษาที่เทียบเท่า) บนฝั่งเซิร์ฟเวอร์ อย่างไรก็ตาม ในหลายกรณี ความพยายามเพิ่มเติมในการสร้างอินเทอร์เฟซแบบ Ajax นั้นคุ้มค่า เมื่อพิจารณาถึงประโยชน์ที่จะได้รับ

ในบทความนี้ ผมจะแนะนำหนึ่งในวิธีการหลักในการถ่ายโอนข้อมูลระหว่างไคลเอนต์ Ajax และเซิร์ฟเวอร์ และเปรียบเทียบความแตกต่างระหว่างโมเดลเว็บแอปพลิเคชันแบบดั้งเดิมและโมเดล Ajax นอกจากนี้ บทความนี้จะสำรวจเทคนิคในการประมวลผลข้อมูลทางฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ด้วย

ขั้นแรก คุณจะได้เรียนรู้วิธีใช้ JavaScript เพื่อเข้ารหัสพารามิเตอร์ของออบเจ็กต์คำขอบนฝั่งไคลเอ็นต์ คุณสามารถใช้สิ่งที่เรียกว่าการเข้ารหัส URL (การเข้ารหัสเริ่มต้นที่ใช้โดยเว็บเบราว์เซอร์) หรือคุณสามารถรวมพารามิเตอร์คำขอในเอกสาร XML ได้ เซิร์ฟเวอร์จะประมวลผลคำขอและส่งคืนการตอบกลับซึ่งข้อมูลจะต้องถูกเข้ารหัสด้วย บทความนี้จะสำรวจ JavaScript Object Notation (JSON) และ XML ซึ่งเป็นตัวเลือกรูปแบบข้อมูลตอบกลับหลัก

บทความนี้ส่วนใหญ่จะเน้นไปที่ API ที่เกี่ยวข้องกับ XML ที่ใช้กันทั่วไปในแอปพลิเคชัน Ajax ในฝั่งไคลเอ็นต์ XML API นั้นมีข้อจำกัดมากแต่ก็เพียงพอแล้ว ในกรณีส่วนใหญ่ การดำเนินการที่จำเป็นทั้งหมดสามารถทำได้สำเร็จโดยใช้ XMLHttpRequest นอกจากนี้ JavaScript ยังสามารถใช้เพื่อแยกวิเคราะห์เอกสาร XML และทำให้แผนผัง DOM เป็นอนุกรมในเว็บเบราว์เซอร์ ทางฝั่งเซิร์ฟเวอร์ มี API และเฟรมเวิร์กมากมายสำหรับการประมวลผลเอกสาร XML บทความนี้จะอธิบายวิธีดำเนินงานพื้นฐานโดยใช้ Java API มาตรฐานสำหรับ XML ซึ่งรองรับ XML Schema, XPath, DOM และมาตรฐานอื่นๆ อีกมากมาย

จากบทความนี้ คุณสามารถเรียนรู้เกี่ยวกับเทคนิคที่ดีที่สุดและ API ล่าสุดสำหรับการแลกเปลี่ยนข้อมูลในแอปพลิเคชัน Ajax โค้ดตัวอย่างที่เกี่ยวข้องอยู่ในสามแพ็คเกจ: util, model และ feed คลาสในแพ็คเกจ util จัดเตรียมวิธีการสำหรับการแยกวิเคราะห์ XML, การตรวจสอบความถูกต้องตามสคีมา, การสืบค้นตาม XPath, การทำให้เป็นอนุกรม DOM และการเข้ารหัส JSON แพ็คเกจโมเดลประกอบด้วยโมเดลข้อมูลตัวอย่างที่สามารถเตรียมใช้งานจากเอกสาร XML จากนั้นแปลงเป็นรูปแบบ JSON นอกจากนี้ยังมีตัวอย่าง Schema ในไดเร็กทอรีโมเดลที่สามารถใช้สำหรับการตรวจสอบความถูกต้องของ XML คลาสในแพ็คเกจฟีดสามารถใช้เพื่อจำลองฟีดข้อมูล ซึ่งจะดึงข้อมูลผ่าน Ajax ทุกๆ 5 วินาทีเพื่อรีเฟรชเว็บเพจ บทความนี้อธิบายวิธีการหลีกเลี่ยงการรั่วไหลของหน่วยความจำในเว็บเบราว์เซอร์ของคุณ โดยการยกเลิกคำขอ Ajax ที่ค้างอยู่ และการลบวัตถุ XMLHttpRequest เมื่อคุณใช้งานเสร็จแล้ว

ตัวอย่าง JSP และ JavaScript จะรวมอยู่ในไดเร็กทอรีเว็บ ajaxUtil.js มีฟังก์ชันยูทิลิตี้สำหรับการส่งคำขอ Ajax การยกเลิกคำขอ และการจัดการข้อผิดพลาด HTTP ไฟล์นี้ยังมียูทิลิตี้ JavaScript สำหรับการเข้ารหัส XML และ URL การแยกวิเคราะห์ XML และการทำให้เป็นอนุกรม DOM ไฟล์ ajaxCtrl.jsp ทำหน้าที่เป็นตัวควบคุม Ajax โดยรับคำขอ Ajax แต่ละรายการ ส่งต่อพารามิเตอร์ไปยังโมเดลข้อมูล หรือจัดเตรียมการประมวลผล จากนั้นส่งคืนการตอบกลับ Ajax ไฟล์เว็บที่เหลือเป็นตัวอย่างที่สาธิตวิธีการใช้วิธีการปฏิบัตินี้

ในการสร้างคำขอบนฝั่งไคลเอ็นต์

เพื่อส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์คือการเข้ารหัสคำขอเป็นสตริงการสืบค้น ซึ่งสามารถต่อท้าย URL หรือรวมไว้ในเนื้อหาคำขอได้ ขึ้นอยู่กับวิธี HTTP ที่ใช้ หากคุณต้องการส่งโครงสร้างข้อมูลที่ซับซ้อน วิธีแก้ไขที่ดีกว่าคือการเข้ารหัสข้อมูลในเอกสาร XML ฉันจะครอบคลุมทั้งสองวิธีในส่วนนี้

เข้ารหัสพารามิเตอร์คำขอ เมื่อพัฒนาแอปพลิเคชันเว็บแบบดั้งเดิม คุณไม่จำเป็นต้องกังวลเกี่ยวกับการเข้ารหัสข้อมูลฟอร์ม เนื่องจากเว็บเบราว์เซอร์จะดำเนินการนี้โดยอัตโนมัติเมื่อผู้ใช้ส่งข้อมูล อย่างไรก็ตาม ในแอปพลิเคชัน Ajax คุณต้องเข้ารหัสพารามิเตอร์คำขอด้วยตนเอง JavaScript มีฟังก์ชัน Escape() ที่มีประโยชน์มาก ซึ่งจะแทนที่อักขระใดๆ ที่ไม่สามารถเป็นส่วนหนึ่งของ URL ด้วย %HH (โดยที่ HH คือรหัสฐานสิบหก) ตัวอย่างเช่น อักขระช่องว่างจะถูกแทนที่ด้วย %20

การดาวน์โหลดโค้ดตัวอย่างมีฟังก์ชันยูทิลิตี้ buildQueryString() ซึ่งเชื่อมพารามิเตอร์ที่ดึงมาจากอาร์เรย์ โดยแยกชื่อและค่าของแต่ละพารามิเตอร์ด้วย = และวางอักขระ & ระหว่างคู่ชื่อ-ค่าแต่ละคู่ :

function buildQueryString(params) {
แบบสอบถาม var = "";
สำหรับ (var i = 0; i < params.length; i++) {
แบบสอบถาม += (i > 0 ? "&" : "")
+ หลบหนี (params [i].name) + "="
+ หลบหนี (พารามิเตอร์ [i].value);
-
ส่งคืนแบบสอบถาม;
-

สมมติว่าคุณต้องการเข้ารหัสพารามิเตอร์ต่อไปนี้:

var someParams = [
{ ชื่อ: "ชื่อ" ค่า: "จอห์น สมิธ" },
{ ชื่อ: "อีเมล" ค่า: " [email protected] " },
{ ชื่อ: "โทรศัพท์" ค่า: "(123) 456 7890" }
];

การเรียก buildQueryString(someParams) จะสร้างผลลัพธ์ที่มี:

name=John%[email protected]&phone=%28123%29%20456%207890

หากคุณต้องการใช้เมธอด GET คุณต้องเพิ่มคำค้นหาต่อท้าย URL หลังอักขระ ? เมื่อใช้ POST ส่วนหัว Content-Type ควรตั้งค่าเป็น application/x-www-form-urlencoded ผ่าน setRequestHeader() และสตริงการสืบค้นจะต้องส่งผ่านไปยังเมธอด send() ของ XMLHttpRequest ซึ่งจะส่งคำขอ HTTP ไปที่ เซิร์ฟเวอร์

สร้างเอกสาร XML การใช้สตริงเพื่อสร้างองค์ประกอบจากคุณลักษณะและข้อมูลเป็นวิธีที่ง่ายที่สุดในการสร้างเอกสาร XML ด้วย JavaScript หากคุณใช้โซลูชันนี้ คุณจะต้องใช้วิธีอรรถประโยชน์ในการยกเว้นอักขระ &, <, >, " และอักขระ:

function EscapeXML(content) {
ถ้า (เนื้อหา == ไม่ได้กำหนด)
กลับ "";
ถ้า (!content.length || !content.charAt)
เนื้อหา = สตริงใหม่ (เนื้อหา);
ผลลัพธ์ var = "";
ความยาว var = content.length;
สำหรับ (var i = 0; i < length; i++) {
var ch = content.charAt(i);
สวิตช์ (ch) {
กรณี &:
ผลลัพธ์ += "&";
หยุดพัก;
กรณี < :
ผลลัพธ์ += "< ";
หยุดพัก;
กรณี >:
ผลลัพธ์ += ">";
หยุดพัก;
กรณี ":
ผลลัพธ์ += """;
หยุดพัก;
กรณี \:
ผลลัพธ์ += "'";
หยุดพัก;
ค่าเริ่มต้น:
ผลลัพธ์ += ch;
-
-
ส่งคืนผลลัพธ์;
-

เพื่อให้งานง่ายขึ้น จำเป็นต้องมีวิธีอรรถประโยชน์เพิ่มเติมบางอย่าง เช่น:

function แอททริบิวต์(ชื่อ, ค่า) {
กลับ " " + ชื่อ + "="" + EscapeXML(ค่า) + """;
-

ตัวอย่างต่อไปนี้สร้างเอกสาร XML จากอาร์เรย์ของอ็อบเจ็กต์ที่มีคุณสมบัติสามประการ: สัญลักษณ์ การแชร์ และ PaidPrice:

function buildPortfolioDoc(stocks) {
var xml = "<พอร์ตโฟลิโอ>";
สำหรับ (var i = 0; i < stocks.length; i++) {
หุ้น var = หุ้น [i];
xml += "< หุ้น ";
xml += คุณลักษณะ ("สัญลักษณ์", stock.สัญลักษณ์);
xml += คุณลักษณะ ("หุ้น", stock.shares);
xml += คุณลักษณะ ("ราคาจ่าย", stock.paidPrice);
xml += "";
-
xml += "< /ผลงาน>";
กลับ xml;
-

หากคุณต้องการทำงานกับ DOM คุณสามารถใช้ API ของเว็บเบราว์เซอร์เพื่อแยกวิเคราะห์ XML และทำให้แผนผัง DOM เป็นอนุกรมได้ ด้วย IE คุณสามารถสร้างเอกสารเปล่าด้วย ActiveXObject("Microsoft.XMLDOM") ใหม่ จากนั้นสามารถแยกวิเคราะห์ XML จากสตริงหรือ URL โดยใช้วิธี loadXML() หรือ load() ตามลำดับ ในกรณีของ IE แต่ละโหนดมีแอตทริบิวต์ที่เรียกว่า xml ซึ่งช่วยให้คุณได้รับการแสดง XML ของโหนดและโหนดย่อยทั้งหมด ดังนั้น คุณสามารถแยกวิเคราะห์สตริง XML ปรับเปลี่ยนแผนผัง DOM และจากนั้นทำให้เป็นอันดับ DOM กลับไปเป็น XML

เบราว์เซอร์ Firefox และ Netscape อนุญาตให้คุณสร้างเอกสารเปล่าโดยใช้ document.implementation.createDocument(...) โหนด DOM นั้นสามารถสร้างขึ้นได้โดยใช้ createElement(), createTextNode(), createCDATASection() ฯลฯ เบราว์เซอร์ Mozilla ยังมี API สองตัวชื่อ DOMParser และ XMLSerializer DOMParser API มีเมธอด parseFromStream() และ parseFromString() คลาส XMLSerializer มีวิธีการที่สอดคล้องกันสำหรับซีเรียลไลซ์ต้นไม้ DOM: serializeToStream() และ serializeToString()

ฟังก์ชั่นต่อไปนี้แยกวิเคราะห์สตริง XML และส่งกลับเอกสาร DOM:

function parse(xml) {
วาร์ดอม;
พยายาม{
dom = ใหม่ ActiveXObject("Microsoft.XMLDOM");
dom.async = เท็จ;
dom.loadXML(xml);
} จับ (ข้อผิดพลาด) {
พยายาม{
var parser = DOMParser ใหม่ ();
dom = parser.parseFromString(xml, "ข้อความ/xml");
ลบพาร์เซอร์;
} จับ (ข้อผิดพลาด 2) {
ถ้า (แก้ไขข้อบกพร่อง)
alert("ไม่รองรับการแยกวิเคราะห์ XML");
-
-
กลับโดม;
-

ฟังก์ชันที่สองทำให้โหนด DOM เป็นอนุกรมและโหนดลูกทั้งหมด โดยส่งคืน XML เป็นสตริง:

function serialize(dom) {
var xml = dom.xml;
ถ้า (xml == ไม่ได้กำหนด) {
พยายาม{
var serializer = XMLSerializer ใหม่ ();
xml = serializer.serializeToString (dom);
ลบซีเรียลไลเซอร์;
} จับ (ข้อผิดพลาด) {
ถ้า (แก้ไขข้อบกพร่อง)
alert("ไม่รองรับ DOM serialization");
-
-
กลับ xml;
-

คุณยังสามารถใช้ XMLHttpRequest เป็นตัวแยกวิเคราะห์หรือซีเรียลไลเซอร์ได้ หลังจากได้รับการตอบกลับคำขอ Ajax จากเซิร์ฟเวอร์ การตอบสนองจะถูกแยกวิเคราะห์โดยอัตโนมัติ เวอร์ชันข้อความและแผนผัง DOM สามารถเข้าถึงได้ผ่านคุณสมบัติ responseText และ responseXML ของ XMLHttpRequest ตามลำดับ นอกจากนี้ ทรี DOM จะถูกทำให้เป็นอนุกรมโดยอัตโนมัติเมื่อส่งผ่านไปยังเมธอด send()

ส่งคำขอ ในบทความก่อนหน้านี้ ฉันได้แนะนำ XMLHttpRequest API และฟังก์ชันอรรถประโยชน์ sendHttpRequest() ซึ่งคุณสามารถพบได้ในไฟล์ ajaxUtil.js ในตัวอย่างที่ให้ไว้สำหรับการดาวน์โหลด ฟังก์ชันนี้รับพารามิเตอร์สี่ตัว (วิธี HTTP, URL, อาร์เรย์พารามิเตอร์ และการโทรกลับ) สร้างออบเจ็กต์ XMLHttpRequest ตั้งค่าคุณสมบัติ และเรียกเมธอด send() หากมีการระบุพารามิเตอร์การเรียกกลับ การร้องขอจะถูกส่งแบบอะซิงโครนัส และฟังก์ชันการเรียกกลับจะถูกเรียกหลังจากได้รับการตอบสนอง มิฉะนั้น คำขอจะถูกส่งพร้อมกัน และคุณสามารถจัดการการตอบสนองได้ทันทีที่ sendHttpRequest() ส่งคืน

อย่างที่คุณเห็น คุณต้องตัดสินใจเลือกที่สำคัญเมื่อใช้ XMLHttpRequest

วิธี HTTP ใดที่จะใช้ (GET หรือ POST)
รูปแบบที่ใช้ในการเข้ารหัสพารามิเตอร์คำขอ (การเข้ารหัส XML และ URL ถูกกล่าวถึงก่อนหน้าในบทความนี้)
ไม่ว่าจะทำการโทรแบบซิงโครนัส (รอการตอบกลับ) หรือแบบอะซิงโครนัส (โดยใช้การโทรกลับ) รูปแบบของการตอบสนอง เช่น XML, XHTML, HTML หรือ JavaScript Object Notation (JSON) (จะกล่าวถึงในบทความนี้ต่อไป) สมมติว่าคุณต้องการรับข้อมูลราคาหุ้นจากฟีดข้อมูลและรีเฟรชข้อมูลเป็นระยะๆ โดยที่ผู้ใช้ไม่ต้องดำเนินการใดๆ ในกรณีนี้ ควรส่งคำขอ HTTP แบบอะซิงโครนัสเพื่อไม่ให้อินเทอร์เฟซผู้ใช้ถูกบล็อกในขณะที่ดึงข้อมูล พารามิเตอร์คำขอคืออาร์เรย์ของสัญลักษณ์ที่สามารถเข้ารหัสใน URL ได้ เนื่องจากเซิร์ฟเวอร์อาจมีการโอเวอร์โหลด คุณจึงไม่ต้องการส่งเอกสาร XML เมื่อมีการร้องขอบ่อยครั้ง เนื่องจากคุณสนใจเฉพาะราคาหุ้นล่าสุด คำขอใดๆ ก่อนหน้านี้ที่ค้างอยู่จึงควรถูกยกเลิก:

var ctrlURL = "ajaxCtrl.jsp";
var feedRequest = null;

ฟังก์ชั่น sendInfoRequest (สัญลักษณ์, โทรกลับ) {
ถ้า (ฟีดคำขอ)
ยกเลิกคำขอ (ฟีดคำขอ);
var params = อาร์เรย์ใหม่ ();
สำหรับ (var i = 0; i < symbols.length; i++)
พารามิเตอร์[i] = {
ชื่อ："สัญลักษณ์",
ค่า:สัญลักษณ์[i]
-
feedRequest = sendHttpRequest(
"GET", ctrlURL, พารามิเตอร์, โทรกลับ);
-

ก่อนที่จะเรียกใช้เมธอด abort() ของออบเจ็กต์คำขอ ฟังก์ชัน abortRequest() (พบในไฟล์ ajaxUtil.js) จะตั้งค่าคุณสมบัติ onreadystatechange ให้เป็นการโทรกลับที่ไม่ทำอะไรเลย นอกจากนี้ สิ่งสำคัญคือต้องลบออบเจ็กต์คำขอเพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำ:

function abortRequest(request) {
ฟังก์ชัน doNothing() {
-
request.onreadystatechange = ไม่ต้องทำอะไร;
คำขอ.ยกเลิก();
ลบฟีดคำขอ;
-

ลองพิจารณาอีกกรณีหนึ่ง: เมื่อถ่ายโอนข้อมูลผู้ใช้ทั้งหมดที่จะบันทึกในฐานข้อมูล ควรส่งคำขอพร้อมกันเนื่องจากคุณอาจไม่ต้องการให้ผู้ใช้แก้ไขในขณะที่บันทึกข้อมูลนี้อยู่ระหว่างดำเนินการ ในกรณีนี้ แนะนำให้ใช้รูปแบบ XML เนื่องจากการเข้ารหัสโมเดลออบเจ็กต์ในเอกสารมักจะง่ายกว่าการใช้พารามิเตอร์สตริงจำนวนมาก นอกจากนี้ คำขอบันทึกข้อมูลมีไม่บ่อยนัก และเซิร์ฟเวอร์ก็จัดการโหลดได้โดยไม่มีปัญหาใดๆ เอกสาร XML สามารถเข้ารหัสเป็นพารามิเตอร์เพื่อให้คุณสามารถเข้าถึงได้ในหน้า JSP โดยใช้ไวยากรณ์ EL (${param.xml}) นี่คือฟังก์ชันที่ส่งข้อมูลโมเดลที่เข้ารหัสในเอกสาร XML:

function sendSaveRequest(xml) {
พารามิเตอร์ var = [ { ชื่อ:"xml", ค่า:xml } ];
var saveRequest = sendHttpRequest("POST", ctrlURL, params);
ถ้า (saveRequest)
ลบบันทึกคำขอ;
-

หากคุณต้องการกู้คืนโมเดลออบเจ็กต์ คุณยังสามารถส่งคำขอพร้อมกันเพื่อดึงข้อมูลจากเซิร์ฟเวอร์ได้ ในกรณีนี้ เซิร์ฟเวอร์ควรส่งคืนการตอบสนอง JSON เพื่อให้คุณสามารถแปลงเป็นแผนผังอ็อบเจ็กต์ JavaScript ได้อย่างง่ายดายโดยใช้ eval(loadRequest.responseText):

function sendLoadRequest() {
รุ่น var = null;
var loadRequest = sendHttpRequest("GET", ctrlURL);
ถ้า (โหลดคำขอ) {
model = eval (loadRequest.responseText);
ลบคำขอโหลด;
-
แบบจำลองการคืน;
-

สองส่วนต่อไปนี้จะอธิบายการดำเนินการที่โดยทั่วไปดำเนินการกับเอกสาร XML บนเซิร์ฟเวอร์ และวิธีการตอบสนองต่อคำขอ Ajax

การจัดการคำขอบนฝั่งเซิร์ฟเวอร์

คอนเทนเนอร์ Servlet/JSP วิเคราะห์คำขอ HTTP แต่ละรายการและสร้างอินสแตนซ์ ServletRequest ซึ่งช่วยให้คุณรับพารามิเตอร์คำขอผ่าน getParameter() / getParameterValues() หรือเนื้อหาคำขอผ่าน getInputStream() ในเพจ JSP สามารถรับพารามิเตอร์เหล่านี้ได้โดยใช้ไวยากรณ์ EL (${param...} และ ${paramValues...}) โปรดทราบว่าการส่ง getParameter จะเป็นไปได้ก็ต่อเมื่อไคลเอนต์ Ajax ใช้ฟังก์ชันยูทิลิตี้เช่น buildQueryString() เพื่อเข้ารหัสข้อมูลในรูปแบบ application/x-www-form-urlencoded (อธิบายไว้ในส่วนก่อนหน้าของบทความนี้) {param...} เพื่อรับพารามิเตอร์คำขอ หากคุณส่งเอกสาร XML หรือแผนผัง DOM ไปยังเมธอด send() ของ XMLHttpRequest บนฝั่งไคลเอ็นต์ คุณต้องใช้เมธอด getInputStream() ของ ServletRequest บนฝั่งเซิร์ฟเวอร์

การตรวจสอบข้อมูล เว็บแอปพลิเคชันทั่วไปดำเนินการตรวจสอบข้อมูลหลายอย่าง ข้อผิดพลาดที่เป็นไปได้ส่วนใหญ่นั้นค่อนข้างง่าย เช่น ไม่มีพารามิเตอร์คำขอ รูปแบบตัวเลขไม่ถูกต้อง และอื่นๆ ข้อผิดพลาดเหล่านี้มักเกิดจากการที่ผู้ใช้ลืมป้อนค่าสำหรับองค์ประกอบของฟอร์มหรือระบุค่าที่ไม่ถูกต้อง เว็บเฟรมเวิร์ก เช่น JSF และ Oracle ADF Faces สามารถจัดการข้อผิดพลาดของผู้ใช้เหล่านี้ได้ดีมาก ในแอปพลิเคชัน Ajax ข้อผิดพลาดเหล่านี้สามารถตรวจพบและจัดการในฝั่งไคลเอ็นต์โดยใช้ JavaScript ตัวอย่างเช่น คุณสามารถใช้ isNaN(new Number(value)) เพื่อตรวจสอบว่าค่าตัวเลขไม่ถูกต้อง

เพื่อเหตุผลด้านความปลอดภัยและความน่าเชื่อถือ ข้อมูลควรได้รับการตรวจสอบความถูกต้องอีกครั้งบนฝั่งเซิร์ฟเวอร์ และคำขอ XML ไม่ควรถือว่ามีรูปแบบที่ดี XML Schema เป็นเครื่องมือที่มีประโยชน์สำหรับการตรวจสอบคำขอที่ซับซ้อนบนฝั่งเซิร์ฟเวอร์ การดาวน์โหลดโค้ดตัวอย่างประกอบด้วยคลาสที่เรียกว่า XMLUtil ซึ่งมีวิธีการในการโหลดและใช้งานเอกสารสคีมา ข้อมูลโค้ดต่อไปนี้แสดงวิธีการเตรียมใช้งาน SchemaFactory:

import javax.xml.*;
นำเข้า javax.xml.validation.*;
-
ป้องกัน SchemaFactory schemaFactory แบบคงที่
คงที่ {
schemaFactory = SchemaFactory.newInstance(
XMLConstants.W3C_XML_SCHEMA_NS_URI);
schemaFactory.setErrorHandler(ใหม่ErrorHandler());
}

วิธีการ newErrorHandler() ส่งคืนตัวจัดการข้อผิดพลาด SAX:

import org.xml.sax.*;
-
ErrorHandler แบบคงที่สาธารณะ newErrorHandler () {
ส่งคืน ErrorHandler ใหม่ () {
คำเตือนโมฆะสาธารณะ (SAXParseException e)
พ่น SAXException {
Logger.global.warning(e.getMessage());
}

ข้อผิดพลาดโมฆะสาธารณะ (SAXParseException e)
พ่น SAXException {
โยนอี;
}

โมฆะสาธารณะ fatalError (SAXParseException e)
พ่น SAXException {
โยนอี;
-
-
-

คุณสามารถใช้ getResourceAsStream() เพื่อค้นหาและโหลดไฟล์ XSD ในไดเร็กทอรีหรือ JAR ที่ระบุใน CLASSPATH:

public static InputStream getResourceAsStream(String name)
พ่น IOException {
InputStream ใน = XMLUtil.class.getResourceAsStream (ชื่อ);
ถ้า (ใน == null)
โยน FileNotFoundException ใหม่ (ชื่อ);
กลับเข้ามา;
-

จากนั้น ใช้อินสแตนซ์ SchemaFactory เพื่อรับอ็อบเจ็กต์ Schema ผ่านเมธอด newSchema():

import javax.xml.validation.*;
-
Schema สาธารณะ newSchema คงที่ (ชื่อสตริง)
พ่น IOException, SAXException {
สคีมาสคีมา;
InputStream ใน = getResourceAsStream (ชื่อ);
พยายาม{
schema = schemaFactory.newSchema (StreamSource ใหม่ (ใน));
}ในที่สุด{
ใน.ปิด();
-
สคีมาส่งคืน;
}

คุณยังสามารถสร้างออบเจ็กต์ Oracle XMLSchema โดยใช้:

import oracle.xml.parser.schema.XMLSchema;
นำเข้า oracle.xml.parser.schema.XSDBuilder;
-
XMLSchema แบบคงที่สาธารณะ newOracleSchema (ชื่อสตริง)
พ่น IOException, SAXException {
สคีมา XMLSchema;
InputStream ใน = getResourceAsStream (ชื่อ);
พยายาม{
ตัวสร้าง XSDBuilder = XSDBuilder ใหม่ ();
schema = builder.build (แหล่งอินพุตใหม่ (ใน));
} catch (ข้อยกเว้น e){
โยน SAXException ใหม่ (e);
}ในที่สุด{
ใน.ปิด();
-
สคีมาส่งคืน;
-

ถัดไป คุณต้องสร้าง DocumentBuilderFactory หากพบการใช้งาน JAXP 1.1 ใน CLASSPATH เมธอด setSchema() ที่กำหนดโดย JAXP 1.2 อาจทำให้เกิด UnsupportedOperationException ซึ่งในกรณีนี้ การใช้งาน JAXP 1.1 จำเป็นต้องถูกแทนที่ด้วยการใช้งาน JAXP 1.2 ของ Java SE 5.0 ในกรณีนี้ คุณยังคงสามารถสร้างออบเจ็กต์สคีมาได้โดยใช้ newOracleSchema() และตั้งค่าผ่านเมธอด setAttribute():

import javax.xml.parsers.*;
นำเข้า oracle.xml.jaxp.JXDocumentBuilderFactory;
-
DocumentBuilderFactory สาธารณะคงที่ newParserFactory (
สตริง schemaName) พ่น IOException, SAXException {
DocumentBuilderFactory parserFactory
= DocumentBuilderFactory.newInstance();
พยายาม{
parserFactory.setSchema(สคีมาใหม่(สคีมาชื่อ));
} จับ (UnsupportedOperationException e) {
ถ้า (อินสแตนซ์ parserFactory ของ JXDocumentBuilderFactory) {
parserFactory.setAttribute(
JXDocumentBuilderFactory.SCHEMA_OBJECT,
ใหม่OracleSchema(ชื่อสคีมา));
-
-
กลับ parserFactory;
-

จากนั้น สร้างอ็อบเจ็กต์ DocumentBuilder และใช้มันเพื่อตรวจสอบและแยกวิเคราะห์เอกสาร XML:

import javax.xml.parsers.*;
-
DocumentBuilder สาธารณะคงที่ newParser (
DocumentBuilderFactory parserFactory)
พ่น ParserConfigurationException {
ตัวแยกวิเคราะห์ DocumentBuilder = parserFactory.newDocumentBuilder();
parser.setErrorHandler(ใหม่ErrorHandler());
ตัวแยกวิเคราะห์ส่งคืน;
-

สมมติว่าคุณต้องการตรวจสอบความถูกต้องของเอกสาร XML กับตัวอย่างสคีมาของportfolio.xsd:

< xsd:schema xmlns:xsd=" http://www.w3.org/2001/XMLSchema ">

< xsd:element name="portfolio" type ="portfolioType "

< xsd:complexType name="portfolioType">

< xsd: ชื่อองค์ประกอบ = "หุ้น"
minOccurs="0" maxOccurs="ไม่จำกัด">

< xsd: ชื่อแอตทริบิวต์ = "สัญลักษณ์"
type="xsd:string" use="required"/>
< xsd: ชื่อแอตทริบิวต์ = "หุ้น"
type="xsd:positiveInteger" use="required"/>
< xsd: ชื่อแอตทริบิวต์ = "ราคาที่จ่าย"
type="xsd:decimal" use="required"/>
< /xsd:complexType>


< /xsd:complexType>

< /xsd:schema>

เมธอด parsePortfolioDoc() ของคลาส DataModel ใช้ XMLUtil เพื่อตรวจสอบและแยกวิเคราะห์พารามิเตอร์ xml และส่งคืนเอกสาร DOM:

สตริงสุดท้ายแบบคงที่ส่วนตัว SCHEMA_NAME
= "/ajaxapp/model/portfolio.xsd";
DocumentBuilderFactory แบบคงที่ส่วนตัว parserFactory;

แยกเอกสารส่วนตัวคงที่ parsePortfolioDoc (String xml)
พ่น IOException, SAXException,
ParserConfigurationException {
ซิงโครไนซ์ (DataModel.class) {
ถ้า (parserFactory == null)
parserFactory = XMLUtil.newParserFactory(SCHEMA_NAME);
-
ตัวแยกวิเคราะห์ DocumentBuilder = XMLUtil.newParser(parserFactory);
InputSource ใน = InputSource ใหม่ (StringReader ใหม่ (xml));
กลับ parser.parse (ใน);
-

ตอนนี้คุณมีแผนผัง DOM แล้ว คุณต้องได้รับข้อมูลที่จำเป็นในการสร้างโหนด DOM

ดึงข้อมูลที่จำเป็น คุณสามารถใช้ DOM API หรือภาษาคิวรี (เช่น XQuery หรือ XPath) เพื่อเรียกดูแผนผัง DOM Java จัดเตรียม API มาตรฐานสำหรับ XPath ซึ่งจะถูกนำมาใช้ในภายหลัง คลาส XMLUtil สร้าง XPathFactory ด้วย newXPath() วิธีการ:

import javax.xml.xpath.*;
-
ป้องกัน XPathFactory แบบคงที่ xpathFactory;
คงที่ {
xpathFactory = XPathFactory.newInstance();
-

XPath สาธารณะคงที่ newXPath () {
กลับ xpathFactory.newXPath();
-

วิธีการต่อไปนี้จะประเมินนิพจน์ XPath ในบริบทที่กำหนดและส่งกลับค่าผลลัพธ์:

import javax.xml.xpath.*;
นำเข้า org.w3c.dom.*;
-
สตริงคงที่สาธารณะ evalToString (นิพจน์สตริง
บริบทของวัตถุ) พ่น XPathExpressionException {
กลับ (สตริง) newXPath().ประเมิน(การแสดงออก, บริบท,
XPathConstants.STRING);
-

บูลีนคงที่สาธารณะ evalToBoolean (นิพจน์สตริง
บริบทของวัตถุ) พ่น XPathExpressionException {
กลับ ((บูลีน) newXPath().ประเมิน (การแสดงออก, บริบท,
XPathConstants.BOOLEAN)).booleanValue();
-

evalToNumber คู่แบบคงที่สาธารณะ (นิพจน์สตริง,
บริบทของวัตถุ) พ่น XPathExpressionException {
return ((Double) newXPath().evaluate(นิพจน์, บริบท,
XPathConstants.NUMBER)).doubleValue();
-

โหนดคงที่สาธารณะ evalToNode (นิพจน์สตริง
บริบทของวัตถุ) พ่น XPathExpressionException {
กลับ (โหนด) newXPath().ประเมิน(การแสดงออก, บริบท,
XPathConstants.NODE);
-

NodeList สาธารณะคงที่ evalToNodeList (นิพจน์สตริง
บริบทของวัตถุ) พ่น XPathExpressionException {
กลับ (NodeList) newXPath().ประเมิน(การแสดงออก, บริบท,
XPathConstants.NODESET);
}

เมธอด setData() ของ DataModel ใช้วิธีการแก้ปัญหา XPath เพื่อดึงข้อมูลจากเอกสาร XML ที่รวม:

public synchronized void setData(String xml)
พ่น IOException, SAXException,
ParserConfigurationException,
XPathExpressionException {
พยายาม{
ArrayList รายการหุ้น
= ใหม่ ArrayList();
เอกสาร doc = parsePortfolioDoc(xml);
NodeList nodeList = XMLUtil.evalToNodeList(
"/ผลงาน/หุ้น", doc);
สำหรับ (int i = 0; i < nodeList.getLength(); i++) {
โหนดโหนด = nodeList.item(i);
หุ้น StockBean = StockBean ใหม่ ();
stock.setSymbol(
XMLUtil.evalToString("@สัญลักษณ์", โหนด));
stock.setShares(
(int) XMLUtil.evalToNumber("@shares", โหนด));
stock.setPaidPrice(
XMLUtil.evalToNumber("@paidPrice", โหนด));
stockList.add(หุ้น);
-
this.stockList = รายการหุ้น;
} catch (ข้อยกเว้น e){
Logger.global.logp (ระดับ SEVERE, "DataModel", "setData",
e.getMessage(), อี);
-
-

เมื่อข้อมูลพร้อมใช้งานในโมเดลข้อมูลฝั่งเซิร์ฟเวอร์แล้ว ก็สามารถประมวลผลได้ตามความต้องการของแอปพลิเคชัน จากนั้นคุณจะต้องตอบกลับคำขอ Ajax

การสร้างการตอบสนองบนฝั่งเซิร์ฟเวอร์

การส่งคืน HTML เป็นการตอบสนองต่อคำขอ Ajax เป็นวิธีแก้ปัญหาที่ง่ายที่สุด เนื่องจากคุณสามารถสร้างมาร์กอัปโดยใช้ไวยากรณ์ JSP และไคลเอนต์ Ajax เพียงใช้องค์ประกอบ