Meneroka Permintaan AJAX: Ketahui tentang pelbagai kaedah permintaan AJAX

Meneroka permintaan AJAX: Untuk memahami pelbagai kaedah permintaan AJAX, contoh kod khusus diperlukan

Pengenalan:
Dalam pembangunan web moden, AJAX (JavaScript Asynchronous dan XML) digunakan secara meluas untuk mencapai komunikasi antara halaman web dan pelayan pertukaran data membolehkan pengguna mendapatkan data terkini tanpa menyegarkan keseluruhan halaman. Artikel ini akan memperkenalkan prinsip asas AJAX dan cara menggunakan kaedah permintaan AJAX yang berbeza, sambil memberikan contoh kod khusus.

1. Prinsip asas AJAX
Prinsip asas AJAX ialah menukar data dengan pelayan melalui objek XMLHttpRequest terbina dalam penyemak imbas. Ia menghantar permintaan dan menerima respons pada halaman melalui JavaScript, dan kemudian menggunakan operasi DOM untuk memasukkan data ke lokasi yang sepadan pada halaman untuk mencapai muat semula separa halaman.

2. Kaedah biasa menggunakan AJAX

1. GET request:
   GET request ialah salah satu kaedah permintaan AJAX yang paling biasa, yang digunakan untuk mendapatkan data daripada pelayan. Berikut ialah contoh permintaan GET yang dilaksanakan menggunakan JavaScript asli:

function getData(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      callback(data);
    }
  };
  xhr.send();
}

getData("https://api.example.com/data", function(data) {
  console.log(data);
});

2. Permintaan POST:
   Permintaan POST digunakan untuk menghantar data ke pelayan, sering digunakan dalam senario seperti penyerahan borang. Berikut ialah contoh permintaan POST menggunakan jQuery:

$.ajax({
  url: "https://api.example.com/post",
  type: "POST",
  data: { username: "example", password: "123456" },
  success: function(response) {
    console.log(response);
  }
});

3. Permintaan PUT:
   Permintaan PUT digunakan untuk mengemas kini data pada pelayan. Berikut ialah contoh permintaan PUT yang dilaksanakan menggunakan API fetch:

fetch("https://api.example.com/update", {
  method: "PUT",
  body: JSON.stringify({ id: 1, name: "example" }),
  headers: {
    "Content-Type": "application/json"
  }
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log(data);
});

4. DELETE permintaan:
   DELETE permintaan digunakan untuk memadam data pada pelayan. Berikut ialah contoh permintaan DELETE yang dilaksanakan menggunakan Axios:

axios.delete("https://api.example.com/delete", { params: { id: 1 } })
.then(function(response) {
  console.log(response.data);
})
.catch(function(error) {
  console.log(error);
});

3. Pengendalian permintaan merentas domain
Disebabkan sekatan dasar asal yang sama, permintaan AJAX hanya boleh dihantar ke pelayan di bawah nama domain yang sama secara lalai. Untuk menyelesaikan masalah ini, anda boleh menggunakan JSONP, CORS, proksi, dll. Berikut ialah contoh menggunakan JSONP untuk melaksanakan permintaan merentas domain:

function getData(callback) {
  var script = document.createElement("script");
  script.src = "https://api.example.com/data?callback=" + callback;
  document.body.appendChild(script);
}

function handleData(data) {
  console.log(data);
}

getData("handleData");

4. Ralat pengendalian permintaan AJAX
Semasa membuat permintaan AJAX, anda perlu menangani kemungkinan ralat. Berikut ialah contoh penggunaan API pengambilan untuk melaksanakan pengendalian ralat:

fetch("https://api.example.com/data")
.then(function(response) {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error("请求失败，状态码：" + response.status);
  }
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.log("请求错误：" + error);
});

Kesimpulan:
Melalui pengenalan artikel ini, kami memahami prinsip asas AJAX dan belajar menggunakan kaedah permintaan AJAX yang berbeza. Contoh kod khusus ini diharapkan dapat membantu pembaca memahami penggunaan permintaan AJAX dengan lebih baik, dengan itu meningkatkan kecekapan dan pengalaman pengguna pembangunan web.

Atas ialah kandungan terperinci Meneroka Permintaan AJAX: Ketahui tentang pelbagai kaedah permintaan AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!