XMLHTTPREQUEST VS API FETCH UNTUK AJAX

mata teras

Di JavaScript, kedua -dua API dan XMLHTTPREQUEST digunakan untuk membuat permintaan HTTP, tetapi API Fetch umumnya dianggap lebih kuat dan fleksibel kerana ia menggunakan janji, yang memudahkan kod dan pengendalian ralat. Walau bagaimanapun, tidak semua pelayar menyokong API Fetch, terutamanya pelayar yang lebih tua.
xmlhttprequest Walaupun lebih tua dan lebih kompleks kerana kekurangan janji, ia disokong secara meluas dalam semua pelayar dan menghantar kuki secara lalai, yang berguna untuk permintaan pelayan yang memerlukan kuki untuk mengesahkan.
Ambil API bukan pengganti lengkap untuk teknologi Ajax, kerana ia tidak menyokong semua ciri XHR dan beberapa pilihan boleh menjadi rumit. Ia juga tidak menyokong masa tamat, menjadikan pelaksanaan ralat menangkap lebih kompleks.
Walaupun API Fetch mempunyai batasannya, ia adalah arah masa depan untuk membuat permintaan HTTP dalam JavaScript. Walau bagaimanapun, kerana yang agak baru dan sentiasa berubah, pemaju harus menggunakannya dengan berhati-hati pada tahun-tahun akan datang.

Perbandingan perdagangan antara xmlhttprequest dan ambil api

Artikel ini akan membandingkan kebaikan dan keburukan XMLHTTPREQUEST dan pelaksanaan Ajax moden API Fetch. Mac 2019 menandakan ulang tahun ke -20 Ajax (sedikit sebanyak). Pelaksanaan pertama XMLHTTPREQUEST dikeluarkan pada tahun 1999 sebagai komponen ActiveX untuk IE5.0 (jangan tanya). Sebelum ini, terdapat juga cara untuk mengekstrak data dari pelayan tanpa melakukan penyegaran halaman penuh, tetapi mereka sering bergantung pada teknik-teknik yang kekok seperti suntikan atau plugin pihak ketiga. Tujuan utama Microsoft untuk membangunkan XMLHTTPREQUEST adalah untuk menyediakan alternatif kepada pelanggan Mail Outlook berasaskan pelayarnya.

xmlhttprequest bukan standard web sehingga tahun 2006, tetapi ia telah dilaksanakan di kebanyakan pelayar. Pengangkatannya di Gmail (2004) dan Google Maps (2005) membawa kepada artikel Jesse James Garrett "Ajax: Pendekatan Baru untuk Aplikasi Web" pada tahun 2005. Istilah baru ini menjadikan pemaju lebih fokus.

dari Ajax ke Ajax

AJAX adalah singkatan untuk JavaScript dan XML Asynchronous. "Async" pasti betul, tetapi:

Mungkin JavaScript, walaupun VBScript dan Flash juga pilihan.
muatan tidak perlu XML, walaupun XML sangat popular pada masa itu. Sebarang format data boleh digunakan, dan pada masa kini, JSON biasanya lebih disukai.

Kami kini menggunakan "Ajax" sebagai istilah umum untuk mana -mana proses klien yang secara amnya merujuk kepada mana -mana proses klien yang mendapat data dari pelayan dan mengemas kini DOM secara dinamik tanpa perlu melakukan penyegaran halaman penuh. AJAX adalah teknologi teras kebanyakan aplikasi web dan aplikasi halaman tunggal (SPA).

pemahaman yang mendalam tentang xmlhttprequest

Kod JavaScript berikut menunjukkan penggunaan xmlhttprequest (biasanya disingkat sebagai xhr) untuk mengeluarkan permintaan http asas untuk

https://www.php.cn/link/f589a241414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414

<code class="language-javascript">let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();</code>

Objek XMLHTTPREQUEST mempunyai banyak pilihan, acara, dan sifat respons lain. Sebagai contoh, masa tamat dalam milisaat boleh ditetapkan dan dikesan:

<code class="language-javascript">// 设置超时
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);</code>

Acara Kemajuan boleh melaporkan muat naik fail jangka panjang:

<code class="language-javascript">// 上传进度
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};</code>

Bilangan pilihan dalam

boleh mempesonakan, dan terdapat beberapa ketidakkonsistenan silang penyemak imbas dalam versi terdahulu XMLHTTPREQUEST. Oleh itu, kebanyakan perpustakaan dan rangka kerja menyediakan fungsi pembungkus Ajax untuk mengendalikan kerumitan, seperti kaedah jQuery.ajax ():

<code class="language-javascript">// jQuery Ajax
$.ajax('https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));</code>

cepat belajar tentang mengambil

Ambil API adalah alternatif moden untuk XMLHTTPREQUEST. Header, permintaan, dan antara muka yang biasa memberikan konsistensi, sementara janji membolehkan lebih mudah chaining dan async/menunggu tanpa panggilan balik. Contoh XHR di atas boleh ditukar kepada kod berasaskan Fetch yang lebih mudah, yang bahkan dapat menghuraikan JSON yang dikembalikan:

<code class="language-javascript">fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );</code>

Ambil mudah, elegan, mudah difahami dan digunakan secara meluas dalam pekerja perkhidmatan PWA. Mengapa tidak menggunakannya dan bukannya XMLHTTPREQUEST kuno?

Malangnya, pembangunan web tidak begitu mudah. Ambil belum menggantikan teknologi Ajax sepenuhnya ...

Sokongan penyemak imbas

Ambil API disokong dengan baik, tetapi gagal dalam semua versi Internet Explorer. Pengguna yang menggunakan versi Chrome, Firefox, dan Safari sebelum 2017 juga mungkin mengalami masalah. Pengguna ini hanya boleh membuat sebahagian kecil daripada pangkalan pengguna anda ... atau mungkin pelanggan utama. Pastikan anda menyemak sebelum memulakan pengekodan!

Di samping itu, API Fetch agak baru dan menerima perubahan yang lebih berterusan daripada objek XHR matang. Kemas kini ini tidak mungkin memecahkan kod, tetapi beberapa penyelenggaraan dijangka diperlukan pada tahun -tahun akan datang.

cookies tidak termasuk secara lalai

Tidak seperti XMLHTTPREQUEST, tidak semua pelaksanaan mengambil kuki, jadi pengesahan aplikasi anda mungkin gagal. Masalah ini dapat diselesaikan dengan mengubah pilihan inisialisasi yang diluluskan dalam parameter kedua, contohnya:

<code class="language-javascript">fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    {
      method: 'GET',
      credentials: 'same-origin'
    }
  )</code>

Ralat

tidak akan ditolak

Mengejutkan, kesilapan HTTP (seperti 404 Page tidak dijumpai atau 500 Ralat Pelayan Dalaman) tidak menyebabkan janji untuk ditolak; Ia biasanya menghidupkan dan menetapkan status respons.ok kepada palsu.

diskaun berlaku hanya jika permintaan tidak dapat diselesaikan (seperti kegagalan rangkaian). Ini akan menjadikan pelaksanaan ralat menangkap lebih kompleks.

tamat masa tidak disokong

FETCH tidak menyokong masa tamat, dan permintaan akan berlangsung masa pelayar yang dipilih. Kod lebih lanjut diperlukan untuk membungkus pengambilan dalam janji lain, contohnya:

<code class="language-javascript">// 带有超时的 fetch
function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  });
}</code>

... atau mungkin menggunakan janji.race (), yang menghancurkan apabila mengambil atau tamat masa selesai, contohnya:

<code class="language-javascript">Promise.race([
  fetch('http://url', { method: 'GET' }),
  new Promise(resolve => setTimeout(resolve, 3000))
])
  .then(response => console.log(response))</code>

abort mengambil

Permintaan XHR boleh berakhir dengan mudah menggunakan xhr.abort () dan jika diperlukan, fungsi XHR.onabort boleh digunakan untuk mengesan peristiwa tersebut.

Selama bertahun -tahun, membatalkan pengambilan adalah mustahil, tetapi kini disokong dalam pelayar yang melaksanakan API AbortController. Ini mencetuskan isyarat yang boleh diserahkan kepada objek inisialisasi:

<code class="language-javascript">let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();</code>

mengambil boleh digugurkan dengan memanggil controller.abort (); Janji akan ditolak, jadi fungsi .catch () akan dipanggil.

tiada kemajuan

Pada masa penulisan, Fetch tidak menyokong peristiwa kemajuan. Oleh itu, status fail muat naik atau penyerahan bentuk besar yang sama tidak dapat dilaporkan.

xmlhttprequest with Fetch API?

Akhir masa, pilihannya adalah pada anda ... Kecuali permohonan anda mempunyai pelanggan IE yang perlu memuat naik bar kemajuan.

Untuk panggilan AJAX yang lebih mudah, XMLHTTPREQUEST adalah tahap yang lebih rendah, lebih kompleks, dan anda perlu membungkus fungsi tersebut. Malangnya, sebaik sahaja anda mula memikirkan kerumitan masa tamat, hubungi pengguguran, dan penangkapan kesilapan, ambil juga perlu membungkus fungsi.

Anda boleh memilih polyfill yang digunakan bersamaan dengan Polyfill Janji, jadi anda boleh menulis kod FETCH dalam IE. Walau bagaimanapun, XHR digunakan sebagai sandaran;

ambil masa depan. Walau bagaimanapun, API agak baru, ia tidak menawarkan semua ciri XHR, dan beberapa pilihan adalah rumit. Gunakannya dengan berhati -hati pada tahun -tahun akan datang.

FAQs (FAQs) Mengenai XMLHTTPREQUEST dan Ambil Apis

Apakah perbezaan utama antara XMLHTTPREQUEST dan Ambil API?

xmlhttprequest dan ambil API kedua -duanya digunakan untuk membuat permintaan HTTP dalam JavaScript. Walau bagaimanapun, mereka berbeza dalam beberapa cara. API Fetch adalah teknologi baru yang dianggap lebih kuat dan fleksibel. Ia mengembalikan janji yang menyelesaikan permintaan itu, sama ada ia berjaya atau tidak. Ambil juga memberikan definisi umum permintaan dan objek tindak balas. Sebaliknya, XMLHTTPREQUEST lebih tua dan tidak menggunakan janji, yang boleh menjadikan kod itu lebih kompleks dan sukar dikekalkan. Ia tidak mempunyai definisi biasa untuk objek permintaan dan tindak balas.

Adakah API Fetch lebih baik daripada XMLHTTPREQUEST?

Ambil API sering dianggap sebagai pilihan yang lebih baik untuk membuat permintaan HTTP di JavaScript kerana penggunaan janji. Janji menjadikan kod lebih ringkas, lebih mudah dibaca, dan juga membuat pengendalian ralat lebih mudah. Fungsi API Fetch juga lebih kuat dan fleksibel daripada XMLHTTPREQUEST. Walau bagaimanapun, XMLHTTPREQUEST masih digunakan secara meluas dan disokong dan mungkin menjadi pilihan yang lebih baik dalam beberapa kes, seperti ketika anda perlu menyokong pelayar yang lebih tua yang tidak menyokong API FETCH.

Bolehkah API mengambil XMLHTTPREQUEST?

Ya, API Fetch boleh menggantikan XMLHTTPREQUEST dalam JavaScript yang digunakan untuk membuat permintaan HTTP. API Fetch adalah teknologi yang lebih baru dan mempunyai set ciri yang lebih kuat dan fleksibel. Ia menggunakan janji, yang menjadikan kod lebih ringkas, lebih mudah dibaca, dan juga membuat pengendalian ralat lebih mudah. Walau bagaimanapun, XMLHTTPREQUEST masih digunakan secara meluas dan disokong dan mungkin menjadi pilihan yang lebih baik dalam beberapa kes, seperti ketika anda perlu menyokong pelayar yang lebih tua yang tidak menyokong API FETCH.

Apakah kelebihan menggunakan API Fetch?

Ambil API mempunyai beberapa kelebihan berbanding XMLHTTPREQUEST. Ia menggunakan janji, yang menjadikan kod lebih ringkas, lebih mudah dibaca, dan juga membuat pengendalian ralat lebih mudah. API Fetch juga mempunyai set ciri yang lebih kuat dan fleksibel, termasuk definisi umum permintaan dan objek tindak balas. Ia juga membolehkan anda membuat permintaan kepada sumber lain, sementara XMLHTTPREQUEST tidak.

Apakah kelemahan menggunakan API Fetch?

Salah satu kelemahan utama menggunakan API Fetch ialah tidak semua pelayar menyokongnya. Khususnya, pelayar yang lebih tua mungkin tidak menyokong API FETCH. Dalam kes ini, anda mungkin perlu menggunakan XMLHTTPREQUEST atau POLYFILL. Satu lagi kelemahan ialah API Fetch tidak menghantar kuki secara lalai, jadi jika anda ingin menghantar kuki, anda perlu menetapkan pilihan kelayakan secara manual untuk "memasukkan".

Apakah kelebihan menggunakan xmlhttprequest?

xmlhttprequest adalah teknologi yang terbukti untuk membuat permintaan HTTP dalam JavaScript. Ia disokong secara meluas dan boleh digunakan dalam semua pelayar. Tidak seperti API Fetch, XMLHTTPREQUEST juga menghantar kuki secara lalai. Ini boleh menjadi kelebihan dalam beberapa kes, seperti ketika anda membuat permintaan kepada pelayan yang memerlukan kuki untuk mengesahkan.

Apakah kelemahan menggunakan xmlhttprequest?

xmlhttprequest tidak menggunakan janji, yang boleh menjadikan kod itu lebih kompleks dan sukar untuk dikekalkan. Ia juga tidak mempunyai definisi umum mengenai permintaan dan objek tindak balas dan tidak membenarkan anda membuat permintaan kepada sumber lain. XMLHTTPREQUEST juga dianggap agak ketinggalan zaman berbanding dengan teknologi baru seperti API FETCH.

Bagaimana untuk memilih XMLHTTPREQUEST dan Ambil API?

Memilih XMLHTTPREQUEST dan Ambil API bergantung kepada keperluan khusus anda dan penyemak imbas yang anda perlukan untuk menyokong. Jika anda perlu menyokong pelayar yang lebih tua yang tidak menyokong API Fetch, XMLHTTPREQUEST mungkin pilihan yang lebih baik. Walau bagaimanapun, jika anda menggunakan penyemak imbas yang lebih baru dan ingin memanfaatkan sintaks API yang lebih baik, sintaks yang lebih moden dan set ciri yang lebih kuat dan fleksibel, API Fetch akan menjadi pilihan yang lebih baik.

Bolehkah saya menggunakan kedua -dua xmlhttprequest dan mengambil API dalam projek yang sama?

Ya, anda boleh menggunakan kedua -dua XMLHTTPREQUEST dan mengambil API dalam projek yang sama. Anda boleh memilih untuk menggunakan XMLHTTPREQUEST untuk tugas -tugas tertentu dan mengambil API untuk tugas -tugas lain berdasarkan keperluan khusus anda dan penyemak imbas yang anda perlukan untuk menyokong. Walau bagaimanapun, ia sering disyorkan untuk melekat pada salah satu daripada ini untuk konsistensi dan kemudahan penyelenggaraan.

Adakah terdapat alternatif XMLHTTPREQUEST dan mengambil API untuk membuat permintaan HTTP dalam JavaScript?

Ya, terdapat beberapa alternatif untuk XMLHTTPREQUEST dan mengambil API untuk membuat permintaan HTTP di JavaScript. Ini termasuk perpustakaan seperti Axios, JQuery's $ .ajax, dan superagent. Perpustakaan ini menyediakan tahap antara muka yang lebih tinggi untuk membuat permintaan HTTP dan menyediakan ciri -ciri dan kemudahan tambahan berbanding dengan XMLHTTPREQUEST dan mengambil API.

Atas ialah kandungan terperinci XMLHTTPREQUEST VS API FETCH UNTUK AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!