Dalam proyek terbaru, terdapat fungsi unggah: unggah file CVS, lalu parsing file tersebut dan tulis ke dalam database. Karena file berukuran besar sering kali perlu diunggah, seringkali dibutuhkan waktu 40 menit bagi pelanggan untuk menyelesaikan fungsi ini proses, halamannya juga Tidak ada prompt dan pengalaman pengguna sangat buruk?
Mengapa tidak menggunakan ajax untuk membuat bilah kemajuan?
Selesaikan persyaratan ini dalam dua langkah:
Satu: Tulis ajax sederhana untuk mengimplementasikan fungsi bilah kemajuan paling sederhana.
Kedua: Ubah bilah kemajuan ini menjadi bilah kemajuan yang tersedia untuk proyek tersebut.
1: Bilah kemajuan paling sederhana
1. Klien mengirimkan permintaan createXMLHttpRequest ke server setiap 2 detik dan mendapatkan data kemajuan yang dikembalikan oleh server. Berdasarkan data yang dikembalikan oleh server, gunakan javascript untuk memperbarui lebar tabel.
Ini mensimulasikan bilah kemajuan.
progresBar.html.Isinya sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<kepala>
<title>Bilah Kemajuan Ajax</title>
<skrip tipe="teks/javascript">...
var xmlHttp;
kunci var;
fungsi buatXMLHttpRequest() ...{
jika (jendela.ActiveXObject) ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
lain jika (jendela.XMLHttpRequest) ...{
xmlHttp = XMLHttpRequest baru();
}
}
fungsi pergi() ...{
buatXMLHttpRequest();
hapusBar();
var url = "ProgressBarServlet?tugas=buat";
var tombol = document.getElementById("pergi");
tombol.disabled = true;
xmlHttp.open("GET", url, benar);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.kirim(null);
}
fungsi goCallback() ...{
jika (xmlHttp.readyState == 4) ...{
jika (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
fungsi pollServer() ...{
buatXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + kunci;
xmlHttp.open("GET", url, benar);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.kirim(null);
}
fungsi pollCallback() ...{
jika (xmlHttp.readyState == 4) ...{
jika (xmlHttp.status == 200) ...{
var persen_lengkap = xmlHttp.responseXML.getElementsByTagName("persen")[0].firstChild.data;
var kemajuan = document.getElementById("kemajuan");
var progressPersent = dokumen.getElementById("progressPersent");
kemajuan.lebar = persen_lengkap + "%";
progresPersent.innerHTML = persen_lengkap + "%";
jika (persen_lengkap < 100) ...{
setTimeout("pollServer()", 2000);
} kalau tidak ...{
document.getElementById("selesai").innerHTML = "Selesai!";
//document.getElementById("go").disabled = false;
}
}
}
}
fungsi clearBar() ...{
var progress_bar = dokumen.getElementById("progressBar");
var progressPersent = dokumen.getElementById("progressPersent");
var lengkap = document.getElementById("lengkap");
progres_bar.gaya.visibilitas = "terlihat"
kemajuanPersent.innerHTML = " ";
complete.innerHTML = "Mulai unggah file ini...";
}
</skrip>
</kepala>
<tubuh>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<tabel lebar = "300" border = "0" Cellspacing = "0" cellpadding = "0" align = "center">
<tr>
<td align="center" id="progressPersent">86%</td>
</tr>
<tr>
<td>
<tabel lebar="100%" border="1" Cellspacing="0" cellpadding="0" bordercolor="#000000">
<tr>
<td>
<tabel lebar = "1%" border = "0" Cellspacing = "0" cellpadding = "0" bgcolor = "#FF0000" id = "kemajuan">
<tr>
<td> </td>
</tr>
</tabel></td>
</tr>
</tabel>
</td>
</tr>
<tr>
<td align="center" id="complete">selesai</td>
</tr>
</tabel>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: Servlet yang disimulasikan: ProgressBarServlet1. java, isinya sebagai berikut:
paket com.cyberobject.lcl.ajax;
impor java.io.*;
impor javax.servlet.*;
impor javax.servlet.http.*
/**
*
* @penulis nate
* @versi
*/
kelas publik ProgressBarServlet memperluas HttpServlet {
penghitung int pribadi = 1;
/** Menangani metode HTTP <code>GET</code>.
* @param meminta permintaan servlet
* @param respons respons servlet
*/
void doGet yang dilindungi (permintaan HttpServletRequest, respons HttpServletResponse)
melempar ServletException, IOException {
String tugas = request.getParameter("tugas");
String res = "";
if (tugas.sama dengan("buat")) {
res = "<kunci>1</kunci>";
penghitung = 1;
}
kalau tidak {
String persen = "";
saklar (penghitung) {
kasus 1: persen = "10";
kasus 2: persen = "23";
kasus 3: persen = "35";
kasus 4: persen = "51";
kasus 5: persen = "64";
kasus 6: persen = "73";
kasus 7: persen = "89";
kasus 8: persen = "100";
}
penghitung++;
res = "<persen>" + persen + "</persen>";
}
PrintWriter keluar = respon.getWriter();
respon.setContentType("teks/xml");
respon.setHeader("Kontrol Cache", "tanpa cache");
keluar.println("<respon>");
keluar.println(res);
keluar.println("</respons>");
keluar.tutup();
}
/** Menangani metode <code>POST</code> HTTP.
* @param meminta permintaan servlet
* @param respons respons servlet
*/
void doPost yang dilindungi (permintaan HttpServletRequest, respons HttpServletResponse)
melempar ServletException, IOException {
doGet(permintaan, tanggapan);
}
/** Mengembalikan deskripsi singkat tentang servlet.
*/
String publik getServletInfo() {
kembalikan "Deskripsi singkat";
}
}
3: Di web. Konfigurasikan pemetaan servlet di xml:
<!-- Pemetaan Servlet Aksi -->
<servlet>
<servlet-name>ProgressBarServlet</servlet-nama>
<nama-tampilan>ProgressBarServlet</nama-tampilan>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
</servlet>
<pemetaan servlet>
<nama-servlet>ProgressBarServlet</nama-servlet>
<url-pattern>/ProgressBarServlet</url-pattern>
</pemetaan-servlet>
Pada titik ini bilah kemajuan siap dijalankan. Langkah selanjutnya adalah mem-portingnya ke sistem kami.
dua:
1: Di kelas DbOperater yang menulis database, tambahkan atribut kemajuan
private int progres;
2: Di kelas yang menulis database, tambahkan metode getProgress():
publik int getProgress()
{
mengembalikan kemajuan;
}
3: Dalam perulangan penulisan perpustakaan, progres++;
4: Panggil metode getProgress() DbOperater di servlet yang memanggil DbOperater, sehingga menyediakan data real-time untuk bilah kemajuan.
5: Selain itu: doGet() servlet digunakan untuk memperoleh data kemajuan, dan doPost() digunakan untuk mengunggah file dan menulis operasi perpustakaan. Pembagian kerja antara satu sama lain jelas.
Ini diarsipkan.