Selama instalasi dan pengunduhan aplikasi, penggunaan bilah kemajuan telah menjadi sangat umum. Bilah kemajuan dapat digunakan untuk mengidentifikasi kemajuan penyelesaian proyek, dapat diwakili oleh persentase atau angka, dan dapat ditempatkan secara horizontal. Menggunakan teknologi AJAX untuk membuat bilah kemajuan, fungsi menjadi lebih kuat dan cepat.
Sekarang buat contoh untuk menunjukkan implementasi bilah kemajuan menggunakan teknologi AJAX. Contoh ini juga dapat dibagi menjadi kode klien dan kode server.
1. Kode server
Kode server terutama mengimplementasikan kalimat informasi permintaan klien dan mengembalikan nomor persentase yang sesuai. Buka Notepad dan masukkan kode berikut:
<%@ page contentType = "Teks/html; charset = gb2312" bahasa = "java" import = "java.sql.*" errorPage = ""%> <%! int counter = 1; // Catatan: Beberapa pengguna akan membagikan variabel ini, dan bilah kemajuan ini hanya cocok untuk pengguna tunggal%> <% string Task = request.getParameter ("Tugas"); String res = ""; if (task.equals ("create")) {res = "1"; penghitung = 1; } else {string persen = ""; switch (counter) {case 1: persen = "10"; merusak; Kasus 2: persen = "23"; merusak; Kasus 3: persen = "35"; merusak; Kasus 4: persen = "51"; merusak; Kasus 5: persen = "64"; merusak; Kasus 6: persen = "73"; merusak; kasus 7: persen = "89"; merusak; Kasus 8: persen = "100"; merusak; } counter ++; res = "<sent>" + persen + "</sent>"; } // printwriter out = response.getWriter (); response.setContentType ("Teks/XML"); response.setheader ("cache-control", "no-cache"); out.println ("<prespess>"); out.println (res); out.println ("</response>"); out.close (); %>Simpan kode di atas dengan nama progressBar.jsp. Dalam file ini, penghitung variabel dinyatakan dan diberi nilai 1, yang merupakan dasar bagi bilah kemajuan untuk mengembalikan angka persentase. Di bawah ini, gunakan objek permintaan untuk mendapatkan nilai tugas variabel yang dikirimkan oleh klien. Jika nilainya dibuat, itu berarti bahwa bilah kemajuan perlu diciptakan kembali dan nilai penghitung diatur ke 1; Jika tugas tidak dibuat, persentase nomor akan dikembalikan berdasarkan nilai penghitung, dan operasi akan selesai, dan nilai penghitung akan ditambahkan ke 1.
2. Kode Klien
Kode klien dari contoh ini terutama mengimplementasikan status bilah kemajuan berdasarkan nomor persentase pengembalian. Buka Notepad dan masukkan kode berikut:
<Html> <Head> <title> jsp+bilah kemajuan AJAX </iteme> <script type = "text/javascript"> var xmlhttp; var bar_color = 'blue'; var span_id = "kuning"; var clear = "" function createxmlHttpRequest () {if (window.activexObject) {xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); } else if (window.xmlHttpRequest) {xmlhttp = new xmlHttpRequest (); }} function go () {createxmlHttpRequest (); checkDiv (); var url = "progressBarjsp.jsp? Task = create"; xmlhttp.open ("get", url, true); xmlhttp.onreadystatechange = gocallback; xmlhttp.send (null); } function gocallback () {if (xmlhttp.readystate == 4) {if (xmlhttp.status == 200) {setTimeout ("pollserver ()", 2000); }}} function pollserver () {createxmlHttpRequest (); var url = "progressBarjsp.jsp? Task = poll"; xmlhttp.open ("get", url, true); xmlhttp.onreadystatechange = Pollcallback; xmlhttp.send (null); } function PollCallback () {if (xmlhttp.readystate == 4) {if (xmlhttp.status == 200) {var persen_complete = xmlhttp.responsexml.getElementsbyTagname ("persen") [0] .firstchild.datelementsbysbytagname ("persen") [0] .firstchild.datel indeks var = ProcessResult (persen_complete); untuk (var i = 1; i <= index; i ++) {var elem = document.geteLementById ("block"+i); elem.innerhtml = jelas; elem.style.backgroundcolor = bar_color; var next_cell = i + 1; if (next_cell> index && next_cell <= 9) {document.geteLementById ("blok" + next_cell) .innerHtml = persen_complete + "%"; }} if (index <9) {setTimeout ("PollServer ()", 2000); } else {document.geteLementById ("complete"). innerHtml = "Situs web telah dimuat!"; }}}}} function ProcessResult (persen_complete) {var ind; if (persen_complete.length == 1) {ind = 1; } lain jika (persen_complete.length == 2) {ind = persen_complete.substring (0, 1); } else {ind = 9; } return ind; } function checkDiv () {var progress_bar = document.geteLementById ("progressBar"); if (progress_bar.style.visibility == "visible") {clearbar (); document.geteLementById ("complete"). innerHtml = ""; } else {progress_bar.style.visibility = "visible"}} function clearbar () {for (var i = 1; i <10; i ++) {var elem = document.geteLementById ("blok"+i); elem.innerhtml = jelas; elem.style.backgroundcolor = "putih"; }} </script> </head> <body onload = "go ();"> <h1 align = center> situs web sedang memuat, tunggu </h1> <p> <table align = "center"> <tbody> <tr> <td> <v id = "progressBar" style = "padding: 2px; perbatasan: solid 2px; span = span; span; span" span "span; id="block2"> </span> <span id="block3"> </span> <span id="block4"> </span> <span id="block5"> </span> <span id="block6"> </span> <span id="block7"> </span> <span id="block8"> </span> <span id="block9"> </span> </div> </td></tr> <tr> <td align = "center" id = "complete"> </td> </tr> </tbody> </able> </body> </html>Simpan kode di atas dengan nama jspprogressbar.html. Dalam file ini, fungsi JavaScript CreatexmlHttpRequest () terutama digunakan untuk membuat objek XMLHTTPREQUEST. Fungsi go () ingin mengirim permintaan asinkron di server. Fungsi dipanggil saat halaman web dimuat. Fungsi utamanya adalah memberi tahu server dan mulai menjalankan bilah kemajuan pada klien. Fungsi gocallback () terutama digunakan untuk memproses respons server, dan memanggil fungsi pollserver () setiap 2 detik. Ini juga digunakan untuk mengirim permintaan asinkron ke server, terutama meminta persentase respons server. Fungsi PollCallback () terutama digunakan untuk memproses respons sisi server, yaitu, untuk menentukan status tampilan bilah kemajuan berdasarkan nomor yang dikembalikan oleh sisi server. Perlu dicatat di sini bahwa fungsi gocallback () hanya dieksekusi sekali, sedangkan fungsi pollcallback () dapat dieksekusi beberapa kali, dan tiga fungsi lainnya adalah fungsi tambahan yang mengimplementasikan bilah kemajuan.
3. Jalankan
Salin dua file JSP di atas ke direktori JSP. Rendering operasi adalah sebagai berikut: