อัปเดตเนื้อหาเพจแบบไดนามิกโดยใช้เทคโนโลยีพุช

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

ใช้ฟังก์ชัน setTimeOut ของออบเจ็กต์หน้าต่างเบราว์เซอร์เพื่อรีเฟรชเพจเป็นประจำ อย่างไรก็ตาม เมื่อรีเฟรชโฆษณาในลักษณะนี้ ผู้ใช้จะรู้สึกถึงกระบวนการรีเฟรชหน้าเว็บได้อย่างชัดเจน ขณะเดียวกันก็เป็นเรื่องยากที่จะระบุความถี่ในการรีเฟรชที่เหมาะสม
ตั้งเวลาหมดอายุของเพจเป็นไม่กี่วินาที เพื่อให้เบราว์เซอร์ดาวน์โหลดเพจอีกครั้งทุกครั้งที่โฟกัสอินพุตไปที่เพจ (เช่น เปิดใช้งานเบราว์เซอร์)
เว็บไซต์ขนาดใหญ่บางแห่ง เช่น yahoo.com และ msn.com ได้นำเทคโนโลยีเหล่านี้ไปใช้แล้ว ทั้งสองวิธีมีข้อดีและข้อเสียในตัวเอง เมื่อใช้ Java เพียงอย่างเดียว เราสามารถใช้ระบบรีเฟรชโฆษณาแบนเนอร์ได้อย่างสมบูรณ์ผ่านการเขียนโปรแกรมเครือข่ายและงานเขียนโปรแกรมอินเทอร์เฟซบางอย่าง แต่ปัญหาเรื่องเวลาในการดาวน์โหลดที่ยาวนานและความล่าช้าในการรีเฟรชจะต้องได้รับการแก้ไข

2. ใช้ Java เพื่อใช้งานการพุชเนื้อหา
เมื่อรวมการสื่อสารอินเตอร์เฟรม JavaScript เข้ากับ Java Applet ที่จัดการการสื่อสารเครือข่าย เราสามารถแก้ไขปัญหานี้ได้โดยใช้เทคโนโลยีพุช ในระบบดังกล่าว หน้าที่ของ Java Applet คือเชื่อมต่อกับเซิร์ฟเวอร์และฟังการอัปเดตเนื้อหา เมื่อได้รับเนื้อหาใหม่ แอปเพล็ตจะสร้างโค้ด HTML ที่แสดงเนื้อหาใหม่ เรียกใช้ฟังก์ชัน JavaScript และส่ง HTML ที่มีเนื้อหาใหม่ไปยังฟังก์ชัน JavaScript ฟังก์ชัน JavaScript ใช้เทคโนโลยี DHTML และ DOM เพื่อแทนที่เนื้อหาของแท็ก <div> ในหน้าเว็บด้วยเนื้อหาใหม่ที่ส่งผ่านในพารามิเตอร์ เนื่องจากข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์ พอร์ต Socket ที่เปิดโดย Applet จึงสามารถเชื่อมต่อกับเซิร์ฟเวอร์ที่ดาวน์โหลด Applet เท่านั้น

เว็บเซิร์ฟเวอร์จะรับฟังคำขอการเชื่อมต่อบนพอร์ต 80 เท่านั้น ดังนั้นนอกเหนือจากเว็บเซิร์ฟเวอร์แล้ว เรายังต้องการบริการแอปพลิเคชันเครือข่ายที่ยอมรับคำขอเชื่อมต่อซ็อกเก็ตของ Applet บริการแอปพลิเคชันเครือข่ายนี้จะสอบถามฐานข้อมูลเป็นระยะและเผยแพร่ (พุช) ข้อมูลที่เปลี่ยนแปลงไปยัง Applets ที่เชื่อมต่อทั้งหมด ขอบคุณการใช้เฟรมที่ซ่อนอยู่และความสามารถในการสื่อสารระหว่างเฟรมของ JavaScript เราจึงสามารถซ่อนตรรกะ JavaScript ส่วนใหญ่จากผู้ใช้ได้

งานที่ยากที่สุดในกระบวนการทั้งหมดนี้คือการสื่อสารระหว่าง Java Applet และโค้ด JavaScript Netscape จัดให้มีคลาสที่เรียกว่า netscape.javascript.JSObject หากต้องการใช้วัตถุนี้ ให้เพิ่มแท็ก Applet ที่มีแอตทริบิวต์พิเศษ "MAYSCRIPT":

<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>

วิธีการของ JSObject อนุญาตให้ Applets โต้ตอบกับวัตถุเอกสารและเรียกใช้คำสั่ง JavaScript ตัวอย่างเช่น โดยการใส่โค้ดต่อไปนี้ลงใน Applet เราสามารถเข้าถึงออบเจ็กต์หน้าต่างได้:

import netscape.javascript.*; public class MyApplet extension java.applet.Applet{ private JSObject mainwin; ( นี้); } }

หลังจากได้รับการอ้างอิง JSObject เราสามารถเข้าถึงออบเจ็กต์หน้าต่างเอกสารและเรียกใช้ฟังก์ชัน JavaScript ผ่านเมธอด eval() ของ JSObject

3. อัปเดตหน้าโดยใช้ DHTML
เมื่อเขียนเนื้อหาใหม่จาก Applet ลงในเอกสาร เพื่อไม่ให้กระทบต่อเนื้อหาที่มีอยู่ เราสามารถใช้แท็ก HTML <div></div> แท็กนี้แตกต่างใน IE และ Netscape

สำหรับ IE และ Netscape 6 แท็ก HTML นี้คือ:

// เนื้อหาทั้งหมดที่จะอัปเดตจะต้องระบุด้วย id <div id="iexplorer" width=700px ></div>

สำหรับเวอร์ชัน Netscape 4.x แท็ก HTML นี้คือ:

<DATA><layer id="netscapev" ></layer></DATA>

แม้ว่าเราจะสามารถอัปเดตเนื้อหา HTML ได้โดยตรงจาก Applet โดยอ้างอิง ID ที่เหมาะสม เพื่อความชัดเจน เพื่อความเรียบง่าย เราจะใส่ตรรกะของโปรแกรมในการอัปเดตโค้ด HTML ลงในฟังก์ชัน JavaScript โค้ด JavaScript ต่อไปนี้จะบันทึกประเภทเบราว์เซอร์เป็นตัวแปร ie:

applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; } else { ie=false; }

แอปเพล็ตสร้าง HTML จากเวอร์ชันใหม่ รหัสข้อมูล บันทึกลงในเนื้อหาตัวแปร JavaScript จากนั้นเรียกใช้เมธอด assignData() ข้อมูลเนื้อหาอาจเป็นอะไรก็ได้ตั้งแต่ HTML ธรรมดาไปจนถึง XML ไปจนถึงข้อมูลไบนารี

// เรียกใช้ฟังก์ชันเมธอดที่เหมาะสม assignData() { if(ie) {explore();} else {navig(); } } ตามประเภทของเบราว์เซอร์

หากเบราว์เซอร์เป็น IE หรือ Netscape 6 แอปเพล็ตจะเรียกใช้เมธอด explore():

//content เป็นตัวแปรจาวาสคริปต์ที่อธิบายข้อมูลใหม่ที่ต้อง //แสดงในรูปแบบ HTML ฟังก์ชัน explore() { iexplorer.innerHTML=content ; }

หากเบราว์เซอร์เป็น Netscape 4.0 หรือสูงกว่า และ Applet เรียกใช้เมธอด navig():

function navig() { document.netscapev.document.write(“<DATA>“ + content + “</DATA>“); document.netscapev. document.close(); }

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

ในฝั่งไคลเอ็นต์ เฟรมที่ซ่อนอยู่จะมี Applet ImageApplet.java ดังนั้นจึงไม่สามารถเห็นแท็ก Applet ได้โดยใช้ฟังก์ชันการดูซอร์สโค้ด HTML ของเบราว์เซอร์ Applet ใช้ฟังก์ชันการเชื่อมต่อกับเซิร์ฟเวอร์ (เซิร์ฟเวอร์ต้นทางสำหรับการดาวน์โหลด Applet) และใช้โปรโตคอลการสื่อสารแบบง่าย หลังจากสร้างการเชื่อมต่อกับเซิร์ฟเวอร์แล้ว แอปเพล็ตจะได้รับข้อมูลจากเซิร์ฟเวอร์ สร้างโค้ด HTML และเรียกใช้ฟังก์ชัน JavaScript เพื่อส่งข้อมูลไปยังเอกสาร:

public void upDateHTML(String str){ //data คือชื่อของ แบบฟอร์ม //quote เป็นตัวแปร JavaScript //str เป็นโค้ด HTML ที่สร้างขึ้นใหม่ mainwin.eval("document.data.quote.value="" + str + """); mainwin.eval("javascript:assignData ()"); return; }

netscape.javascript.JSObject เสร็จสิ้นการสื่อสารจาก Applet ถึง JavaScript เบราว์เซอร์ไคลเอ็นต์เวอร์ชันที่ต่างกันต้องใช้เวอร์ชันที่แตกต่างกัน คุณสามารถดาวน์โหลดไฟล์คลาสบีบอัด java40.jar ที่จัดเตรียมไว้สำหรับ Netscape IE มาพร้อมกับคลาส JSObject อยู่แล้ว แต่ก็หายากสักหน่อย คุณสามารถค้นหาไดเร็กทอรี $windows$JavaPackages เพื่อค้นหาไฟล์ ZIP ที่มีคลาส JSObject

เซิร์ฟเวอร์จะทำให้อินสแตนซ์ของคลาส ImageArrayElement.java เป็นอนุกรมเป็นสตริงผ่านเมธอด toString() และส่งไปยัง Applet เซิร์ฟเวอร์สร้างแต่ละออบเจ็กต์จากไฟล์ข้อมูล เรียกใช้เมธอด toString() เชื่อมต่อสตริงที่แสดงถึงออบเจ็กต์ทั้งหมด และสุดท้ายก็ส่งสตริงผลลัพธ์ ที่อีกด้านหนึ่ง แอปเพล็ตจะรับและแยกวิเคราะห์สตริงนี้ และสร้างออบเจ็กต์ ImageArrayElement ขึ้นมาใหม่ สาเหตุที่ส่งข้อมูลมาที่นี่ในรูปแบบสตริงยาวก็เพราะว่าวิธีนี้ต้องการเพียงกระบวนการประมวลผลที่ง่ายมาก ทำให้ผู้ใช้สามารถเรียนรู้เกี่ยวกับการเปลี่ยนแปลงข้อมูลได้ทันทีด้วยความเร็วที่ใกล้เคียงกับเรียลไทม์ อย่างไรก็ตาม เราก็สามารถใช้วิธีอื่นได้เช่นกัน วิธีการวิธีการซึ่งส่งวัตถุเป็นเวกเตอร์

ในแอปพลิเคชันที่ใช้งานจริง โดยทั่วไปคุณควรทำให้การแทรกข้อมูลใหม่ลงในเพจปัจจุบันมีความโปร่งใส แต่ในแอปพลิเคชันตัวอย่าง เพื่อให้โปรแกรมที่รันกระบวนการใช้งานง่ายขึ้น ระบบจะแจ้งให้ผู้ใช้ทราบเมื่อมีเนื้อหาใหม่เข้ามา

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

5. วิธีเรียกใช้ตัวอย่างของบทความนี้
หากต้องการทดสอบแอปพลิเคชันตัวอย่างในบทความนี้ คุณต้องมีเว็บเซิร์ฟเวอร์และ JDK 1.7 หรือสูงกว่าติดตั้งอยู่บนเครื่องของคุณ

จุดติดตั้ง:

คลายซิปไฟล์บีบอัด ZIP และติดตั้งลงในไดเร็กทอรีรากเริ่มต้นของเว็บเซิร์ฟเวอร์
สำหรับเซิร์ฟเวอร์ IIS ไดเรกทอรีรากเริ่มต้นคือ Inetputwwwroot
สำหรับเซิร์ฟเวอร์ฟรีที่มาพร้อมกับ jsdk2.1 ไดเร็กทอรีดีฟอลต์คือ <ไดเร็กทอรีการติดตั้ง>webpages
หลังจากคลายซิปไฟล์เก็บถาวรแล้ว ไฟล์ทั้งหมดจะถูกติดตั้งลงในไดเร็กทอรี <Web server root>/exp/
เพิ่มบรรทัดโค้ดต่อไปนี้ในหน้าเริ่มต้น แต่ละเซิร์ฟเวอร์มีหน้าเริ่มต้นของตัวเอง หน้าเริ่มต้นของ IIS คือ "default.htm" โปรดดูเอกสารประกอบของเว็บเซิร์ฟเวอร์สำหรับคำแนะนำเฉพาะ:

<ul><li> <a href="/exp/ImageMain.htm"> แบนเนอร์โฆษณาแบบไดนามิกที่ใช้ Java</a></li> </ul>

ขั้นตอนในการเรียกใช้แอปพลิเคชัน:

เปิดหน้าต่าง DOS ป้อน <Default Web Directory>/exp และดำเนินการ "java ImageApplication" ระบบจะแสดงข้อความ "Server เริ่มฟังที่พอร์ต 6011" ตรวจสอบให้แน่ใจว่าตัวแปรสภาพแวดล้อม classpath ชี้ไปที่ไดเร็กทอรีการทำงานปัจจุบัน
เริ่มเว็บเซิร์ฟเวอร์
เปิดเบราว์เซอร์และป้อน URL ต่อไปนี้: http://localhost:8080 URL นี้จะเปิดหน้าเริ่มต้นของเว็บเซิร์ฟเวอร์ ซึ่งควรมีลิงก์ "แบนเนอร์โฆษณาแบบไดนามิกที่ใช้ Java" คลิกลิงก์นี้เพื่อเปิดแอปพลิเคชันตัวอย่างสำหรับบทความนี้
เปิดไฟล์ "/exp/images.txt" ด้วย Notepad คัดลอกและวางบรรทัดเนื้อหา และบันทึกไฟล์ คุณจะเห็นได้ทันทีว่าระบบแสดงหน้าต่าง JavaScript เพื่อแจ้งการอัปเดตเนื้อหา ปิดหน้าต่าง JavaScript และหน้าจะแสดงเนื้อหาใหม่
โปรดดาวน์โหลดโค้ดตัวอย่างที่สมบูรณ์ในบทความนี้จากที่นี่ 411 KB/u/info_img/2009-06/20/pushweb.zip