AJAX atau Ajax adalah Asynchronous JavaScript dan XML. Ini digunakan untuk bertukar data dengan server dan memperbarui sebagian halaman web tanpa memuat ulang seluruh halaman web di sisi klien. Tampilan dan perilaku halaman web yang ada tidak terganggu sama sekali saat bertukar dan memperbarui data. Ajax juga dianggap sebagai sekelompok teknologi yang memiliki HTML, CSS, DOM, dan JavaScript yang digunakan untuk menandai, memberi gaya, dan memungkinkan pengguna untuk berinteraksi dengan informasi di halaman web. Pada artikel ini, ini akan menunjukkan cara menulis program sederhana di Ajax langkah demi langkah menggunakan Notepad++. Beberapa pengetahuan dasar tentang HTML, DOM, JavaScript, dan server Web lokal atau Server Web jarak jauh diperlukan. WampServer digunakan dalam artikel ini untuk pengujian.
Langkah
Metode 1 dari 2: Pengodean
Langkah 1. Siapkan gambar untuk menulis program Ajax
Simpan gambar di folder yang sama di mana Anda akan menyimpan file html dan teks yang menampilkan program Ajax. Pada artikel ini, direktori “ProgramInAjax” diatur di dalam folder “wamp” di bawah direktori “www” tempat Anda menginstal WampServer.
Langkah 2. Buka editor teks apa saja
Notepad++ digunakan sebagai editor teks dalam artikel ini.
Langkah 3. Buat file baru di editor teks
Ketik berikut ini:
Oh oh! Kemana perginya bunga kuning itu?
Anda dapat mengetik apa pun yang Anda inginkan di dalam tag html di sini.
Langkah 4. Simpan file sebagai dokumen teks dengan nama “ajax-data.txt
” Sebenarnya, Anda dapat memberi nama file apa pun yang Anda inginkan tetapi pastikan Anda memasukkan nama file yang sama ke pengkodean di baris ini:
xmlhttp.open("GET", "ajax-data.txt", true);
Namun, tag HTML digunakan untuk header agar terlihat lebih besar dan lebih tidak terlihat.
Langkah 5. Buat file baru untuk halaman web
File ini untuk file HTML untuk melihat program Ajax di browser Web.
Langkah 6. Salin kode berikut:
Program Ajax Pertama Saya oleh Saya Letakkan kode Ajax di bawah ini.Klik tombol di bawah untuk membuat bunga menghilang
Langkah 7. Simpan file
Klik tombol simpan pada bilah menu. Kotak "Simpan Sebagai" terbuka. Masukkan nama untuk dokumen Anda. Dalam artikel ini, nama filenya adalah “index.”
Langkah 8. Klik panah drop-down untuk memilih ekstensi file
Di bidang "Simpan sebagai jenis", klik panah tarik-turun untuk memilih ekstensi file.
Langkah 9. Pilih “file Hyper Text Markup Language
” Pastikan ada "html" di dalam tanda kurung. Klik simpan setelah memilih "html."
Langkah 10. Uji file HTML di browser Web
Buka halaman web di browser web. Buka "Jalankan" di bilah menu atas. Klik dan pilih "Luncurkan di Chrome" atau browser apa pun yang dipasang di sistem Anda. Google Chrome digunakan untuk pengujian dalam artikel ini. Anda mungkin memiliki beberapa browser lain yang diinstal dalam Notepad++. Anda dapat memilih browser favorit Anda. Opsi lain, Anda dapat mengklik ikon WampServer di bilah tugas di bagian bawah layar dan memilih "Localhost." Anda akan melihat direktori Anda di sana dan klik file indeks.
Langkah 11. Klik tombol di bawah gambar untuk menguji skrip
Langkah 12. Halaman web terakhir Anda
Halaman web Anda harus disegarkan dengan informasi yang Anda masukkan ke dalam file teks di awal. Bunga dan header harus diganti dengan header baru yang disebut “Oh oh! Kemana perginya bunga kuning itu?”
Metode 2 dari 2: Penjelasan Kode
Langkah 1. Bagian tubuh
Tubuh HTML memiliki bagian "div" dan satu tombol. Bagian ini akan digunakan untuk menampilkan informasi yang dikembalikan dari server. Tombol memanggil fungsi bernama "loadXMLDoc()," jika diklik.
Program Ajax Pertama Saya oleh Saya Sebuah gambar pergi ke sini untuk menguji program Ajax.Klik tombol di bawah untuk membuat bunga menghilang
Sebuah tombol masuk ke sini
Langkah 2. Bagian kepala
Bagian kepala file HTML memiliki tag skrip yang berisi fungsi "loadXMLDoc()".
Program Ajax Pertama Saya oleh Saya Letakkan kode Ajax di bawah ini.
Langkah 3. Penjelasan Lebih Lanjut
Hal terpenting dari Ajax adalah objek XMLHttpRequest. Ini digunakan untuk bertukar data dengan server dan semua browser modern mendukung objek tersebut.
- Sintaks untuk membuat objek XMLHttpRequest() adalah variabel=new XMLHttpRequest(); tetapi pada saat yang sama sintaks untuk membuat versi lama Internet Explorer (IE5 dan IE6) yang menggunakan objek ActiveX adalah variabel=new ActiveXObject("Microsoft. XMLHTTP");.
- Untuk menangani semua browser modern, perlu memeriksa apakah browser mendukung objek XMLHttpRequest. Jika ya, itu membuat objek XMLHttpRequest. Jika tidak, itu akan membuat objek ActiveX untuk itu.
- Kemudian akan mengirim permintaan ke server. Metode objek XMLHttpRequest yang disebut "open()" dan "send()" akan digunakan. xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send();.
Tips
- Pilihan lain untuk melihat hasilnya, Anda dapat membuka browser favorit Anda dan ketik “localhost/ProgramInAjax” di bilah alamat web untuk menampilkan halaman web. Anda seharusnya dapat melihat halaman web jika Anda menamai file HTML Anda dengan “index.html.”
- Simpan file html Anda lebih sering selama bekerja. Menekan Ctrl dan S secara bersamaan untuk pengguna Window akan menghemat lebih banyak waktu.
- Pastikan untuk menambahkan file HTML Anda yang tersimpan di lokasi yang sama di mana file gambar dan teks data Anda berada.
- Saat Anda memberi nama file, ini adalah kasus sensitif ketika Anda menambahkan nama-nama itu ke dalam kode. Misalnya, "myImage" berbeda dari "MyImage" atau "myimage".
