Berkongsi contoh penggunaan AJAX untuk melaksanakan bar kemajuan pada kemahiran halaman web

Berkongsi contoh penggunaan AJAX untuk melaksanakan bar kemajuan pada kemahiran halaman web_javascript

WBOY

Lepaskan： 2016-05-16 15:01:44

asal

2016 orang telah melayarinya

Semasa proses pemasangan dan muat turun aplikasi, penggunaan bar kemajuan telah menjadi sangat biasa. Bar kemajuan boleh digunakan untuk menunjukkan kemajuan penyiapan projek Ia boleh dinyatakan sebagai peratusan atau nombor, dan boleh diletakkan secara mendatar. Gunakan teknologi Ajax untuk mencipta bar kemajuan, yang menjadikan fungsi lebih berkuasa dan lebih pantas.
Sekarang buat contoh untuk menunjukkan penggunaan teknologi Ajax untuk melaksanakan bar kemajuan. Contoh ini juga boleh dibahagikan kepada kod klien dan kod pelayan.

1, kod pelayan
Kod pelayan terutamanya melaksanakan maklumat permintaan pelanggan dan mengembalikan nombor peratusan yang sepadan. Buka Notepad dan masukkan kod berikut:

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> 
<%! 
int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户 
%> 
<% 
 String task = request.getParameter("task"); 
  String res = ""; 
   
  if (task.equals("create")) { 
   res = "1"; 
   counter = 1; 
  } 
  else { 
   String percent = ""; 
   switch (counter) { 
    case 1: percent = "10"; break; 
    case 2: percent = "23"; break; 
    case 3: percent = "35"; break; 
    case 4: percent = "51"; break; 
    case 5: percent = "64"; break; 
    case 6: percent = "73"; break; 
    case 7: percent = "89"; break; 
    case 8: percent = "100"; break; 
   } 
   counter++; 
     
   res = "<percent>" + percent + "</percent>"; 
  } 
   
  // PrintWriter out = response.getWriter(); 
  response.setContentType("text/xml"); 
  response.setHeader("Cache-Control", "no-cache"); 
  out.println("<response>"); 
  out.println(res); 
  out.println("</response>"); 
  out.close();  
%>

Salin selepas log masuk

Simpan kod di atas sebagai ProgressBar.jsp. Dalam fail ini, pembilang pembolehubah diisytiharkan dan diberikan nilai 1. Pembolehubah ini adalah asas untuk nombor peratusan yang dikembalikan oleh bar kemajuan. Gunakan objek permintaan di bawah untuk mendapatkan nilai tugas pembolehubah yang dihantar oleh pelanggan Jika nilai dibuat, ini bermakna bar kemajuan perlu dibuat semula dan nilai pembilang ditetapkan kepada 1 tidak mencipta, peratusan akan dikembalikan berdasarkan nilai pembilang, selepas menyelesaikan operasi, nilai pembilang dinaikkan sebanyak 1.

2, kod pelanggan
Kod klien bagi contoh ini terutamanya memaparkan status bar kemajuan berdasarkan nombor peratusan yang dikembalikan. Buka Notepad dan masukkan kod berikut:

<html> 
 <head> 
 <title>JSP+Ajax 进度条</title> 
 <script type="text/javascript"> 
  var xmlHttp; 
  var bar_color = 'blue'; 
  var span_id = "yellow"; 
  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&#63;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&#63;task=poll"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = pollCallback; 
   xmlHttp.send(null); 
  } 
   
  function pollCallback() { 
   if (xmlHttp.readyState == 4) { 
    if (xmlHttp.status == 200) { 
     var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; 
      
     var index = processResult(percent_complete); 
     for (var i = 1; i <= index; i++) { 
      var elem = document.getElementById("block" + i); 
      elem.innerHTML = clear; 
 
      elem.style.backgroundColor = bar_color; 
      var next_cell = i + 1; 
      if (next_cell > index && next_cell <= 9) { 
       document.getElementById("block" + next_cell).innerHTML = percent_complete + "%"; 
      } 
     } 
     if (index < 9) { 
      setTimeout("pollServer()", 2000); 
     } else { 
      document.getElementById("complete").innerHTML = "网站已完成加载!"; 
     } 
    } 
   } 
  } 
   
  function processResult(percent_complete) { 
   var ind; 
   if (percent_complete.length == 1) { 
    ind = 1; 
   } else if (percent_complete.length == 2) { 
    ind = percent_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("block" + i); 
    elem.innerHTML = clear; 
    elem.style.backgroundColor = "white"; 
   } 
  } 
 </script> 
 </head> 
 <body onload="go();"> 
 <h1 align=center>网站正在加载中，请稍候</h1> 
 
 <p> 
 <table align="center"> 
  <tbody> 
   <tr><td> 
    <div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden"> 
     <span id="block1"> </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> 
 </table> 
 </body> 
</html>

Salin selepas log masuk

Simpan kod di atas sebagai JsprogressBar.html. Dalam fail ini, fungsi JavaScript createXMLHttpRequest() digunakan terutamanya untuk mencipta objek XMLHttpRequest Fungsi go() menyelesaikan penghantaran permintaan tak segerak ke pelayan Fungsi ini dipanggil apabila halaman web dimuatkan pelayan dan mulakan pada bar kemajuan Jalankan. Fungsi GoCallback() digunakan terutamanya untuk memproses respons pelayan, dan fungsi pollServer() dipanggil setiap 2 saat Ia juga digunakan untuk menghantar permintaan tak segerak ke pelayan, terutamanya meminta peratusan respons pelayan. Fungsi PollCallback() digunakan terutamanya untuk memproses respons bahagian pelayan, iaitu, untuk menentukan status paparan bar kemajuan berdasarkan nombor yang dikembalikan oleh bahagian pelayan. Perlu diingatkan di sini bahawa fungsi goCallback() hanya dilaksanakan sekali, manakala fungsi PollCallback() boleh dilaksanakan beberapa kali. Tiga fungsi yang selebihnya adalah fungsi tambahan untuk melaksanakan bar kemajuan.

3, lari
Salin dua fail Jsp di atas ke direktori JSP. Gambar rajah kesan operasi adalah seperti berikut:

201656165706542.jpg (518×153)