Sederhanakan AJAX dengan atribut HTML – Beragampengetahuan
5 mins read

Sederhanakan AJAX dengan atribut HTML – Beragampengetahuan

Maximal0Tagged , , , , ,

Intercooler.js adalah perpustakaan JavaScript ringan yang memungkinkan pengembang untuk menambahkan fungsionalitas AJAX ke aplikasi web mereka dengan upaya minimal. Terinspirasi oleh kesederhanaan HTML, ini memungkinkan penggunaan atribut HTML untuk menangani pembaruan dinamis daripada menulis kode javascript yang luas. Perpustakaan ini sangat cocok untuk pengembang yang tidak ingin menyelinap ke dalam kerangka kerja kompleks seperti kerangka kerja kompleks seperti reaksi atau sudut.

catatan: Sementara Intercooler.js masih didukung, penggantinya HTMX menawarkan fitur tambahan dan fitur browser yang disempurnakan.

Contents

Mengapa Memilih Intercooler.js?

  • Kemudahan penggunaan: Dapatkan konten dinamis dan perbarui elemen html bisa seperti menambahkan ic-get-from Atribut milik elemen.
  • Lampu: Dalam sekitar 15kb, Intercooler.js memastikan bahwa aplikasi web Anda tetap cepat dan responsif.
  • Bingkai bingkai: Ini dengan mulus terintegrasi ke dalam proyek yang ada tanpa mengandalkan kerangka kerja eksternal.
  • Peningkatan HTML: Ini memperluas semantik html menggunakan properti seperti ini ic-get-from,,,,, ic-post-toDan ic-trigger-onKonversi HTML statis menjadi antarmuka interaktif dinamis.

Fitur utama intercooler.js

  • Permintaan AJAX yang disederhanakan: menggunakan ic-get-from Dan ic-post-to Atribut untuk mendapatkan atau mengirim data.
  • Beberapa halaman diperbarui: Segarkan bagian tertentu dari halaman tanpa memuat ulang seluruh halaman.
  • Acara mengikat: Pemicu pembaruan berdasarkan interaksi pengguna, seperti mengklik atau mouse melalui IC-Trigger-on.
  • UI deklaratif: Fokus pada HTML bersih, sementara Intercooler.js menangani logika JavaScript di belakang layar.

Memulai

1. Unduh Intercooler.js

Pertama kunjungi situs web resmi atau repositori CDN tepercaya. Anda dapat mengunduh perpustakaan atau menggunakan tautan CDN.

2. Termasuk Intercooler.js Di html Anda

<script src="

Juga, jika Anda mengunduh file, sertakan:

<script src="

3. Tambahkan dependensi yang diperlukan:

Intercooler.js tergantung pada jQuery, jadi pastikan untuk memasukkan jQuery sebelum intercooler.js:

<script src="

4. Menyiapkan struktur HTML Anda

Berikut adalah contoh sederhana untuk menggambarkan cara kerja intercooler.js:

<!DOCTYPE html>

<html>

<head>

    <title>Intercooler.js Setup</title>

    <script src="

    <script src="

</head>

<body>

    <h1>Welcome to Intercooler.js</h1>

    <button ic-get-from="/data-endpoint" ic-target="#content">

        Load Content

    </button>

    <div id="content">

        <!-- Content loaded here -->

    </div>

</body>

</html>

mendirikan: Di sini kita harus menggunakan jQuery (ketergantungan Intercooler.js) dan Intercooler.js Library <script> Label.

Tombol memiliki ic-get-from: Elemen tombol memiliki atribut ic-get-from="/data-endpoint".

Ini memberitahu intercooler.js untuk mengirim permintaan mendapatkan /data-endpoint URL Saat mengklik tombol.

Respons terhadap permintaan akan dimuat ke dalam elemen yang ditentukan oleh ic-target="#content".

Tujuan Konten: ini <div id="content"> Bertindak sebagai wadah yang secara dinamis memasukkan data pengembalian.

Persyaratan Server: Agar contoh ini berfungsi, Anda harus menjalankan server dan /data-endpoint Url. URL harus merespons dengan konten HTML, masukkan #content div.

Cara menjalankan intercooler.js

Untuk menjalankan contoh intercooler.js, berikut adalah panduan terperinci yang memandu Anda melalui setiap langkah pengaturan dan menjalankan kode Anda:

Prasyarat

Sebelum melanjutkan, pastikan Anda memiliki yang berikut:

  • Browser Web: Peramban modern apa pun, seperti Chrome, Firefox, atau Edge, akan bekerja dengan baik.

  • Server lokal sederhana: Ketika file dimuat melalui file, browser akan melaksanakan pembatasan keamanan tertentu: // protokol. Menggunakan server membantu menghindari masalah ini.

Opsi Server Lokal:

  • Menggunakan Python: Python Versi 3.x hadir dengan server HTTP bawaan.

  • Menggunakan Node.js: Instal server ringan seperti HTTP-Server atau Live-Server.

  • Alat lain: Alat seperti Ekstensi Server Langsung Visual Studio juga dapat berfungsi.

Jalankan server lokal

  • Menggunakan node.js (http-server)

Instal http-server secara global (jika belum diinstal): npm install -g http-server

Mulai server: http-server -p 8080

  • Menggunakan Python (http-server)

Arahkan ke folder proyek di terminal: cd path/to/project

Untuk Python 3.x: python -m http.server 8080

Jika Anda menggunakan Python 2.x: python -m SimpleHTTPServer 8080

Buka browser dan pergi

  • Ekstensi server real-time menggunakan vs code
    • Buka folder proyek dalam kode studio visual.
    • Instasi ekstensi server langsung (cari di pasar ekstensi).
    • Klik kanan index.html dan gunakan Live Server untuk memilih Open.
    • File akan terbuka di browser default Anda.
  • Verifikasi server.js dokumen

Jika Anda menggunakan Node.js Dan server.js File Untuk menjalankan proyek Anda, ini adalah panduan langkah demi langkah untuk memastikan pengaturan Anda berfungsi dengan intercooler.js.

Pastikan Anda server.js Pengaturan File Server dan melayani file Anda dengan benar. Contoh Penggunaan Dasar Node.js Perpustakaan ekspres mungkin terlihat seperti ini:

const express = require('express');

const app = express();

const port = 8080;



// Serve static files (like index.html, scripts, etc.)

app.use(express.static(__dirname));



// Handle your /data-endpoint route

app.get('/data-endpoint', (req, res) => 

  res.send('<p>This content was loaded dynamically!</p>');

);



// Start the server

app.listen(port, () => 

  console.log(`Server is running on 

);

Jika Anda menggunakan Express, pastikan itu diinstal. Jalankan perintah berikut di direktori proyek:

  • npm install express
  • Mulai server: node server.js
  • Jalankan server: node server.js

Buka browser dan navigasikan ke

Kasus Penggunaan Pengembangan Jaringan

Mari kita jelajahi intercooler.js dalam beberapa kasus penggunaan pengembangan web. Kami akan membawa Anda melalui kode dan menjelaskan setiap contoh.

Contoh 1. Formulir Bergabung Karyawan

<head>

  <!-- Include jQuery -->

  

  <!-- Include Intercooler.js -->



</head>

<body>

    <!-- Form Submission -->

    <form ic-post-to="/submit-employee" ic-target="#form-response">

      <div class="form-group">

              <input type="text" name="name" required>

             <input type="email" name="email" required>

<input type="tel" name="mobile" pattern="[0-9]10" required>

<input type="number" name="experience" min="0" required>

      </div>

<div id="form-response" class="box">Form response will appear here.</div>



    <div ic-get-from="/server-time" ic-poll="3s" class="box">Fetching server time...</div>

    </form>

    <!-- Form Response -->

  </div>

</html>

Formulir ini mengumpulkan informasi karyawan seperti nama, email, nomor ponsel, kualifikasi dan pengalaman. Formulir ini menggunakan verifikasi bawaan (diperlukan, skema, minimum) untuk integritas data.

Formulir ini menggunakan ic-post-to Properti, kirim data formulir ke /submit-employee Saat mengirimkan. Respons server adalah <div id="form-response">.

Fungsi hadiah menampilkan waktu server real-time, yang diperbarui setiap 3 detik saat digunakan. ic-get-from milik.

app.post("/submit-employee", (req, res) => );



// Handle live server time

app.get("/server-time", (req, res) => 

  res.send(new Date().toLocaleTimeString());

);

Cara kerjanya

  • Interaksi Klien: Pengguna mengisi formulir, dan ic-post-to Properti memicu permintaan pos yang dinamis ke server.

  • Pemrosesan Sisi Server: Backend memverifikasi input dan merespons dengan pesan keberhasilan.

  • Pembaruan waktu-nyata: Waktu server akan secara otomatis diambil dan diperbarui, dan melakukan jajak pendapat real-time dengan Intercooler.js.

Contoh 2: Animasi Tombol

Contoh kedua dari seri ini berfokus pada animasi tombol. Implementasi interaktif dan menarik secara visual ini menunjukkan bagaimana Intercool.js dapat digunakan untuk membuat efek UI dinamis dengan upaya minimal. Berbagai efek animasi, seperti bouncing, shake, zoom, flip, rotate dan fade, tambahkan sentuhan yang menarik ke tombol.

Berikut adalah contoh pengaturan tombol HTML:

<button id="bounceBtn" class="btn" ic-get-from="/api/animation" ic-trigger="click" ic-target="#bounceBtn" ic-response-type="json" ic-transition-duration="1000ms">

        Bounce

      </button>

      <button id="shakeBtn" class="btn" ic-get-from="/api/animation" ic-trigger="click" ic-target="#shakeBtn" ic-response-type="json" ic-transition-duration="1000ms">

        Shake

      </button>

CSS Bounce Animation:

@keyframes bounce 



      0%,

      100% 

        transform: translateY(0);

      



      50% 

        transform: translateY(-10px);

      

    



    #bounceBtn.ic-transitioning 

      animation: bounce 1s ease-in-out;

    

  @keyframes shake 

      0% 

        transform: skewX(-10deg);

      

      25%,

      75% 

        transform: skewX(10deg);

      



      50% 

        transform: skewX(-10deg);

      



      100% 

        transform: skewX(0);

      

    



    #shakeBtn.ic-transitioning 

      animation: shake 1s ease-out;

   

Inilah respons backend:

app.get('/api/animation', (req, res) => 

    const elementId = req.query['ic-element-id'];

    if (elementId === "bounceBtn")

      res.status(200).send("Bounce Off");

    else if (elementId === "shakeBtn")

      res.status(200).send("I am shaking!");

);

Cara kerjanya

  • Klik tombol untuk menggunakan Intercooler.js ..

  • Server mengidentifikasi tombol melalui IC-Element-ID dan mengembalikan respons yang sesuai.

  • Ketika respons diterima, animasi CSS akan dipicu secara dinamis.

Contoh 3: Data Cuaca Gulir Tidak Terbatas

Contoh ketiga dari seri ini menunjukkan konsep pengguliran tak terbatas dan mengintegrasikan dengan mulus dengan data cuaca. Implementasi interaktif ini secara dinamis memperoleh dan melampirkan catatan cuaca ke tabel saat pengguna menggulir, memastikan pengalaman penelusuran yang mulus.

Gulir tak terbatas dengan intercooler.js:

  • Ketika pengguna menggulir ke tampilan baris “Muat lebih banyak data …”, properti yang diharapkan-IC-dari secara dinamis memuat data cuaca lainnya.

  • ini ic-trigger-on="scrolled-into-view" Pastikan akuisisi data dipicu pada waktu yang tepat, sehingga meningkatkan kinerja.

  • Tabel diperbarui berdasarkan permintaan tanpa penyegaran halaman penuh. Data cuaca termasuk waktu, suhu, kelembaban, dan kecepatan angin.

  • Seorang rotator (<i> Font gaya tag luar biasa) memberikan umpan balik visual selama akuisisi data, oleh ic-indicator="#indicator".

  • Backend mendapatkan data cuaca dari API dan irisan-meteo terbuka sesuai dengan posisi pengguliran pengguna (Parameter Mulai dan Batasi Kueri).

  • Gunakan penundaan ini untuk memperkenalkan tiga detik ic-beforeSend Acara diproses di server yang realistis untuk meniru server kehidupan nyata.

  • Geolokasi: Gunakan Navigator.Geolocation untuk mengambil garis lintang dan bujur pengguna.

  • Lampiran Data Dinamis: Peringkat data cuaca dalam tabel tanpa memuat ulang halaman.

<tbody id="weatherTableBody">

  <tr ic-append-from="/weather?start=0&limit=10" ic-trigger-on="scrolled-into-view" ic-target="#weatherTableBody" ic-indicator="#indicator">

    <td>Loading more data...</td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

</tbody>

Server memotong data cuaca berdasarkan parameter start dan restriksi yang disediakan oleh klien.

<script> var lat,long; navigator.geolocation.getCurrentPosition(function(position) console.log(position.coords.latitude + ', ' + position.coords.longitude); lat = position.coords.latitude; long = position.coords.longitude; ); $(document).on('beforeAjaxSend.ic', function(event, ajaxSetup, elt) console.log("before ajax send events", ajaxSetup.url); ajaxSetup.url += "&lat=" + lat + "&long=" + long; console.log("before ajax send events", ajaxSetup.url); ); </script> app.get('/weather', async (req, res) => ); }

Cara kerjanya

  1. Tangkap koordinat pengguna (lat, panjang) menggunakan navigator browser.geolocation

  2. Ketika halaman dimuat, 10 baris data cuaca pertama diperoleh dari titik akhir /cuaca.

  3. Saat baris terakhir tabel memasuki tampilan (ic-trigger-on="scrolled-into-view"), secara dinamis mendapatkan lebih banyak baris.

  4. Berdasarkan parameter kueri Mulai dan Batasi, backend mengiris data dan menambahkan baris sampai dataset habis.

Contoh 4: Memahami Acara Intercooler.js

Dalam contoh ini, kami mengeksplorasi cara intercooler.js ic-beforeSend,,,,, ic-successDan ic-error Dapat digunakan untuk meningkatkan interaksi formal melalui visi dinamis dan umpan balik fungsional.

Acara IC-Beforesend:

Acara IC-SACCESS:

  • Setelah pengiriman yang berhasil, kembalikan tombol ke keadaan semula.

  • Perbarui area target (#ResponsEmessage) dan secara dinamis menerima pesan sukses dari server.

Acara IC-ERROR:

Respons API Dinamis:

  • Server mensimulasikan hasil yang berbeda (keberhasilan, kegagalan, kesalahan) berdasarkan input pengguna, memungkinkan pengujian multifungsi perilaku peristiwa.

Activity Listeners memastikan interaksi yang lancar dan penanganan kesalahan yang elegan:

document.addEventListener('ic-beforeSend', function (e) 

  const button = e.target.querySelector('button[type="submit"]');

  button.dataset.originalContent = button.innerHTML;

  button.innerHTML = `<span class="loader"></span> Loading...`;

  button.disabled = true;

);



document.addEventListener('ic-success', function (e) 

  const button = e.target.querySelector('button[type="submit"]');

  button.innerHTML = button.dataset.originalContent;

  button.disabled = false;

  document.getElementById('responseMessage').innerHTML = `<div style="color: green;">$e.detail.response</div>`;

);

Logika Server: Respons Dinamis API Berdasarkan Input Pengguna,

app.post('/mock-api', (req, res) => 

  const  input  = req.body;

  if (input === 'success') 

    return res.status(200).send('Success! Data was processed correctly.');

   else if (input === 'failure') 

    return res.status(400).send('Failure! Invalid input provided.');

   else 

    return res.status(500).send('Error! Something went wrong.');

  

);

Cara kerjanya

  1. Pengguna mengirimkan formulir, memicu ic-beforeSend Menampilkan acara yang memuat pemintal.

  2. Dalam tanggapan server:

Contoh 5: Intercooler.js Polling

Dalam contoh ini, kami mengeksplorasi cara menerapkan polling menggunakan intercooler.js untuk secara teratur melakukan pembaruan cuaca tanpa interaksi pengguna. Akuisisi data real-time ini efektif dan ramah pengguna.

Refresh Data Otomatis:

  • ini ic-poll="2s" Properti menetapkan polling setiap 2 detik untuk memastikan bahwa data cuaca terbaru secara otomatis diambil.

  • ini ic-src=" Menentukan titik akhir yang menyediakan informasi cuaca yang diperbarui.

Pemuatan halaman pemicu:

Dukungan Lokasi Geografis:

Indikator pemuatan:

Integrasi Backend:

Elemen pemungutan suara di HTML: dengan ic-poll Secara otomatis memicu persyaratan untuk mendapatkan data cuaca setiap 2 detik:

<span ic-poll="2s" ic-src=" ic-trigger-on="load">

  Loading weather data...

</span>

Server mendapatkan data cuaca dan secara acak memilih satu untuk menampilkan catatan cuaca:

respons const = tunggu axios.get (`$ base_api_url? latitude = $ lat & latitude = $ long & current_weather = true`); data const = wendep.data.current_weather; if (! Data) menimbulkan kesalahan baru (“data cuaca yang tidak tersedia”); Const WeatherData =; res.send (`

waktu: $ Weatherdata.time
suhu: $ weatherData.Tperature ° C.
kelembaban: $ weatherdata.humity%
Kecepatan angin: $ weatherdata.windspeed km/h

`); ); “data-lang =” Teks/JavaScript “>

app.get(", async (req, res) => 

const response = await axios.get(`$BASE_API_URL?latitude=$lat& longitude=$long¤t_weather=true`);

    const data = response.data.current_weather;

    if (!data) 

      throw new Error('Weather data unavailable');

    



const weatherData = ;

res.send(`

<span>

  <strong>Time:</strong> $weatherData.time <br>

  <strong>Temperature:</strong> $weatherData.temperature°C <br>

  <strong>Humidity:</strong> $weatherData.humidity% <br>

  <strong>Wind Speed:</strong> $weatherData.windSpeed km/h

</span>

`);

);

Cara kerjanya:

Beban data awal:

  • Saat halaman dimuat, lokasi pengguna ditangkap, atau lokasi default digunakan.

  • Backend menyediakan data cuaca untuk garis lintang dan bujur tertentu.

Jajak pendapat real-time:

Pembaruan front-end:

  • Detail cuaca (waktu, suhu, dll.) Diperbarui secara dinamis di wadah tanpa refresh halaman.

Contoh kode lengkap dapat ditemukan di GitHub.

sebagai kesimpulan

Jika kami mengembangkan proyek aplikasi web sederhana dengan beberapa interaksi server dengan pembaruan server, atau menggunakan beberapa API eksternal untuk menyimpan atau mengambil data (seperti Google API), Intercooler.js akan menjadi pilihan terbaik untuk integrasi yang mudah.

rencana pengembangan website



metode pengembangan website

jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website

#Sederhanakan #AJAX #dengan #atribut #HTML

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Website https://beragampengetahuan.com

Related Posts