Bagaimana untuk menulis penghantaran pos dalam javascript

Dalam pembangunan bahagian hadapan, kami selalunya perlu menggunakan teknologi AJAX untuk menghantar permintaan HTTP, termasuk permintaan POST. Artikel ini akan menerangkan cara menulis permintaan POST dalam JavaScript.

1. Konsep asas permintaan POST

Pertama sekali, kita perlu memahami konsep asas permintaan POST.

Dalam protokol HTTP, GET dan POST kedua-duanya adalah kaedah permintaan yang biasa digunakan Perbezaan utama ialah:

1. Permintaan GET menghantar parameter terus dalam URL, manakala permintaan POST. Parameter diletakkan dalam badan permintaan.
2. Permintaan GET menghantar sejumlah kecil data, biasanya tidak melebihi 1KB, manakala permintaan POST tidak mempunyai had dan boleh menghantar sejumlah besar data.
3. Permintaan GET tidak selamat kerana parameter dalam URL boleh dilihat atau diubah suai oleh pengguna, manakala permintaan POST agak selamat kerana parameter diletakkan dalam badan permintaan.

Di atas adalah konsep asas permintaan POST Seterusnya, kami akan memperkenalkan cara menulis permintaan POST dalam JavaScript.

2. Gunakan objek XMLHttpRequest untuk menghantar permintaan POST

Dalam JavaScript, kami boleh menggunakan objek XMLHttpRequest untuk menghantar permintaan HTTP, termasuk permintaan GET dan POST.

Objek XMLHttpRequest ialah API JavaScript yang boleh digunakan untuk bertukar-tukar data dengan pelayan di latar belakang. Ia boleh memuatkan data secara tidak segerak melalui teknologi AJAX dan boleh mengemas kini halaman tanpa memuatkan semula keseluruhan halaman.

Berikut ialah langkah asas untuk menghantar permintaan POST menggunakan objek XMLHttpRequest:

1. Mencipta objek XMLHttpRequest

Pertama, kita perlu membuat objek XMLHttpRequest. Ini boleh dicapai menggunakan kod berikut:

var xhr = new XMLHttpRequest();

2. Tetapkan laluan dan parameter permintaan

Seterusnya, kita perlu menetapkan laluan dan parameter permintaan. Parameter ini akan diletakkan dalam badan permintaan. Ini boleh dicapai menggunakan kod berikut:

xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

Dalam kod di atas, kami menetapkan laluan permintaan ke http://example.com/api, dan parameternya ialah name=John dan umur=25.

Selain itu, pengepala permintaan Jenis kandungan ditetapkan kepada application/x-www-form-urlencoded. Ini ialah pengepala permintaan POST standard, memberitahu pelayan bahawa parameter dalam badan permintaan adalah dalam format nilai kunci.

3. Terima data yang dikembalikan oleh pelayan

Akhir sekali, kita perlu menerima data yang dikembalikan oleh pelayan. Ini boleh dicapai menggunakan kod berikut:

xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

Dalam kod di atas, kami menetapkan pengendali acara onreadystatechange XMLHttpRequest. Apabila readyState menjadi 4 (iaitu, permintaan telah selesai) dan kod status ialah 200, ini bermakna pelayan telah bertindak balas dengan jayanya dan mengembalikan data. Pada masa ini, data yang dikembalikan oleh pelayan boleh diperolehi melalui xhr.responseText.

3. Gunakan API ambil untuk menghantar permintaan POST

Selain objek XMLHttpRequest, anda juga boleh menggunakan API ambil untuk menghantar permintaan POST. API fetch ialah API JavaScript standard untuk menghantar permintaan HTTP antara klien dan pelayan dan merangkum respons pelayan menggunakan objek Promise.

Berikut ialah langkah asas untuk menghantar permintaan POST menggunakan API pengambilan:

1. Tetapkan laluan dan parameter permintaan

Pertama, kami perlu menetapkan laluan permintaan dan parameter. Ini boleh dicapai menggunakan kod berikut:

fetch('http://example.com/api', {
  method: 'POST',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Dalam kod di atas, kami menetapkan laluan permintaan ke http://example.com/api, dan parameternya ialah name=John dan umur=25.

Selain itu, pengepala permintaan Jenis kandungan ditetapkan kepada application/x-www-form-urlencoded. Ini ialah pengepala permintaan POST standard, memberitahu pelayan bahawa parameter dalam badan permintaan adalah dalam format nilai kunci.

2. Terima data yang dikembalikan oleh pelayan

Akhir sekali, kita perlu menerima data yang dikembalikan oleh pelayan. Anda boleh menggunakan objek Promise API pengambilan untuk mengendalikannya. Ini boleh dicapai menggunakan kod berikut:

.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Dalam kod di atas, kami menggunakan kaedah response.json() untuk menukar badan respons kepada format JSON dan memproses data respons melalui kaedah then() , dan melalui kaedah catch() Kendalikan pengecualian.

4. Ringkasan

Melalui kaedah yang diperkenalkan dalam artikel ini, kami boleh menulis permintaan POST dalam JavaScript, termasuk menggunakan objek XMLHttpRequest dan API pengambilan. Kaedah ini boleh memuatkan data secara tidak segerak dan mengemas kini halaman tanpa memuatkan semula keseluruhan halaman. Anda boleh memilih kaedah yang sesuai untuk menghantar permintaan POST berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menulis penghantaran pos dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!