1. Apa itu konten dinamis?
Situs web paling populer menghasilkan uang dari iklan online. Ruang iklan di halaman Web terbatas. Agar investasi periklanan bermanfaat, pengiklan tidak hanya harus mengemas sejumlah besar informasi ke dalam ruang iklan kecil, namun juga memastikan bahwa iklan tersebut dapat menarik perhatian pengguna. Di sebagian besar situs web saat ini, iklan banner yang ditempatkan di halaman Web umumnya dibuat oleh server saat membuat halaman. Kami tidak dapat menyisipkan iklan baru secara dinamis ke halaman yang telah dikirim. Jika ingin menampilkan iklan baru, satu-satunya cara adalah dengan me-refresh halaman. Kita dapat me-refresh halaman secara terprogram, misalnya:
menggunakan fungsi setTimeOut dari objek jendela browser untuk me-refresh halaman secara teratur. Namun, ketika menyegarkan iklan dengan cara ini, pengguna akan merasakan dengan jelas proses penyegaran halaman; pada saat yang sama, juga sulit untuk menentukan frekuensi penyegaran yang tepat;
Atur waktu kedaluwarsa halaman menjadi beberapa detik sehingga browser akan mengunduh ulang halaman tersebut setiap kali fokus input mengarah ke halaman tersebut (yaitu browser diaktifkan).
Beberapa situs besar, seperti yahoo.com dan msn.com, telah mengadopsi teknologi ini. Kedua metode tersebut mempunyai kelebihan dan kekurangan masing-masing. Saat hanya menggunakan Java, kami dapat sepenuhnya mengimplementasikan sistem penyegaran iklan banner melalui pemrograman jaringan dan beberapa pekerjaan pemrograman antarmuka, namun masalah waktu pengunduhan yang lama dan penundaan penyegaran harus diselesaikan.
2. Gunakan Java untuk mengimplementasikan content push
Menggabungkan komunikasi antarframe JavaScript dengan Java Applet yang mengelola komunikasi jaringan, kita dapat mengatasi masalah ini menggunakan teknologi push. Dalam sistem seperti itu, tugas Java Applet adalah menyambung ke server dan mendengarkan pembaruan konten. Setelah konten baru diterima, Applet membuat kode HTML yang menampilkan konten baru, memanggil fungsi JavaScript dan meneruskan HTML yang berisi konten baru ke fungsi JavaScript. Fungsi JavaScript menggunakan teknologi DHTML dan DOM untuk mengganti konten tag <div> di halaman dengan konten baru yang diteruskan dalam parameter. Karena batasan keamanan browser, port Socket yang dibuka oleh Applet hanya dapat dihubungkan ke server yang mendownload Applet.
Server web hanya mendengarkan permintaan koneksi pada port 80. Oleh karena itu, selain server Web, kita juga memerlukan layanan aplikasi jaringan yang menerima permintaan koneksi Socket Applet. Layanan aplikasi jaringan ini secara berkala menanyakan database dan menerbitkan (mendorong) data yang diubah ke semua Applet yang terhubung. Berkat penggunaan bingkai tersembunyi dan kemampuan komunikasi antar bingkai JavaScript, kami dapat menyembunyikan sebagian besar logika JavaScript dari pengguna.
Tugas tersulit dalam keseluruhan proses ini adalah komunikasi antara Java Applet dan kode JavaScript. Netscape menyediakan kelas yang disebut netscape.javascript.JSObject. Untuk menggunakan objek ini, tambahkan tag Applet yang berisi atribut khusus "MAYSCRIPT":
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
Metode JSObject memungkinkan Applet berinteraksi dengan objek dokumen dan menjalankan perintah JavaScript. Misalnya, dengan memasukkan kode berikut ke dalam Applet, kita dapat mengakses objek window:
import netscape.javascript.*; public class MyApplet extends java.applet.Applet{ private JSObject mainwin; ( this); } }
Setelah mendapatkan referensi JSObject, kita dapat mengakses objek jendela dokumen dan memanggil fungsi JavaScript melalui metode eval() JSObject.
3. Perbarui halaman menggunakan DHTML
Saat menulis konten baru dari Applet ke dalam dokumen, agar tidak mempengaruhi konten yang sudah ada, kita bisa menggunakan tag HTML <div></div>. Tag ini berbeda di IE dan Netscape.
Untuk IE dan Netscape 6, tag HTML ini adalah:
// Semua konten yang akan diupdate harus diidentifikasi dengan id <div id="iexplorer" width=700px ></div>
Untuk versi Netscape 4.x, tag HTML ini adalah:
<DATA><layer id="netscapev" ></layer></DATA>
Meskipun kita bisa langsung mengupdate konten HTML dari Applet dengan mereferensikan ID yang sesuai, agar lebih jelas Demi kesederhanaan, kami akan memasukkan logika program memperbarui kode HTML ke dalam fungsi JavaScript. Kode JavaScript berikut menyimpan tipe browser ke variabel ie:
applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; } else { ie=false
;
kode data, simpan ke konten variabel JavaScript, lalu panggil metode tugasData(). Data konten dapat berupa apa saja mulai dari HTML biasa, XML, hingga data biner.
// Memanggil metode yang sesuai function assignData() { if(ie) {explore();} else {navig() } sesuai dengan tipe browser
Jika browsernya IE atau Netscape 6, Applet memanggil metode explore():
//content adalah variabel javascript yang menjelaskan data baru yang perlu //ditampilkan dalam format HTML function explore() { iexplorer.innerHTML=content ; }
jika browser adalah Netscape 4.0 atau lebih tinggi, dan Applet memanggil metode navig():
function navig() { document.netscapev.document.write(“<DATA>“ + content + “</DATA>“); document.netscapev.document.close(); }
4. Proses komunikasi
Di sisi server, instance kelas ImageApliation.java merespons permintaan koneksi Socket dan membuat thread baru untuk setiap permintaan koneksi baru. Untuk menyederhanakan kode, setiap thread hanya memeriksa apakah file data telah berubah. Jika file data telah berubah, thread membaca konten file dan mengirimkan data baru ke Applet yang terhubung (aplikasi contoh mengirimkan seluruh file ke Applet).
Di sisi klien, bingkai tersembunyi berisi Applet ImageApplet.java, sehingga tag Applet tidak dapat dilihat menggunakan fungsi tampilan kode sumber HTML browser. Applet mengimplementasikan fungsi koneksi ke server (server sumber untuk mendownload Applet) dan mengimplementasikan protokol komunikasi sederhana. Setelah membuat koneksi dengan server, Applet menerima data dari server, membuat kode HTML, dan memanggil fungsi JavaScript untuk meneruskan data ke dalam dokumen:
public void upDateHTML(String str){ //data adalah nama dari formulir, //quote adalah variabel JavaScript //str adalah kode HTML yang baru dibuat mainwin.eval("document.data.quote.value="" + str + """); mainwin.eval("javascript:assignData ()"); return; }
netscape.javascript.JSObject menyelesaikan komunikasi dari Applet ke JavaScript. Versi browser klien yang berbeda memerlukan versi yang berbeda. Anda dapat mengunduh file kelas terkompresi java40.jar yang disediakan untuk Netscape. IE sudah hadir dengan kelas JSObject, tapi agak sulit menemukannya. Anda dapat mencari direktori $windows$JavaPackages untuk menemukan file ZIP yang berisi kelas JSObject.
Server membuat serial instance kelas ImageArrayElement.java menjadi string melalui metode toString() dan mengirimkannya ke Applet. Server membuat setiap objek dari file data, memanggil metode toString(), menggabungkan string yang mewakili semua objek, dan terakhir mengirimkan string yang dihasilkan. Di sisi lain, Applet menerima dan mem-parsing string ini dan merekonstruksi setiap objek ImageArrayElement. Alasan mengapa data dikirim ke sini dalam bentuk string panjang adalah karena metode ini hanya memerlukan proses pemrosesan yang sangat sederhana, memungkinkan pengguna untuk segera mempelajari perubahan data dengan kecepatan mendekati real-time, namun kita juga dapat menggunakan yang lain metode metode, yang mengirimkan objek sebagai vektor.
Dalam aplikasi langsung, biasanya Anda harus membuat penyisipan data baru ke halaman saat ini secara transparan. Namun dalam aplikasi contoh, untuk membuat proses menjalankan program lebih intuitif, aplikasi ini akan memberi tahu pengguna ketika konten baru tiba.
Keuntungan utama dari teknologi push adalah server aplikasi hanya mengirimkan data yang diubah ke jaringan, sehingga meminimalkan latensi. Karena Applet ini bertanggung jawab atas pekerjaan yang sangat sedikit (tidak melibatkan antarmuka pengguna, bagian pekerjaan ini ditangani oleh browser), Applet berukuran kecil dan memuat dengan sangat cepat.
5. Cara menjalankan contoh artikel ini
Untuk menguji contoh aplikasi dalam artikel ini, Anda harus memiliki server web dan JDK 1.7 atau lebih tinggi yang diinstal pada mesin Anda.
Poin instalasi:
Buka zip file terkompresi ZIP dan instal ke direktori root default server web.
Untuk server IIS, direktori root default adalah Inetputwwwroot
Untuk server gratis yang disertakan dengan jsdk2.1, direktori defaultnya adalah <direktori instalasi>halaman web
Setelah membuka ritsleting arsip, semua file akan diinstal ke direktori <Web server root>/exp/.
Tambahkan baris kode berikut ke halaman default. Setiap server memiliki halaman defaultnya sendiri. Halaman default IIS adalah "default.htm". Silakan lihat dokumentasi server Web untuk instruksi spesifik:
<ul><li> <a href="/exp/ImageMain.htm"> Ad-Banner dinamis berbasis Java</a></li> </ul>
Langkah-langkah menjalankan aplikasi:
Buka jendela DOS, masukkan <Default Web Directory>/exp, dan jalankan "java ImageApplication". Sistem akan menampilkan "Server mulai mendengarkan pada port 6011". Pastikan variabel lingkungan classpath menunjuk ke direktori kerja saat ini.
Mulai server web.
Buka browser dan masukkan URL berikut: http://localhost:8080 . URL ini akan membuka halaman default server web, yang seharusnya memiliki link "Banner Iklan Dinamis Berbasis Java". Klik tautan ini untuk meluncurkan contoh aplikasi untuk artikel ini.
Buka file "/exp/images.txt" dengan Notepad, salin dan tempel satu baris konten, dan simpan file. Anda dapat segera melihat sistem menampilkan jendela JavaScript yang meminta pembaruan konten. Tutup jendela JavaScript dan halaman akan menampilkan konten baru.
Silakan unduh kode lengkap contoh dalam artikel ini dari sini, 411 KB/u/info_img/2009-06/20/pushweb.zip