Bagaimana saya bisa mendapatkan data dari situs web lain di html?

Halaman web terdiri dari halaman HTML dan (biasanya) berbagai file lain, seperti stylesheet, skrip, dan gambar. Model dasar pemuatan halaman di Web adalah browser Anda membuat satu atau lebih permintaan HTTP ke server untuk file yang diperlukan untuk menampilkan halaman, dan server merespons dengan file yang diminta. Jika Anda mengunjungi halaman lain, browser meminta file baru, dan server meresponsnya

Model ini bekerja dengan sangat baik untuk banyak situs. Tetapi pertimbangkan situs web yang sangat digerakkan oleh data. Misalnya, situs web perpustakaan seperti Perpustakaan Umum Vancouver. Antara lain Anda bisa memikirkan situs seperti ini sebagai antarmuka pengguna ke database. Itu mungkin membiarkan Anda mencari genre buku tertentu, atau mungkin menunjukkan rekomendasi untuk buku yang mungkin Anda sukai, berdasarkan buku yang Anda pinjam sebelumnya. Saat Anda melakukan ini, perlu memperbarui halaman dengan kumpulan buku baru untuk ditampilkan. Tetapi perhatikan bahwa sebagian besar konten halaman — termasuk item seperti header halaman, sidebar, dan footer — tetap sama

Masalah dengan model tradisional di sini adalah kita harus mengambil dan memuat seluruh halaman, meskipun kita hanya perlu memperbarui satu bagian saja. Ini tidak efisien dan dapat mengakibatkan pengalaman pengguna yang buruk

Jadi, alih-alih model tradisional, banyak situs web menggunakan API JavaScript untuk meminta data dari server dan memperbarui konten halaman tanpa memuat halaman. Jadi, saat pengguna mencari produk baru, browser hanya meminta data yang diperlukan untuk memperbarui halaman — kumpulan buku baru yang akan ditampilkan, misalnya

API utama di sini adalah Fetch API. Ini memungkinkan JavaScript berjalan di halaman untuk membuat permintaan HTTP ke server untuk mengambil sumber daya tertentu. Saat server menyediakannya, JavaScript dapat menggunakan data tersebut untuk memperbarui halaman, biasanya dengan menggunakan API manipulasi DOM. Data yang diminta seringkali adalah JSON, yang merupakan format yang bagus untuk mentransfer data terstruktur, tetapi bisa juga berupa HTML atau hanya teks

Ini adalah pola umum untuk situs berbasis data seperti Amazon, YouTube, eBay, dan sebagainya. Dengan model ini

• Pembaruan halaman jauh lebih cepat dan Anda tidak perlu menunggu halaman disegarkan, artinya situs terasa lebih cepat dan lebih responsif
• Lebih sedikit data yang diunduh pada setiap pembaruan, yang berarti lebih sedikit bandwidth yang terbuang. Ini mungkin bukan masalah besar pada desktop pada koneksi broadband, tetapi ini adalah masalah besar pada perangkat seluler dan di negara-negara yang tidak memiliki layanan internet cepat di mana-mana.

Catatan. Pada awalnya, teknik umum ini dikenal dengan Asynchronous JavaScript and XML (Ajax), karena cenderung meminta data XML. Ini biasanya tidak terjadi akhir-akhir ini (Anda akan lebih cenderung meminta JSON), tetapi hasilnya tetap sama, dan istilah "Ajax" masih sering digunakan untuk menjelaskan tekniknya.

Untuk lebih mempercepat, beberapa situs juga menyimpan aset dan data di komputer pengguna saat pertama kali diminta, yang berarti bahwa pada kunjungan berikutnya mereka menggunakan versi lokal alih-alih mengunduh salinan baru setiap kali laman dimuat pertama kali. Konten hanya dimuat ulang dari server setelah diperbarui

Mari telusuri beberapa contoh Fetch API

Untuk contoh ini, kami akan meminta data dari beberapa file teks yang berbeda dan menggunakannya untuk mengisi area konten

Serangkaian file ini akan bertindak sebagai basis data palsu kami; . Namun, di sini, kami ingin tetap sederhana dan berkonsentrasi pada bagian sisi klien ini

Untuk memulai contoh ini, buat salinan lokal dari fetch-start. html dan empat file teks — ayat1. txt, ayat2. txt, ayat3. txt, dan ayat4. txt — di direktori baru di komputer Anda. Dalam contoh ini, kami akan mengambil ayat puisi yang berbeda (yang mungkin Anda kenali dengan baik) saat dipilih di menu drop-down

Tepat di dalam elemen <script>, tambahkan kode berikut. Ini menyimpan referensi ke elemen <select> dan

function updateDisplay(verse) {

}

function updateDisplay(verse) {

}

const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');

verseChoose.addEventListener('change', () => {
  const verse = verseChoose.value;
  updateDisplay(verse);
});

Mari kita definisikan fungsi

function updateDisplay(verse) {

}

function updateDisplay(verse) {

}

Kami akan memulai fungsi kami dengan membuat URL relatif yang menunjuk ke file teks yang ingin kami muat, karena kami akan membutuhkannya nanti. Nilai elemen <select> setiap saat sama dengan teks di dalam

function updateDisplay(verse) {

}

Namun, server web cenderung peka terhadap huruf besar-kecil, dan nama file tidak memiliki spasi di dalamnya. Untuk mengonversi "Ayat 1" menjadi "ayat 1. txt" kita perlu mengonversi V menjadi huruf kecil, menghapus spasi, dan menambahkan. txt di bagian akhir. Ini dapat dilakukan dengan

function updateDisplay(verse) {

}

function updateDisplay(verse) {

}

function updateDisplay(verse) {

}

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

Akhirnya kita siap menggunakan Fetch API

// Call `fetch()`, passing in the URL.
fetch(url)
  // fetch() returns a promise. When we have received a response from the server,
  // the promise's `then()` handler is called with the response.
  .then((response) => {
    // Our handler throws an error if the request did not succeed.
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // Otherwise (if the response succeeded), our handler fetches the response
    // as text by calling response.text(), and immediately returns the promise
    // returned by `response.text()`.
    return response.text();
  })
  // When response.text() has succeeded, the `then()` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then((text) => poemDisplay.textContent = text)
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);

Ada cukup banyak untuk dibongkar di sini

Pertama, titik masuk ke Fetch API adalah fungsi global yang disebut

function updateDisplay(verse) {

}

Selanjutnya,

function updateDisplay(verse) {

}

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

function updateDisplay(verse) {

}

Jadi karena

function updateDisplay(verse) {

}

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

Ternyata

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

function updateDisplay(verse) {

}

Akhirnya, kami merangkai penangan

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

Satu masalah dengan contoh yang berdiri adalah bahwa itu tidak akan menampilkan puisi apa pun saat pertama kali dimuat. Untuk memperbaikinya, tambahkan dua baris berikut di bagian bawah kode Anda (tepat di atas penutup

// Call `fetch()`, passing in the URL.
fetch(url)
  // fetch() returns a promise. When we have received a response from the server,
  // the promise's `then()` handler is called with the response.
  .then((response) => {
    // Our handler throws an error if the request did not succeed.
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // Otherwise (if the response succeeded), our handler fetches the response
    // as text by calling response.text(), and immediately returns the promise
    // returned by `response.text()`.
    return response.text();
  })
  // When response.text() has succeeded, the `then()` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then((text) => poemDisplay.textContent = text)
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

Melayani contoh Anda dari server

Browser modern tidak akan menjalankan permintaan HTTP jika Anda hanya menjalankan contoh dari file lokal. Ini karena batasan keamanan (untuk informasi lebih lanjut tentang keamanan web, baca Keamanan situs web)

Untuk menyiasatinya, kita perlu menguji contoh dengan menjalankannya melalui server web lokal. Untuk mengetahui cara melakukannya, baca panduan kami untuk menyiapkan server pengujian lokal

Dalam contoh ini kami telah membuat situs sampel bernama The Can Store — ini adalah supermarket fiktif yang hanya menjual makanan kaleng. Anda dapat menemukan contoh ini langsung di GitHub, dan melihat kode sumbernya

Secara default, situs menampilkan semua produk, namun Anda dapat menggunakan kontrol formulir di kolom sebelah kiri untuk memfilternya menurut kategori, atau istilah pencarian, atau keduanya

Ada cukup banyak kode rumit yang berurusan dengan pemfilteran produk berdasarkan kategori dan istilah pencarian, memanipulasi string sehingga data ditampilkan dengan benar di UI, dll. Kami tidak akan membahas semuanya di artikel, tetapi Anda dapat menemukan komentar ekstensif dalam kode (lihat can-script. js)

Namun, kami akan menjelaskan kode Fetch

Blok pertama yang menggunakan Fetch dapat ditemukan di awal JavaScript

fetch('products.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

Fungsi

function updateDisplay(verse) {

}

// Call `fetch()`, passing in the URL.
fetch(url)
  // fetch() returns a promise. When we have received a response from the server,
  // the promise's `then()` handler is called with the response.
  .then((response) => {
    // Our handler throws an error if the request did not succeed.
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // Otherwise (if the response succeeded), our handler fetches the response
    // as text by calling response.text(), and immediately returns the promise
    // returned by `response.text()`.
    return response.text();
  })
  // When response.text() has succeeded, the `then()` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then((text) => poemDisplay.textContent = text)
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);

// Call `fetch()`, passing in the URL.
fetch(url)
  // fetch() returns a promise. When we have received a response from the server,
  // the promise's `then()` handler is called with the response.
  .then((response) => {
    // Our handler throws an error if the request did not succeed.
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // Otherwise (if the response succeeded), our handler fetches the response
    // as text by calling response.text(), and immediately returns the promise
    // returned by `response.text()`.
    return response.text();
  })
  // When response.text() has succeeded, the `then()` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then((text) => poemDisplay.textContent = text)
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);

Di dalam fungsi ini kita

• periksa apakah server tidak mengembalikan kesalahan (seperti

  // Call `fetch()`, passing in the URL.
  fetch(url)
    // fetch() returns a promise. When we have received a response from the server,
    // the promise's `then()` handler is called with the response.
    .then((response) => {
      // Our handler throws an error if the request did not succeed.
      if (!response.ok) {
        throw new Error(`HTTP error: ${response.status}`);
      }
      // Otherwise (if the response succeeded), our handler fetches the response
      // as text by calling response.text(), and immediately returns the promise
      // returned by `response.text()`.
      return response.text();
    })
    // When response.text() has succeeded, the `then()` handler is called with
    // the text, and we copy it into the `poemDisplay` box.
    .then((text) => poemDisplay.textContent = text)
    // Catch any errors that might happen, and display a message
    // in the `poemDisplay` box.
    .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);
  

  5). Jika ya, kami membuang kesalahan
• hubungi

  // Call `fetch()`, passing in the URL.
  fetch(url)
    // fetch() returns a promise. When we have received a response from the server,
    // the promise's `then()` handler is called with the response.
    .then((response) => {
      // Our handler throws an error if the request did not succeed.
      if (!response.ok) {
        throw new Error(`HTTP error: ${response.status}`);
      }
      // Otherwise (if the response succeeded), our handler fetches the response
      // as text by calling response.text(), and immediately returns the promise
      // returned by `response.text()`.
      return response.text();
    })
    // When response.text() has succeeded, the `then()` handler is called with
    // the text, and we copy it into the `poemDisplay` box.
    .then((text) => poemDisplay.textContent = text)
    // Catch any errors that might happen, and display a message
    // in the `poemDisplay` box.
    .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);
  

  _6 sebagai tanggapan. Ini akan mengambil data sebagai objek JSON. Kami mengembalikan janji yang dikembalikan oleh

  // Call `fetch()`, passing in the URL.
  fetch(url)
    // fetch() returns a promise. When we have received a response from the server,
    // the promise's `then()` handler is called with the response.
    .then((response) => {
      // Our handler throws an error if the request did not succeed.
      if (!response.ok) {
        throw new Error(`HTTP error: ${response.status}`);
      }
      // Otherwise (if the response succeeded), our handler fetches the response
      // as text by calling response.text(), and immediately returns the promise
      // returned by `response.text()`.
      return response.text();
    })
    // When response.text() has succeeded, the `then()` handler is called with
    // the text, and we copy it into the `poemDisplay` box.
    .then((text) => poemDisplay.textContent = text)
    // Catch any errors that might happen, and display a message
    // in the `poemDisplay` box.
    .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);
  

  7

Selanjutnya kita meneruskan fungsi ke dalam metode

verse = verse.replace(' ', '').toLowerCase();
const url = `${verse}.txt`;

// Call `fetch()`, passing in the URL.
fetch(url)
  // fetch() returns a promise. When we have received a response from the server,
  // the promise's `then()` handler is called with the response.
  .then((response) => {
    // Our handler throws an error if the request did not succeed.
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // Otherwise (if the response succeeded), our handler fetches the response
    // as text by calling response.text(), and immediately returns the promise
    // returned by `response.text()`.
    return response.text();
  })
  // When response.text() has succeeded, the `then()` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then((text) => poemDisplay.textContent = text)
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);

Untuk menangani kesalahan, kami merantai blok

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

Namun, situs web lengkap akan menangani kesalahan ini dengan lebih baik dengan menampilkan pesan di layar pengguna dan mungkin menawarkan opsi untuk memperbaiki situasi tersebut, tetapi kami tidak memerlukan apa pun selain

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

Anda dapat menguji kasus kegagalan sendiri

1. Buat salinan lokal dari file contoh
2. Jalankan kode melalui server web (seperti dijelaskan di atas, di )
3. Ubah jalur ke file yang sedang diambil, menjadi sesuatu seperti 'product. json' (pastikan salah eja)
4. Sekarang muat file indeks di browser Anda (melalui

   updateDisplay('Verse 1');
   verseChoose.value = 'Verse 1';
   

   5) dan lihat di konsol pengembang browser Anda. Anda akan melihat pesan yang mirip dengan "Masalah pengambilan. kesalahan HTTP. 404"

Blok Ambil kedua dapat ditemukan di dalam fungsi

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.blob();
  })
  .then((blob) => showProduct(blob, product))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

Ini bekerja dengan cara yang hampir sama seperti yang sebelumnya, kecuali bahwa alih-alih menggunakan

// Call `fetch()`, passing in the URL.
fetch(url)
  // fetch() returns a promise. When we have received a response from the server,
  // the promise's `then()` handler is called with the response.
  .then((response) => {
    // Our handler throws an error if the request did not succeed.
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    // Otherwise (if the response succeeded), our handler fetches the response
    // as text by calling response.text(), and immediately returns the promise
    // returned by `response.text()`.
    return response.text();
  })
  // When response.text() has succeeded, the `then()` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then((text) => poemDisplay.textContent = text)
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

Setelah kami berhasil menerima blob kami, kami menyebarkannya ke fungsi

updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';

Terkadang, terutama dalam kode lama, Anda akan melihat API lain bernama

fetch('products.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

fetch('products.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

fetch('products.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

fetch('products.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

const request = new XMLHttpRequest();

try {
  request.open('GET', 'products.json');

  request.responseType = 'json';

  request.addEventListener('load', () => initialize(request.response));
  request.addEventListener('error', () => console.error('XHR error'));

  request.send();

} catch (error) {
  console.error(`XHR error ${request.status}`);
}

Ada lima tahap untuk ini

1. Buat objek

   fetch('products.json')
     .then((response) => {
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
       return response.json();
     })
     .then((json) => initialize(json))
     .catch((err) => console.error(`Fetch problem: ${err.message}`));
   

   _0 baru
2. Panggil metode

   fetch('products.json')
     .then((response) => {
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
       return response.json();
     })
     .then((json) => initialize(json))
     .catch((err) => console.error(`Fetch problem: ${err.message}`));
   

   _5 untuk menginisialisasinya
3. Tambahkan pendengar acara ke acara

   fetch('products.json')
     .then((response) => {
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
       return response.json();
     })
     .then((json) => initialize(json))
     .catch((err) => console.error(`Fetch problem: ${err.message}`));
   

   _6, yang aktif saat respons berhasil diselesaikan. Di pendengar kami memanggil

   // Call `fetch()`, passing in the URL.
   fetch(url)
     // fetch() returns a promise. When we have received a response from the server,
     // the promise's `then()` handler is called with the response.
     .then((response) => {
       // Our handler throws an error if the request did not succeed.
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
       // Otherwise (if the response succeeded), our handler fetches the response
       // as text by calling response.text(), and immediately returns the promise
       // returned by `response.text()`.
       return response.text();
     })
     // When response.text() has succeeded, the `then()` handler is called with
     // the text, and we copy it into the `poemDisplay` box.
     .then((text) => poemDisplay.textContent = text)
     // Catch any errors that might happen, and display a message
     // in the `poemDisplay` box.
     .catch((error) => poemDisplay.textContent = `Could not fetch verse: ${error}`);
   

   _9 dengan data
4. Tambahkan pendengar acara ke acara

   fetch('products.json')
     .then((response) => {
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
       return response.json();
     })
     .then((json) => initialize(json))
     .catch((err) => console.error(`Fetch problem: ${err.message}`));
   

   _8, yang diaktifkan saat permintaan mengalami kesalahan
5. Kirim permintaan

Kami juga harus membungkus semuanya dalam percobaan. tangkap blok, untuk menangani kesalahan apa pun yang dilemparkan oleh

fetch('products.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.blob();
  })
  .then((blob) => showProduct(blob, product))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

Mudah-mudahan menurut Anda Fetch API merupakan peningkatan dari ini. Secara khusus, lihat bagaimana kita harus menangani kesalahan di dua tempat yang berbeda

Artikel ini menunjukkan cara mulai menggunakan Fetch untuk mengambil data dari server

Namun ada banyak topik berbeda yang dibahas dalam artikel ini, yang hanya benar-benar menggores permukaan. Untuk detail lebih lanjut tentang subjek ini, coba artikel berikut

Bisakah Anda mengikis data dari situs web mana pun?

Bagaimana cara menarik data dari situs web ke situs web lain?

Bagaimana cara mengikis data dari beberapa situs web?

Bagaimana cara mendapatkan data dari URL?