Panggilan AJAX dalam JavaScript dengan contoh

Programming

Oleh Vincy Terakhir diedit pada 27 September 2022.

Ini satu Solusi JavaScript murni untuk menggunakan AJAX tanpa jQuery atau plugin pihak ketiga lainnya.

AJAX adalah cara untuk mengirim permintaan ke server secara asinkron dari skrip sisi klien. Secara umum, perbarui UI dengan respons server tanpa memuat ulang halaman.

Saya menyediakan dua metode berbeda untuk memanggil backend (PHP) dengan JavaScript AJAX.

  1. melalui XMLHTTPRequest.
  2. Menggunakan JavaScript pergi dan membawa prototipe

Tutorial ini membuat contoh sederhana dari kedua metode. Ini akan menjadi awal yang mudah bagi pemula dalam pemrograman AJAX. Itu hanya membaca isi atxt Sebuah file yang terletak di server melalui AJAX JavaScript.

Jika Anda mencari beberapa kode untuk menggunakan jQuery AJAX, kami juga memiliki beberapa contoh.

Ajax JavaScript

Panggilan AJAX melalui XMLHTTPRequest

Contoh ini menggunakan XMLHttpRequest dalam JavaScript untuk mengirim permintaan AJAX ke server.

Skrip berikut memiliki siklus hidup AJAX berikut untuk menerima respons dari server.

  1. sampel XMLHttpRequest Kelas
  2. Ini mendefinisikan fungsi panggilan balik untuk manajemen onreadystatechange Peristiwa.
  3. Ini mempersiapkan permintaan AJAX dengan mengatur metode permintaan, titik akhir server, dan banyak lagi.
  4. Memanggil send() dengan referensi XMLHttpRequest contoh, contoh

Pada onreadystatechange acara, dapat membaca respons server. Kode ini memeriksa respons HTTP dari server dan memperbarui UI tanpa menyegarkan halaman.

Selama pemrosesan permintaan AJAX, ini menampilkan ikon pemuat hingga UI diperbarui dengan data respons AJAX.

ajax-xhr.php

<!DOCTYPE html>
<html>
<head>
<title>How to make an AJAX Call in JavaScript with Example</title>
<link rel="stylesheet" href="https://phppot.com/javascript/ajax-javascript/style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
<style>
#loader-icon {
    display: none;
}
</style>
</head>
<body>
    <div class="phppot-container">
        <h1>How to make an AJAX Call in JavaScript</h1>
        <p>This example uses plain JavaScript to make an AJAX call.</p>
        <p>It uses good old JavaScript's XMLHttpRequest. No dependency
            or libraries!</p>
        <div class="row">
            <button onclick="loadDocument()">AJAX Call</button>

            <div id="loader-icon">
                <img src="loader.gif" />
            </div>
        </div>
        <div id='ajax-example'></div>
        <script>
    function loadDocument() {
        document.getElementById("loader-icon").style.display = 'inline-block';
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = function() {
            if (xmlHttpRequest.readyState == XMLHttpRequest.DONE) {
               document.getElementById("loader-icon").style.display = 'none';
               if (xmlHttpRequest.status == 200) {
                   // on success get the response text and
                   // insert it into the ajax-example DIV id.
                   document.getElementById("ajax-example").innerHTML = xmlHttpRequest.responseText;
               }
               else if (xmlHttpRequest.status == 400) {
                   // unable to load the document
                  alert('Status 400 error - unable to load the document.');
               }
               else {
                   alert('Unexpected error!');
               }
            }
        };
        xmlHttpRequest.open("GET", "ajax-example.txt", true);
        xmlHttpRequest.send();
    }
</script>

</body>
</html>

Menggunakan JavaScript pergi dan membawa prototipe

Contoh ini memanggil JavaScript pergi dan membawa() metode dengan meneruskan URL titik akhir server sebagai argumennya.

Metode ini mengembalikan respons server sebagai objek. Objek respons ini berisi status dan data respons yang dikembalikan oleh server.

Seperti pada metode pertama, jikajawaban.status” Ini adalah 200. Jika demikian, itu memperbarui UI dengan respons server tanpa memuat ulang halaman.

ajax-fetch.php

<!DOCTYPE html>
<html>
<head>
<title>How to make an AJAX Call in JavaScript using Fetch API with
    Example</title>
<link rel="stylesheet" href="https://phppot.com/javascript/ajax-javascript/style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
<style>
#loader-icon {
    display: none;
}
</style>
</head>
<body>
    <div class="phppot-container">
        <h1>How to make an AJAX Call in JavaScript using Fetch</h1>
        <p>This example uses core JavaScript's Fetch API to make an AJAX
            call.</p>
        <p>JavaScript's Fetch API is a good alternative for
            XMLHttpRequest. No dependency or libraries! It has wide
            support with all major browsers.</p>
        <div class="row">
            <button onclick="fetchDocument()">AJAX Call with Fetch</button>

            <div id="loader-icon">
                <img src="loader.gif" />
            </div>
        </div>
        <div id='ajax-example'></div>

        <script>

        async function fetchDocument() {
            let response = await fetch('ajax-example.txt');
            document.getElementById("loader-icon").style.display = 'inline-block';
            console.log(response.status);
            console.log(response.statusText);
            if (response.status === 200) {
                document.getElementById("loader-icon").style.display = 'none';
                let data = await response.text();
                document.getElementById("ajax-example").innerHTML = data;
            }
        }
</script>

</body>
</html>

Contoh skenario kasus penggunaan AJAX dalam aplikasi

AJAX adalah alat yang ampuh. Ini harus digunakan secara efektif di mana pun diperlukan.

Di bawah ini adalah contoh lengkap skenario penggunaan AJAX dalam suatu aplikasi.

  1. Untuk memperbarui jendela obrolan dengan pesan terbaru.
  2. Untuk mendapatkan notifikasi terbaru di situs jejaring sosial.
  3. Untuk memperbarui papan peringkat.
  4. Untuk memuat peristiwa terbaru dalam gulir tanpa memuat ulang halaman.

Pada artikel sebelumnya, kita melihat cara memposting acara di kalender menggunakan skrip jQuery AJAX.
Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

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