Pada artikel ini saya tidak ingin menunjukkan sejarah AJAX dan membahas pro dan kontra, tetapi hanya fokus pada cara membuat kerja dasar AJAX - komunikasi PHP.
Satu-satunya hal yang penting saat ini adalah bahwa AJAX menggunakan JavaScript sehingga harus diaktifkan pada browser Anda untuk berhasil menyelesaikan tutorial ini.
Untuk menunjukkan koneksi AJAX PHP kita akan menciptakan sebuah bentuk yang sangat sederhana dengan 2 field input. Pada field pertama Anda dapat mengetik teks dan kita akan mengirimkan teks ini untuk script PHP kita yang akan mengubahnya menjadi huruf besar dan mengirimkannya kembali kepada kita. Pada akhirnya kita akan meletakkan hasilnya ke dalam field input kedua. (Contoh ini mungkin tidak sangat berguna tapi saya pikir itu dapat diterima pada tingkat ini.)
Jadi mari kita daftar apa yang perlu kita lakukan:
Dengarkan pada acara tombol-tekan pada field input.
Dalam kasus tombol-tekan mengirim pesan ke script PHP pada server.
Proses input dengan PHP dan mengirim kembali hasilnya.
Menangkap kembali data dan menampilkannya.
Satu-satunya hal yang penting saat ini adalah bahwa AJAX menggunakan JavaScript sehingga harus diaktifkan pada browser Anda untuk berhasil menyelesaikan tutorial ini.
Untuk menunjukkan koneksi AJAX PHP kita akan menciptakan sebuah bentuk yang sangat sederhana dengan 2 field input. Pada field pertama Anda dapat mengetik teks dan kita akan mengirimkan teks ini untuk script PHP kita yang akan mengubahnya menjadi huruf besar dan mengirimkannya kembali kepada kita. Pada akhirnya kita akan meletakkan hasilnya ke dalam field input kedua. (Contoh ini mungkin tidak sangat berguna tapi saya pikir itu dapat diterima pada tingkat ini.)
Jadi mari kita daftar apa yang perlu kita lakukan:
Dengarkan pada acara tombol-tekan pada field input.
Dalam kasus tombol-tekan mengirim pesan ke script PHP pada server.
Proses input dengan PHP dan mengirim kembali hasilnya.
Menangkap kembali data dan menampilkannya.
Seperti yang anda lihat ada doWork() fungsi yang disebut dalam setiap kasus ketika kunci sampai (tombol ditekan). Tentu saja Anda dapat menggunakan peristiwa didukung lain jika Anda inginkan.
Tapi apa ini doWork () dan bagaimana kita dapat mengirim pesan ke server script? Nah kita bahas sekarang.
Sebelum penjelasan doWork () fungsi pertama-tama kita perlu belajar hal yang lebih penting. Untuk membuat komunikasi antara klien dan server kode klien perlu membuat XMLHttpRequest disebut objek. Objek ini akan bertanggung jawab untuk komunikasi PHP AJAX.
Namun menciptakan obyek ini agak triky sebagai browser menerapkannya berbagai cara. Jika Anda tidak ingin mendukung browser yang cukup tua kita bisa melakukannya sebagai berikut:
Namun menciptakan obyek ini agak triky sebagai browser menerapkannya berbagai cara. Jika Anda tidak ingin mendukung browser yang cukup tua kita bisa melakukannya sebagai berikut:
Ok, sekarang kita memiliki objek XMLHttpRequest, maka saatnya untuk mengimplementasikan logika bisnis dalam fungsi doWork ().
Pertama-tama kita perlu mendapatkan objek XMLHttpRequest yang valid. Jika kita memilikinya maka kita bisa mengirim nilai field inputText ke script server. Kami melakukan ini dengan menulis sebuah URL dengan parameter, sehingga dalam script PHP kita dapat menggunakan array $ _GET super-global untuk menangkap data. Sebagai langkah selanjutnya kita sebut dengan send () fungsi dari object XMLHttpRequest yang akan mengirim permintaan kita ke server. Saat ini doWork kami () fungsi terlihat seperti ini:
Pertama-tama kita perlu mendapatkan objek XMLHttpRequest yang valid. Jika kita memilikinya maka kita bisa mengirim nilai field inputText ke script server. Kami melakukan ini dengan menulis sebuah URL dengan parameter, sehingga dalam script PHP kita dapat menggunakan array $ _GET super-global untuk menangkap data. Sebagai langkah selanjutnya kita sebut dengan send () fungsi dari object XMLHttpRequest yang akan mengirim permintaan kita ke server. Saat ini doWork kami () fungsi terlihat seperti ini:
Ini bagus tapi bagaimana kita dapat menangkap respon dari server? Untuk melakukan hal ini kita perlu menggunakan properti khusus lainnya dari object XMLHttpRequest. Kita dapat menetapkan fungsi untuk parameter ini dan fungsi ini akan dipanggil jika keadaan benda itu berubah. Kode terakhir adalah sebagai berikut: 
Langkah terakhir di sisi client untuk melaksanakan fungsi setOutput () yang akan mengubah nilai field kedua kita. Satu-satunya hal yang menarik dalam hal ini fungsi yang kita perlu memeriksa keadaan sebenarnya dari objek XMLHttpRequest. Kita perlu mengubah nilai field hanya jika negara selesai. Properti readyState dapat memiliki nilai berikut:
0 = tidak terinisialisasi
1 = loading
2 = dimuat
3 = interaktif
4 = lengkap
Jadi setOutput () terlihat seperti ini:
Sekarang sisi klien siap mari kita menerapkan sisi server.
