Terdiri dari teknologi HTML, JavaScript™, DHTML, dan DOM, Ajax adalah cara brilian untuk mengubah antarmuka Web yang rumit menjadi aplikasi Ajax yang interaktif. Untuk Ajax, objek intinya adalah XMLHttpRequest, dan semua operasi Ajax tidak dapat dipisahkan dari pengoperasian objek ini.
Pertama mari kita pahami cara membuat objek ini dalam javascript:
varxmlHttp=newXMLHttpRequest();
Baris kode sederhana ini membuat objek XMLHttpRequest di Mozilla, Firefox, Safari, Opera, dan pada dasarnya semua browser non-Microsoft yang mendukung Ajax dalam bentuk atau cara apa pun. Namun untuk IE yang memiliki pangsa pasar 70%, metode ini tidak dapat dilakukan, dan versi IE yang berbeda memiliki metode pembuatan yang berbeda, jadi kita perlu menggunakan dua metode berikut untuk membuat objek di bawah IE:
coba{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//Untuk browser yang lebih baru
}menangkap(salah){
mencoba{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//Untuk browser lama
}menangkap(err2){
xmlHttp=salah;
}
}
Meski begitu, kami tidak dapat memprediksi bahwa beberapa browser mungkin tidak dapat membuat objek ini, jadi jika pembuatannya tidak berhasil, kami harus menambahkan kalimat:
if(!xmlHttp){
alert("Tidak dapat membuat objek XMLHttpRequest!");
}
Kombinasinya adalah:
varxmlHttp=false;
mencoba{
xmlHttp=newXMLHttpRequest();
}tangkap(cobamicrosoft){
mencoba{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}menangkap(microsoft lainnya){
mencoba{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}menangkap(gagal){
xmlHttp=salah;
}
}
}
jika(!xmlHttp){
alert("Tidak dapat membuat objek XMLHttpRequest!");
}
Lalu, mari buat fungsi getInfo() untuk mengaktifkan permintaan asinkron:
functiongetInfo(){
varnum=document.getElementById("num").value;//Dapatkan data formulir
varurl="/ajax/1.php?n="+escape(angka);
xmlHttp.open("GET",url,true);//true di sini mewakili permintaan asinkron
}
Setelah dikonfigurasi dengan open(), Anda dapat mengirim permintaan. Meskipun Anda dapat mengirim data menggunakan send(), Anda juga dapat mengirim data melalui URL itu sendiri. Faktanya, di sebagian besar permintaan GET, mengirim data menggunakan URL jauh lebih mudah, jadi gunakan saja null sebagai parameter send() di sini. File php pada alamat url adalah file php yang diminta untuk mengolah data yang dibutuhkan, sama seperti biasanya kita menggunakan PHP. Beberapa parameter dapat ditambahkan dan dipisahkan dengan &.
xmlHttp.kirim(null);
Setelah mengirimkan data, kita perlu menggunakan metode callback untuk mendapatkan status server, sehingga digunakan atribut onreadystatechange.
xmlHttp.onreadystatechange=updatePage;
Pernyataan ini harus ditempatkan sebelum pernyataan send() agar efektif. updatePage selanjutnya adalah fungsi yang memproses informasi yang dikembalikan. getInfo() lengkapnya adalah sebagai berikut:
fungsigetInfo(){
varnum=document.getElementById("num").value;//Dapatkan data formulir
varurl="/ajax/1.php?n="+escape(angka);
xmlHttp.open("GET",url,true);//true di sini mewakili permintaan asinkron
xmlHttp.onreadystatechange=updatePage;
xmlHttp.kirim(null);
}
Kita juga perlu memicu fungsi ini di html:
<inputname="num"id="num"onblur="getInfo()"type="teks"/>
Selanjutnya kita perlu menulis fungsi updatePage():
functionupdatePage(){
jika(xmlhttp.readyState==4){
varresponse=xmlhttp.responseTeks;
document.getElementById("kota").nilai=respons;
}
}
ReadyState pada kode di atas adalah status yang dikembalikan oleh server. Status 4 ini menunjukkan bahwa permintaan telah dikirim dan diproses. responText adalah untuk mendapatkan informasi yang dikembalikan oleh server, dan kemudian menetapkannya ke formulir dengan ID kota melalui javascript.
Pada titik ini, program Ajax sederhana telah selesai. Kode javascript lengkapnya adalah sebagai berikut:
varxmlHttp=false;
mencoba{
xmlHttp=newXMLHttpRequest();
}tangkap(cobamicrosoft){
mencoba{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}menangkap(microsoft lainnya){
mencoba{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}menangkap(gagal){
xmlHttp=salah;
}
}
}
jika(!xmlHttp){
alert("Tidak dapat membuat objek XMLHttpRequest!");
}
fungsigetInfo(){
varnum=document.getElementById("num").value;//Dapatkan data formulir
varurl="/ajax/1.php?n="+escape(angka);
xmlHttp.open("GET",url,true);//true di sini mewakili permintaan asinkron
xmlHttp.onreadystatechange=updatePage;
xmlHttp.kirim(null);
}
fungsiupdatePage(){
jika(xmlhttp.readyState==4){
varresponse=xmlhttp.responseTeks;
document.getElementById("kota").nilai=respons;
}
}
Masih ada file php yang hilang di sini, karena cara pemrosesannya berbeda dan cara penulisannya berbeda, dan ini bukan bagian utama Ajax, maka kodenya tidak akan disertakan di sini. Ingatlah bahwa PHP mengeluarkan dan mengembalikan data yang diperlukan. Sudah
lama tidak diperbarui. Saya melihat tutorial ini hari ini dan sangat cocok untuk pemula.