Cara menggunakan JJQUERY pada JavaScript

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Setelah mengikuti tiga tutorial sebelumnya, Anda seharusnya sudah mendapatkan pemahaman yang baik tentang AJAX. Dalam tutorial akhir ini, kita akan menyelesaikan semuanya dengan bekerja dengan contoh yang lebih sulit.

Markup

Untuk mendapatkan gambaran tentang struktur contoh ini, pertimbangkan markup berikut:

      

Markup untuk element main ditunjukkan di bawah ini:

      

Popular front-end frameworks

Click each one to load details via AJAX.

Perhatikan tautan teks. al ini berhubungan dengan kerangka kerja front-end yang berbeda. Seperti yang akan kita lihat pada bagian selanjutnya, setiap kali kita mengklik tautan, permintaan AJAX akan dijalankan. Kemudian, elemen dengan kelas modal akan muncul dan kontennya akan diperbarui dengan data yang diambil dari respon.

Seperti ini lah bagaimana elemen main terlihat pada tampilan:

Cara menggunakan JJQUERY pada JavaScript

Tahap selanjutnya adalah memeriksa struktur dari modal kita. Berikut adalah kode HTML: Berikut adalah kode HTML:

      

Seperti yang dapat Anda lihat, modal berisi beberapa elemen kosong. Kami menempatkan mereka di HTML karena teks mereka akan berubah tergantung pada tautan mana yang kita klik dan respon yang kita dapatkan

Gambar dibawah menunjukan bagaimana modal awalnya muncul:

Cara menggunakan JJQUERY pada JavaScript

Secara default, modal disembunyikan. elain itu, kita juga akan menyembunyikan loader. Hal ini akan muncul hanya saat permintaan AJAX digerakkan.

Lihatlah aturan CSS yang sesuai:

      .modal {
          opacity: 0; 
      }

      .loader {
          display: none;
      }

Perhatikan bahwa kita menggunakan karakteristik opacity (dan bukan karakteristik display ) untuk menyembunyikan modal karena karakteristik ini animatable CSS properties. Dengan jalan ini, kita dapat mentransisikan keadaan modal (yaitu keadaan terbuka dan tertutup).

Mengeluarkan respon JSON

Untuk maksud dari contoh ini, kita memilih untuk  membangun respon JSON sendiri. Secara khusus, respons yang diharapkan (sebagai contoh fail Demo.json ) akan menjadi array dari objek. Setiap objek akan berisi rincian terkait kerangka kerja front-end.

Selain itu, nilai dari karakteristik name akan cocok dengan tautan teks dari elemen main (lihat bagian sebelumnya). Dengan pemikiran tersebut, struktur responsnya terlihat seperti ini:

       [
         {
           "url": "http://getbootstrap.com/", 
           "numberOfStars": "88.260+", 
           "currentVersion": "3.3.5", 
           "name": "Bootstrap"
         }, 
         {
           "url": "http://foundation.zurb.com/", 
           "numberOfStars": "21.180+", 
           "currentVersion": "5.5.3", 
           "name": "Foundation"
         }, 
         // 4 more objects here
       ]

Catatan: Nilai yang kita digunakan untuk karakteristik numberOfStars dan currentVersion adalah palsu dan murni bertujuan untuk demontrasi.

Serupa dengan contoh sebelumnya di seri ini, kita akan menggunakan AJAX untuk meminta fail statis. Namun, jika kita ingin menyematkan konten yang berasal dari situs lain (misalnya Google Maps, Flickr), kita harus membaca dokumentasi API mereka, dan jika perlu, mengajukan permohonan kunci API.

Selanjutnya, data target kita tinggal di server yang sama dengan halaman demo. Oleh karena itu, kita menghindari keterbatasan yang mungkin terjadi saat berinteraksi dengan layanan pihak ketiga (lihat bagian "Keterbatasan Permintaan AJAX" pada tutorial pertama).

Penerapan permintaan AJAX

Pada bagian ini, kita akan menggunakan fungsi jQuery ajax untuk menginisialisasi permintaan AJAX. Sebelum melakukannya, pertama kita tentukan variabel kita dengan menyembunyikan selektor jQuery yang paling umum digunakan:

      var $list    = $('.m-info'),
      var $message = $('.m-message');
      var $modal   = $('.modal');
      var $loader  = $('.loader');
      var $framework;

Sekarang, saatnya untuk memeriksa kode yang bertanggung jawab atas pelaksanaan permintaan:

      $('.boxes a').on('click', function(e) {
        e.preventDefault();
        
        $framework = $(this).text();
        
        $.ajax({
          url: 'Demo.json',
          dataType: 'json',
          beforeSend: function() {
              $loader.show();
          }
        }).done(successFunction)
          .fail(errorFunction)
          .always(alwaysFunction);
      });

Anda akan melihat sintaks untuk fungsi ajax terlihat sebagai berikut:

      $.ajax([settings])

arameter settings adalah objek konfigurasi yang menampung info tentang permintaan kita. Jumlah karakteristik yang dimiliki objek ini sangat panjang (sekitar 34 karakter). Demi kesederhanaan, kita hanya membahas karakteristik yang digunakan dalam demo ini. Lebih spesifik:

KarakteristikDeskripsi
url  String berisi URL dimana permintaan tersebut dikirim.
dataType  Format data respon (misalnya jsonxmlhtml).
beforeSend Fungsi pemanggilan kembali dijalankan sebelum kita mengirim permintaan. sini, fungsi ini menggerakan kode yang menunjukkan loader.

Sebelum kita lanjut menuju bahasan berikutnya, terdapat 3 hal yang perlu disebutkan:

  • Terdapat juga sintaks lain untuk ajax function: $.ajax(url[, settings])
  • Semua konfigurasi karakteristik parameter settings bersifat opsional.
  • Default metode HTTP adalah GET

Metode Promise

Fungsi ajax mengembalikan objek jQuery XMLHttpRequest atau jqXHR. Objek ini mengimplementasikan antarmuka Promise, dan dengan demikian berisi semua properti, metode, dan perilaku Promise

Dalam contoh ini, kita menggunakan metode Promise berikut:

  • done
  • fail
  • always

Metode done digerakan jika permintaan berlhasil. Metode ini menerima satu atau lebih argumen, yang semuanya bisa berupa fungsi tunggal atau serangkaian fungsi. Misalnya, dalam demo kita, successFunction () dilewatkan sebagai penjelasan.

Fungsi callback (misalnya successFunction()) menerima tiga penjelasan. ertama, data yang dikembalikan. Kedua, string yang mengkategorikan status permintaan (lihat artikel sebelumnya untuk kemungkinan nilai-nilainya). Terakhir, objek jqXHR.

Metode fail dipanggil jika permintaan gagal. Metode ini menerima satu atau lebih argumen, yang semuanya bisa berupa fungsi tunggal atau serangkaian fungsi. Misalnya, dalam demo kami, errorFunction() dilewatkan sebagai penjelasan.

Fungsi callback (contoh errorFunction())menerima tiga penjelasan: objek jqXHR, string yang mengkategorikan status permintaan, dan string lain yang menentukan kesalahan yang dihasilkan. Kesalahan ini menerima bagian teks dari status HTTP, seperti Not Found atau Forbidden

Metode always dijalankan saat permintaan selesai, terlepas dari keberhasilannya (yaitu metode done dijalankan) atau kegagalan (yaitu metode fail dijalankan) dari itu. Sekali lagi, metode ini menerima penjelasan sebagai fungsi tunggal atau serangkaian fungsi. Misalnya, dalam demo kami, alwaysFunction() dilewatkan sebagai argumentasi.

Keadaan permintaan menentukan argumen fungsi Jika permintaan berhasil, callback (mis alwaysFunction()) menerima penjelasan yang sama dengan panggilan balik metode done . Sebaliknya, jika permintaan gagal, ia menerima penjelasan yang sama dengan callback metode fail .

Catatan: Sebagai gantinya  donefail, dan always metode promise yang digunakan dalam contoh ini, kita bisa menggunakan fungsi callback successerror, dan complete . Fungsi-fungsi ini didefinisikan dalam parameter settings .

Tampilan Data

Jika permintaan berhasil, kita bisa mendapatkan kembali data tanggapan. Kemudian, kita memanipulasinya sehingga bisa mengisi elemen modal yang kosong.

Pertimbangan kode untuk callback successFunction :

      function successFunction(data) {
        if (data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            if ($framework === data[i].name) {
              $list.show();
              $message.hide();

              $list.find('li:nth-of-type(2)').text($framework);
              $list.find('li:nth-of-type(4)').text(data[i].currentVersion);
              $list.find('li:nth-of-type(6)').text(data[i].numberOfStars);
              $list.find('li:nth-of-type(8)').html('' + data[i].url + '');
              break;
            } else {
              $list.hide();
              $message.show().text('No data received for this framework!');
            }
          }	
        } else {
          $list.hide();
          $message.text('No data received from your respose!');
        }
      }

Meski kita memperbarui konten modal kita, ini masih tersembunyi. Hal in terlihat dan loader menghilang ketika permintaan berakhir. Hanya kemudian, callback alwaysFunction dijalankan:

      function alwaysFunction() {
          $loader.hide();
          $modal.addClass('active');
      }

Kelas active terlihat seperti ini:

      .active {
        opacity: 1;
        z-index: 10;
        transform: scale(1);  
      } 

Di bawah ini Anda dapat melihat penampilan diharapkan dari modal jika kita klik pada tautan teks Bootstrap :

Cara menggunakan JJQUERY pada JavaScript

Beberapa Skenario

Penting untuk memahami kode yang dieksekusi dalam kondisi tertentu.  Mari kita bahas dua skenario yang umum

  • Nilai dari karakteristik name tidak sesuai dengan teks tautan dari elemen main . Sebagai contoh, mari kita asumsikan bahwa kita mendefinisikan sebuah URL dimana nilai dari karakteristik name dari objek yang terkait dengan kerangka dasar Foundation adalah Foundation2 dan bukan Foundation. Dalam kasus seperti ini, jika kita mengeklik tautan teks Foundation , modal di bawah akan muncul:
Cara menggunakan JJQUERY pada JavaScript
  • Data tanggapan kosong. Katakanlah, misalnya, kita mendefinisikan sebuah URL yang menunjuk sebuah array kosong. Dalam kasus ini, modal akan terlihat seperti ini:
Cara menggunakan JJQUERY pada JavaScript

Penanganan Kesalahan

Jadi, kita telah membahas kode yang dkeluarkan saat permintaan berhasil. api apa jadinya jika permintaan gagal? Jika permintaan tidak berhasil, kami menyembunyikan daftar dan menampilkan pesan khusus.

Inilah kode failFunction() yang menunjukkan perilaku itu:

       function failFunction(request, textStatus, errorThrown) {
         $list.hide();
         $message.text('An error occurred during your request: ' + request.status + ' ' + textStatus + ' ' + errorThrown);
      }

Untuk membiasakan diri dengan kode ini, kami menentukan URL yang tidak ada. Oleh karena itu, metode fail akan dipicu dan modal di bawah ini akan ditampilkan:

Cara menggunakan JJQUERY pada JavaScript

Catatan: Sekali lagi, kesalahan pesan mungkin berbeda jika Anda menjalankan contoh ini secara lokal.

Inilah demo Codepen yang ditanamkan

Kesimpulan

Dalam tutorial ini kita menyimpulkan pemeriksaan AJAX dari perspektif perancang web - dilakukan dengan baik selama mengikuti tutorial ini! Saya harap Anda menemukan manfaat dari rangkaian tutorial ini dan Anda mempelajari beberapa keterampilan baru.

Sebagai langkah selanjutnya, saya menganjurkan Anda untuk memeriksa hal-hal berikut:

  • Biarkan menjadi terbiasa dengan metode jenjang jQuery's AJAX yang tidak kami sampaikan (misalnya metode $.getJSON )
  • Menerapkan permintaan AJAX Anda dengan mengakses baik itu data statis maupun data dinamis yang berasal dari pelayanan pihak ketiga (misalnya Flickr)

Apakah jQuery termasuk JavaScript?

jQuery adalah library JavaScript yang cukup andal, ringkas, dan mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di HTML seperti perubahan dan manipulasi dokumen, event handling, animasi, dan Ajax dapat menjadi lebih sederhana.

jQuery digunakan untuk apa?

Fungsi jQuery Selain memiliki fungsi utama sebagai library JavaScript yang membantu mengatur interaksi antara JavaScript dan HTML atau website. jQuery juga memiliki fungsi lengkap sebagai berikut: Mempermudah pencarian, penyeleksian, melakukan manipulasi elemen-elemen DOM pada JavaScript.

Apa beda JavaScript dan jQuery?

Perbedaan antara jQuery dan JavaScript adalah bahwa jQuery lebih sederhana dan lebih mudah tetapi JavaScript lebih kuat dan tidak mengecewakan Dave.

Apa itu jQuery dan contohnya?

jQuery adalah library JavaScript open-source yang di-minify dan dibuat untuk operasi JavaScript yang disederhanakan. Anda bisa menggunakan jQuery untuk coding serangkaian perintah dengan cepat, yang pada dasarnya akan memerlukan waktu lebih lama apabila menggunakan kode HTML.