Latest web development tutorials

AJAX - mengirimkan permintaan ke server

objek XMLHttpRequest untuk bertukar data dengan server.

Mengirimkan permintaan ke server

Untuk mengirim permintaan ke server, kita menggunakan open objek XMLHttpRequest ini () dan mengirim () metode:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

cara deskripsi
terbuka(metode, url, async)

Jenis menentukan permintaan, URL dan pengolahan apakah asynchronous permintaan.

  • Metode:jenis permintaan; GET atau POST
  • url:lokasi file pada server
  • async: true (asynchronous)atau salah (sinkron)
kirim(string)

Mengirimkan permintaan ke server.

  • String:hanya untuk permintaan POST

GET atau POST?

Dibandingkan dengan POST, GET mudah dan lebih cepat, dan dalam kebanyakan kasus dapat digunakan.

Namun, dalam kasus berikut, silakan gunakan permintaan POST:

  • Tidak dapat menggunakan file cache (file atau memperbarui database di server)
  • Kirim data dalam jumlah besar (POST tidak membatasi jumlah data) ke server
  • Saat mengirim input pengguna berisi karakter yang tidak diketahui, POST lebih stabil dan lebih dapat diandalkan dibandingkan GET

GET permintaan

Permintaan GET sederhana:

contoh

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

Coba »

Dalam contoh di atas, Anda mungkin mendapatkan hasil cache.

Untuk menghindari hal ini, menambahkan ID unik ke URL:

contoh

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

Coba »

Jika Anda ingin mengirim informasi melalui metode GET, tambahkan informasi ke URL:

contoh

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

Coba »

permintaan POST

Sebuah permintaan POST sederhana:

contoh

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

Coba »

Jika Anda membutuhkan data sebagai bentuk POST HTML, menggunakan setRequestHeader () untuk menambahkan header HTTP. Kemudian menentukan bahwa Anda ingin mengirim data di send () metode:

contoh

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Coba »

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

url - file di server

Argumenurlterbuka () metode adalah alamat dari file server:

xmlhttp.open("GET","ajax_test.html",true);

File dapat menjadi semua jenis file, seperti .txt dan xml, atau file server script, seperti Asp dan php (sebelum kembali respon, untuk melakukan tugas-tugas di server).

Asynchronous - Benar atau Salah?

AJAX berarti asynchronous JavaScript dan XML (Asynchronous JavaScript dan XML).

Jika Anda ingin menggunakan AJAX XMLHttpRequest object, kemudian, parameter async yang terbuka () metode harus diatur ke benar:

xmlhttp.open("GET","ajax_test.html",true);

Untuk pengembang web, mengirim permintaan asynchronous adalah langkah besar ke depan. Di server untuk melakukan banyak tugas yang sangat memakan waktu. Sebelum AJAX terjadi, yang dapat menyebabkan aplikasi untuk menggantung atau berhenti.

Melalui AJAX, JavaScript tanpa menunggu respon server, tetapi:

  • script lainnya mengeksekusi sambil menunggu respon dari server
  • Ketika respon siap untuk menanggapi memproses

Async = true

Bila menggunakan async = true, silahkan ketentuan dalam menanggapi peristiwa dalam kesiapan onreadystatechange untuk melakukan fungsi:

contoh

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Coba »

Anda akan belajar lebih banyak tentang konten onreadystatechange pada bab berikutnya.

Async = false

Untuk menggunakan async = false, menetapkan metode open () pada parameter ketiga untuk salah: 

xmlhttp.open("GET","test1.txt",false);

Kami tidak menyarankan menggunakan async = false, tapi untuk beberapa permintaan kecil, juga mungkin.

Ingat, JavaScript akan menunggu sampai respon server siap untuk melanjutkan. Jika server sibuk atau lambat, atau menghentikan aplikasi hang.

Catatan: Bila Anda menggunakan async = false, jangan menulis fungsi onreadystatechange - memasukkan kode tersebut ke send () kembali ke pernyataan:

contoh

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Coba »