Berbagi teknologi

Apa itu AJAX? Format sintaksis asli? Apa perbedaan antara jQuery yang menyediakan paket AJAX?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

ajax nama lengkap JavaScript dan XML Asinkron (asinkron Bahasa Indonesia: JavaScript Dan Bahasa Indonesia) 

Bahasa Indonesia: AJAXIni adalah teknologi pengembangan web untuk membuat aplikasi web interaktif.Ketergantungan yang paling inti adalah objek XMLHttpRequest yang disediakan oleh browser Bahasa Indonesia: Bahasa Indonesia: HTTP Meminta dan menerima Bahasa Indonesia: Bahasa Indonesia: HTTP tanggapan. Mencapai interaksi dengan server tanpa menyegarkan halaman.

Format sintaksis AJAX asli:

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
Cara menggunakan ajax:
1. Buat objek XMLHttpRequest
2. Gunakan metode terbuka untuk menentukan alamat, jenis dan metode yang akan diminta.
3. Gunakan metode kirim untuk mengirim permintaan. Jika Anda perlu meneruskan parameter:
Metode get memerlukan penyambungan parameter ke akhir URL dan pemisahan parameter. Contoh: 'index.php?name=张三&age=18'
Metode post dapat memasukkan parameter ke dalam send(). Contoh: kirim('nama=张三&umur=18')
4. Ikat event onreadystatechange untuk menentukan status readyState dan status.
5. Menerima data dan menggunakannya melalui konversi json.

 

jQuery menyediakan paket AJAX yang lebih cepat dan cocok untuk digunakan dalam proyek pengembangan. Native AJAX lebih mudah dipahami dan dipahami.

format sintaks jQuery:

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });