API tools faq
paste
Advertisement
Guest User

full request ajax poor vanilla js

a guest
Jun 30th, 2019
253
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>AJAX Request</title>
  6.  
  7.     <script type="text/javascript">
  8.            
  9.         try { // handle jika terjadinya error
  10.  
  11.                    
  12.             // function loading() {
  13.  
  14.             // const loader = document.getElementById("myLod");
  15.  
  16.             // if(loader !== "block") {
  17.                
  18.             //  const res = loader.style.display = 'block';
  19.             //  document.body.appendChild = res;
  20.             // }
  21.  
  22.             // setTimeout(()=> loader.style.display = 'none', 1000);
  23.             // }
  24.  
  25.  
  26.             // inisialisasi AJAX method
  27.             const ajax = new XMLHttpRequest();
  28.  
  29.                 // callback start - jalankan start
  30.                 ajax.onloadstart = confirm('tampilkan data ?');
  31.  
  32.                 // meyiapkan dokumen untuk digunakan
  33.                 ajax.onreadystatechange = function () {
  34.  
  35.                     if (ajax.readyState == 4) {
  36.  
  37.                         //callback end - jika data berhasil di temukan
  38.                         if (ajax.status == 200) {
  39.  
  40.                             ajax.onloadend = alert('data berhasil ditampilkan');
  41.  
  42.                             //parsing data json ke object
  43.                             const parsingData = JSON.parse(ajax.response);
  44.                             console.log(ajax.response);
  45.                             //cetak string
  46.                             let output = '';
  47.                             //looping data dari json object
  48.                             parsingData.forEach((val) => {
  49.  
  50.                                 output += `<tr>
  51.  
  52.                                     <td> ${val.id} </td>
  53.                                     <td> ${val.name} </td>
  54.                                     <td> ${val.username} </td>
  55.                                     <td> ${val.email} </td>
  56.                                     <td> ${val.address.street}</td>
  57.                                     <td> ${val.address.city}</td>
  58.                                     <td> ${val.address.zipcode}</td>
  59.                                    
  60.                                      </tr>`
  61.                             });
  62.  
  63.                             //result data ke dalam body
  64.                             document.querySelector("#data-table").innerHTML = output;
  65.  
  66.                         } else {
  67.  
  68.                             ajax.onerror = alert('error detected');
  69.                         }
  70.  
  71.                     }
  72.                 }
  73.  
  74.             function requestMethod() {
  75.  
  76.                 //set credential
  77.                 ajax.withCredentials = true;
  78.  
  79.                 //buka data dan kirim data
  80.                 ajax.open("GET", "https://jsonplaceholder.typicode.com/users", true);
  81.                 ajax.send();
  82.  
  83.             }
  84.  
  85.             // jalankan request method
  86.             requestMethod();
  87.  
  88.         } catch (err) { //tampilkan pesan error
  89.  
  90.             console.log(err.message);
  91.  
  92.         }
  93.     </script>
  94.  
  95. </head>
  96.  
  97. <body>
  98.  
  99.     <div id="myLod" style="display: none">
  100.  
  101.     <img src="loading.gif" width="100px" height="100px">
  102.  
  103.     </div>
  104.  
  105.     <div id="result-lod"></div>
  106.  
  107.  
  108.     <table border="1" cellspacing="3">
  109.  
  110.         <thead style="text-align: center">
  111.            
  112.             <th>Id</th>
  113.             <th>Name</th>
  114.             <th>Username</th>
  115.             <th>Email</th>
  116.             <th>Alamat</th>
  117.             <th>Kota</th>
  118.             <th>Kodepos</th>
  119.         </thead>
  120.         <tbody id="data-table" style="text-align: center">
  121.  
  122.         </tbody>
  123.     </table>
  124.  
  125. </body>
  126.  
  127. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!