Memahami lima kaedah penyerahan Ajax biasa

Fahami lima kaedah penyerahan AJAX yang biasa digunakan, contoh kod khusus diperlukan

AJAX (JavaScript Asynchronous dan XML) ialah teknologi yang digunakan untuk mencipta aplikasi web interaktif. Ia membenarkan kandungan halaman separa dikemas kini melalui komunikasi tak segerak dengan pelayan tanpa menyegarkan keseluruhan halaman. AJAX digunakan secara meluas dalam pembangunan web moden untuk menyediakan pengguna pengalaman interaktif yang lebih baik.

Dalam AJAX, penyerahan data adalah bahagian yang sangat penting. Berikut akan memperkenalkan lima kaedah penyerahan AJAX yang biasa digunakan, serta contoh kod khusus untuk setiap kaedah.

1. Serahkan data melalui kaedah GET:
   GET ialah salah satu kaedah permintaan HTTP yang paling biasa. Ia menambahkan parameter pada penghujung URL dan menghantarnya ke pelayan dalam bentuk pasangan nilai kunci. Kaedah GET sesuai untuk mendapatkan data, tetapi ia tidak sesuai untuk mengendalikan maklumat sensitif. Berikut ialah contoh kod untuk menyerahkan data menggunakan kaedah GET:

var xmlhttp = new XMLHttpRequest();
var url = "server.php?name=John&age=20";
xmlhttp.open("GET", url, true);
xmlhttp.send();

2. Menyerahkan data menggunakan kaedah POST:
   POST ialah satu lagi kaedah permintaan HTTP biasa, yang menghantar parameter data ke badan permintaan pelayan. Berbanding dengan kaedah GET, kaedah POST lebih sesuai untuk mengendalikan maklumat sensitif kerana data tidak akan dipaparkan dalam URL. Berikut ialah contoh kod untuk menghantar data menggunakan kaedah POST:

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var params = "name=John&age=20";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(params);

3. Menyerahkan data menggunakan kaedah FormData:
   FormData ialah objek JavaScript terbina dalam yang digunakan untuk mencipta data borang. Ia boleh membina data borang dengan menambah pasangan kunci/nilai dan menghantarnya ke pelayan. Berikut ialah contoh kod untuk menyerahkan data menggunakan kaedah FormData:

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var formData = new FormData();
formData.append("name", "John");
formData.append("age", "20");
xmlhttp.open("POST", url, true);
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(formData);

4. Menyerahkan data menggunakan kaedah JSON:
   JSON (JavaScript Object Notation) ialah format pertukaran data yang ringan dan format data yang biasa digunakan dalam AJAX. Data JSON boleh ditukar daripada objek JavaScript kepada rentetan JSON melalui kaedah JSON.stringify() dan dihantar ke pelayan melalui POST. Berikut ialah contoh kod untuk menyerahkan data menggunakan JSON:

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var data = {name: "John", age: 20};
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(JSON.stringify(data));

5. Menyerahkan data menggunakan XML:
   Dalam sesetengah kes, perlu menggunakan format data XML untuk menyerahkan data. Dalam AJAX, ini boleh dicapai dengan mencipta objek XMLHttpRequest dan memanipulasi data XML. Berikut ialah contoh kod untuk menyerahkan data menggunakan XML:

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var xmlData = '<?xml version="1.0" encoding="UTF-8"?><data><name>John</name><age>20</age></data>';
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "text/xml");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(xmlData);

Di atas ialah contoh kod khusus daripada lima kaedah penyerahan AJAX yang biasa digunakan. Dengan memahami dan mempraktikkan kaedah penyerahan ini, anda boleh menggunakan teknologi AJAX dengan lebih baik untuk memproses data dan meningkatkan pengalaman pengguna aplikasi web anda.

Atas ialah kandungan terperinci Memahami lima kaedah penyerahan Ajax biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!