javascripthttpmethod

JavaScript ialah bahasa pengaturcaraan yang penting dalam pembangunan bahagian hadapan, digunakan untuk mengendalikan pelbagai operasi interaktif dalam halaman web. Antaranya, kaedah http adalah kaedah permintaan yang biasa digunakan, yang boleh menghantar permintaan ke pelayan dan mendapatkan hasil tindak balas. Artikel ini akan meneroka kaedah http dalam JavaScript dan penggunaannya yang berkaitan.

1. Ikhtisar kaedah http

Kaedah http merujuk kepada kaedah menghantar permintaan kepada pelayan melalui rangkaian. Kaedah http yang biasa digunakan pada masa ini termasuk GET, POST, PUT, DELETE, dll. Antaranya, GET dan POST adalah dua kaedah yang paling banyak digunakan.

Empat tindakan dalam protokol HTTP:

GET: Digunakan untuk meminta akses kepada sumber yang telah dikenal pasti oleh URI untuk melaksanakan operasi "baca". Kaedah GET memerlukan pelayan untuk mengembalikan sumber yang terletak oleh URL dalam badan mesej respons dan menentukan format dan set aksara maklumat pengepala respons untuk menerangkan kandungan.

POST: Akan menyerahkan data kepada sumber yang ditentukan dan meminta pelayan untuk diproses (seperti menyerahkan borang atau memuat naik fail). Permintaan POST boleh mengakibatkan penciptaan sumber baharu dan/atau pengubahsuaian sumber sedia ada.

PUT: Digunakan untuk memuat naik fail ke pelayan, atau untuk mengemas kini sumber sedia ada.

PADAM: Minta pelayan memadamkan sumber yang ditentukan.

2. Kaedah http dalam JavaScript

Dalam JavaScript, anda boleh menggunakan objek XMLHttpRequest untuk melaksanakan permintaan http. Objek XMLHttpRequest menyediakan kaedah biasa berikut:

(1) kaedah open(): Fungsi kaedah ini adalah untuk mencipta permintaan http baharu. Parameter kaedah ini termasuk kaedah http, alamat URL yang diminta dan sama ada untuk menggunakan mod permintaan tak segerak, dsb.

XMLHttpRequest.open(kaedah, url, tak segerak, pengguna, kata laluan);

Penerangan parameter kaedah:

kaedah: mewakili kaedah http, seperti GET, POST, LETAK, PADAM dll.

url: Menunjukkan alamat URL yang diminta.

async: Menunjukkan sama ada hendak menggunakan mod permintaan tak segerak. palsu menunjukkan mod segerak, benar menunjukkan mod tak segerak.

pengguna: menunjukkan nama pengguna, pilihan.

kata laluan: menunjukkan kata laluan, pilihan.

(2) kaedah hantar(): Kaedah ini digunakan untuk menghantar permintaan http ke pelayan. Parameter kaedah ini boleh menjadi kandungan data yang diminta (untuk kaedah POST), atau kosong (untuk kaedah GET).

XMLHttpRequest.send(data);

(3) kaedah setRequestHeader(): Kaedah ini digunakan untuk menetapkan atribut dan nilai dalam pengepala permintaan. Atribut dalam pengepala permintaan termasuk Jenis Kandungan, Terima, dsb.

XMLHttpRequest.setRequestHeader(nama, nilai);

Perihalan parameter kaedah:

nama: Tentukan nama atribut dalam pengepala permintaan.

nilai: Tentukan nilai atribut dalam pengepala permintaan.

(4) atribut onreadystatechange: Atribut ini mentakrifkan fungsi panggil balik untuk mengendalikan perubahan status respons pelayan.

XMLHttpRequest.onreadystatechange = function() {};

• readyState: Mewakili status objek XMLHttpRequest, antara 0 hingga 4.

0: mewakili tidak dimulakan (kaedah open() belum dipanggil lagi).
1: Menunjukkan bahawa ia sedang dimulakan, iaitu kaedah open() telah dipanggil, tetapi kaedah send() belum lagi dipanggil.
2: Ini bermakna permintaan telah dihantar (kaedah send() telah dipanggil), tetapi mesej respons daripada pelayan belum diterima lagi.
3: Mesej respons pelayan telah diterima, tetapi semua data respons belum dibaca.
4: Semua data respons telah dibaca.

status: Menunjukkan kod status yang dikembalikan oleh pelayan, seperti 200 menunjukkan kejayaan, 404 menunjukkan bahawa sumber yang diminta tidak wujud, dsb.

responseText: Menunjukkan teks respons yang dikembalikan oleh pelayan.

3. Contoh Demonstrasi

Berikut ialah contoh menghantar permintaan http menggunakan kaedah GET dan kaedah permintaan tak segerak:

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

Dalam kod di atas , kami mentakrifkan Fungsi bernama sendHttpRequest() menggunakan objek XMLHttpRequest dalam fungsi untuk menghantar permintaan GET ke alamat "https://www.example.com/" dan menetapkan mod permintaan tak segerak kepada benar. Apabila pelayan berjaya mengembalikan hasil respons dan kod status ialah 200, teks respons akan dicetak pada konsol.

Berikut ialah contoh menghantar permintaan http menggunakan kaedah POST dan kaedah permintaan segerak:

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

Dalam kod di atas, kami mentakrifkan fungsi yang dipanggil sendHttpRequest() dan menggunakan XMLHttpRequest dalam fungsi Objek menghantar permintaan POST ke alamat "https://www.example.com/" dan tetapkan mod permintaan segerak kepada palsu. Pada masa yang sama, kami juga memanggil kaedah setRequestHeader() untuk menetapkan atribut Content-Type dalam pengepala permintaan, yang menunjukkan bahawa jenis data permintaan ialah "application/x-www-form-urlencoded". kaedah send() untuk menghantar data Permintaan, kandungan data ialah "nama=John&age=25". Apabila pelayan berjaya mengembalikan hasil respons, teks respons dicetak ke konsol.

4. Ringkasan

Artikel ini memperkenalkan kaedah http dalam JavaScript dan penggunaan berkaitannya. Melalui demonstrasi contoh di atas, kita dapat melihat bahawa menggunakan objek XMLHttpRequest boleh melaksanakan permintaan http dengan mudah Pada masa yang sama, jenis dan format permintaan yang berbeza juga boleh dilaksanakan dengan menetapkan pengepala permintaan dan parameter permintaan. Oleh itu, menguasai kaedah http dalam JavaScript sangat diperlukan untuk pembangun bahagian hadapan.

Atas ialah kandungan terperinci javascripthttpmethod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!