JQuery adalah perpustakaan JavaScript, yang tujuannya adalah "Tulis Kurang, lakukan lebih banyak." JQuery mudah terhubung ke situs dan mulai menggunakan. Menggunakan jQuery, menjadi lebih mudah untuk menggunakan JavaScript di situs Anda.
jQuery menghilangkan seluruh buzz dari kode JavaScript, dan memungkinkan Anda untuk mengimplementasikan baris ini hanya dalam satu metode.
Apa itu Ajax?
Ajax adalah asynchronous (I.E. browser, mengirim permintaan, dapat melakukan apa saja, misalnya, untuk menampilkan pesan menunggu respons, gulir halaman, dll.) JavaScript dan XML. Ini digunakan untuk membuat halaman web yang dinamis dan cepat. Ajax memungkinkan kami memperbarui bagian dari halaman web tanpa mem-boot ulang seluruh halaman.
Bagaimana dengan jQuery dan Ajax?
Kombinasi jQuery dan AJAX menyediakan fungsionalitas yang kuat. DARI menggunakan jQuery. Dan Ajax Anda dapat membuat permintaan dan mendapatkan informasi dalam berbagai format, termasuk XML, HTML, dan bahkan teks normal. Anda dapat menggunakan format JSON untuk bertukar data. Data yang diterima oleh permintaan AJAX yang dapat kami gunakan di halaman HTML kami.
jQuery membuat browser yang ada Ajax API lebih kuat dan lebih mudah digunakan. Buat panggilan AJAX dengan cara biasa menggunakan Javascript, agak sulit: karena Anda harus memperhitungkan bahwa berbagai browser memerlukan pendekatan berbeda untuk membuat objek XMLHTTREquest. Selain itu, mengirim data, misalnya, dari formulir, menjadi lebih sulit jika Anda menggunakan Javascript yang biasa untuk memanggil AJAX.
jQuery menyediakan fungsionalitas sederhana dan kuat yang memperluas metode JavaScript Ajax dan memberikan pendekatan yang lebih fleksibel.
Dalam artikel kecil ini saya akan menunjukkan kepada Anda cara menggunakan jQuery dan Ajax di pHP sederhana. untuk m. Mari kita mulai ... untuk menggunakan jQuery dan Ajax, kita perlu dua file, file pertama akan berisi kode HTML / PHP, dimana kueri Ajax akan dikompilasi. Pada file kedua, kami akan menangani kueri Ajax dan mengembalikan hasilnya ke halaman pertama.
Langkah 1. Buat file sekolah.php dan masukkan kode berikut ke dalamnya:
Dalam kode di atas, kita mendapatkan nama dan jumlah siswa dan, menggunakan jQuery dan Ajax, kirimkan ke detail.php.
| NAMAMU: | ||
| Nomor Roll: | ||
Langkah 2: Buat detail.php dan letakkan kode berikut di dalamnya:
Dalam kode di atas, kami mendapatkan alamat siswa menggunakan nomor urutan dan namanya.
Untuk contoh ini, Anda perlu membuat database sekolah dan meja siswa. Meja siswa berisi bidang dengan nama, nomor urut dan alamat.
Saya harap artikel ini akan bermanfaat bagi Anda.
Metode post () biasanya dirancang untuk mengirim data ke server (misalnya, dari formulir).
Untuk konteks metode pos, perlu disebutkan tentang jSON. - Format teks berdasarkan Javascript. Ini dapat digunakan hampir semua bahasa pemrograman.
jQuery, metode posting permintaan AJAX
jquery.post (URL ,,,,)- Argumen pertama (URL) adalah URL dari dokumen di mana permintaan dikirim;
- Argumen kedua (data) adalah data yang dikirim ke server, sebagai aturan, disajikan sebagai objek JS;
- Argumen ketiga (CallBack (data, TextStatus, JQXHR)) adalah F-I menelepon setelah respons server. Sebagai argumen. fitur ini Mengambil data yang dikirim oleh server sebagai tanggapan atas permintaan dan status tentang bagaimana permintaan dilakukan.
json_decode () dan json_encode ()
DI bahasa PHP. (dari 5.2), dukungan JSON dimasukkan dalam kernel dalam bentuk fungsi json_decode () (decodes string JSON) dan json_encode (), yang sendiri mengkonversi tipe data JSON ke yang sesuai jenis PHP. dan sebaliknya.
1, "b" \u003d\u003e 2); Echo json_encode ($ arr); \u003eHasil
("A": 1, "B": 2, "C": 3, "D": 4: 5)Contoh PHP Operasi json_decode
$ json \u003d "(" A ": 1," B ": 2)"; Var_dump (json_decode ($ json, true)); $ Arr \u003d json_decode ($ json, true); Echo ""$ Arr [" a "]."
"$ Arr [" b "]."
";
Hasil
Array (5) (["" A "] \u003d\u003e int (1) [" B "] \u003d\u003e int (2)) 1 2Contoh pengoperasian kueri Ajax oleh metode posting
Apa yang kita lakukan:
Periksa kebenaran data yang dikirim (POST Request Ajax) (data dimasukkan oleh pengguna). Jika data sudah benar, tampilkan pesan. Kalau tidak, buat lampu latar merah di ladang. Semuanya bekerja secara asinkron, yaitu, tanpa me-reboot halaman. kamu bisa memakai prinsip ini, misalnya, untuk membuat sistem komentar dengan penyisipan komentar dalam database.
jQuery.
$ (Dokumen) .Ready (fungsi () (var working \u003d false; / * Bendera ini mencegah mengirim beberapa komentar: * / $ ("form"). Kirim (Fungsi (E) (E.PreventDefault (); jika ( ) Kembalikan FALSE; BEKERJA \u003d BENAR; $ ("# Kirim"). Val ("Tunggu .."); $ ("Kesalahan"). RemoveClass ("Kesalahan"); $ .post ("kirim.php"). (ini) .Serialize (), Fungsi (MSG) (/ * Kirim nilai bentuk di kirim.php: * / working \u003d false; $ ("# kirim"). Val ("Kirim"); jika (MSG "); status) // Jika data sudah benar, tambahkan pesan (konsol.log (msg.status); $ (msg.html) .hide (). Sisipkan sebelum ("form"). Lainnya (// Jika ada kesalahan, kami melewati objek dengan objek // msg.Errors dan membawanya ke halaman $ .each (msg.Errors, fungsi (k, v) ($ ("#" + k). "Kesalahan"); // Alert (K);));)), "JSON");));););Html.
PHP.
// Kami menerima data yang datang oleh Ajax $ arr \u003d $ _post; $ arr \u003d $ _post; IF (filter_var ($ artr, filter_validate_email) && filter_var ($ artr, filter_validate_int)) (echo json_encode (array ("status" \u003d\u003e 1, "html" \u003d\u003e "Dalam artikel ini, contoh kode yang saya gunakan adalah mengirim permintaan Ajax ke server di sekitar jQuery.. Tugas mereka dapat berbeda, sehingga Anda dapat menggunakan fungsi yang berbeda yang menyederhanakan kode penulisan.
Permintaan data HTML menggunakan fungsi muat
Ini adalah kueri Ajax termudah melalui jQuery untuk mendapatkan data HTML dan memasukkannya ke dalam elemen DOM dengan id \u003d "Hasil" (isi elemen diganti):
$ ("# Hasil"). Memuat ("
Versi memuat yang lebih maju:
$ ("# Hasil"). Memuat ("
Dalam contoh ini, server juga mentransmisikan parameter, dan setelah menerima jawabannya, itu tidak diperiksa apakah tidak ada kesalahan (misalnya, respons dari server tidak diterima) dan melakukan berbagai tindakan.
Permintaan Ajax Dapatkan dan Posting Fungsi
Fungsi-fungsi ini dikirim oleh metode Ajax Query HTTP GET dan POST. Saya akan memberikan beberapa contoh penggunaannya.
$ .get ("
Transmisi data tidak diperlukan, serta melakukan tindakan apa pun setelah menerima respons dari server, I.E. Dalam hal ini, string 3 dan 4-6 dapat dihapus, jika perlu, dan dengan demikian mengurangi kode.
Jenis data yang diperoleh dari server dapat ditentukan dengan menambahkan datatype (lihat yang berikut) - default ditentukan secara otomatis.
Menggunakan posting serupa, tetapi dalam contoh berikut saya menggunakan panggilan fungsi setelah menerima respons dari server.
$ .post ("
Bahkan, fungsi GET dan POST adalah opsi disingkat untuk fungsi AJAX, yang akan mempertimbangkan di bawah ini.
Getjson JSON Data Dapatkan
getjson - varian singkat dari kueri Ajax menggunakan metode Get dan menerima data sebagai JSON. Metode ini nyaman, misalnya, untuk mendapatkan beberapa array dengan data dan pekerjaan selanjutnya.
$ .getjson (" Di sisi server, program membentuk array dan mengubahnya menjadi string JSON, misalnya, sebagai berikut: $ arr \u003d array (); $ arr \u003d array ("id" \u003d\u003e 10, "teks" \u003d\u003e "garis uji 1"); $ arr \u003d array ("id" \u003d\u003e 20, "teks" \u003d\u003e "baris uji 2"); $ arr \u003d array ("id" \u003d\u003e 30, "teks" \u003d\u003e "test line 3"); Echo json_encode ($ arr); Demikian pula, objek stdclass dapat ditransfer dari server, mengkonversi mereka ke string JSON. Sekarang saya akan memberikan contoh fungsi ajax ajax sederhana dan menerima data HTML. $ .ajax (URL: " Permintaan ke server terjadi metode GET, karena Parameter bertanggung jawab atas jenis permintaan, tipe default adalah dapatkan. Contohnya mengeksekusi fungsi kueri Ajax dengan transmisi posting data dengan metode dan pemrosesan acara. Di bawah ini saya akan menjelaskan opsi tambahanyang paling sering diterapkan. $ .ajax (URL: " Tombol pengiriman data:
Dalam contoh, ketika Anda mengklik tombol tombol, status tombol pertama kali berubah (teks pada itu berubah menjadi "Mengirim ..." dan itu menjadi tidak aktif), yang dilakukan menggunakan parameter sebelum. Kemudian permintaan dikirim ke transfer data yang diinginkan. Setelah jawabannya diterima dari server, status tombol dikembalikan ke yang sama (teks berubah menjadi "Kirim", menjadi aktif). Jawabannya diperoleh sebagai data JSON. Jelaskan secara singkat parameter pengiriman permintaan AJAX, yang mungkin paling sering berguna: Di bawah ini saya akan memberikan beberapa contoh lagi untuk menggunakan kueri Ajax. Contoh kode HTML:
Kueri Ajax sederhana melalui jQuery menggunakan fungsi AJAX
Contoh lebih kompleks dari permintaan AJAX melalui jquery
uRL
Mengirim Alamat Permintaan Ajax
tipe
Metode pengiriman permintaan Dapatkan. atau memposting.
data.
Data mengirim data. Ini mungkin string dengan parameter dan nilainya di Par1 \u003d VAL1 & PAR2 \u003d VAL2 & ..., objek jQuery, misalnya, $ ("input") atau data lainnya.
tipe data
Jenis data dari server. Mungkin html, json, teks, skrip dan xml.
cache.
Caching The Query Browser (FALSE - jangan cache).
async.
Eksekusi permintaan asinkron, I.E. Program ini terus dieksekusi tanpa menunggu respons server. Jika Anda menentukan FALSE, kueri akan dieksekusi secara sinkron, sedangkan halaman tidak akan merespons apa pun sampai respons diterima dari server.
data proses.
Konversi data dikirim ke format URL. Jika perlu bahwa data tidak ditransformasikan, instal di FALSE. Misalnya, saat mengirim gambar ke server atau data XML.
jenis konten.
Jenis data yang ditransmisikan, default "aplikasi / x-www-form-urlencoded; charset \u003d utf-8". Jika Anda menentukan FALSE, judul tidak akan lulus jenis yang mungkin diperlukan, misalnya, ketika mengirim gambar ke server.
sebelum.
Fungsi dijalankan sebelum mengirim permintaan AJAX.
lengkap.
Fungsi dilakukan setelah menerima respons dari server (apa saja, berhasil atau tidak).
keberhasilan.
Fungsi dilakukan dengan kueri yang berhasil.
kesalahan
Fungsi dilakukan jika terjadi kesalahan.
Mengirim formulir dengan semua data permintaan Ajax melalui jquery
Kode Javascript:
$ ("# Myform"). Kirim (e.preventdefault (e); $ .ajax ((Jenis: $ (ini) .attr ("Metode"), URL: "
Agar halaman akan di-boot ulang dengan mengklik tombol "Kirim", pertama-tama batalkan tindakan browser standar menggunakan e.PreventDefaults () .
Dalam parameter data, kami lulus semua bidang formulir menggunakan $ (ini) .Serialize () - Fitur ini mengkonversi semua input-S dan pilih-S dalam string yang cocok untuk dikirim ke server.
Juga, parameter digunakan di sini. async: Salah. Sehingga sementara formulir tidak pergi ke server yang lain tidak dapat ditekan atau dilakukan.
Mengirim gambar atau file kueri Ajax melalui jQuery
Tugas mengirim file atau gambar ke server tanpa mem-boot ulang halaman cukup sering terjadi. Dalam contoh ini, pengacau 2 chip sekaligus: pilih file dengan menekan tombolyang dapat dibingkai seperti yang Anda suka dan tampilkan kemajuan saat mentransfer file Server Permintaan Ajax.
kode HTML akan seperti ini:
#addfile (posisi: relatif; melimpah: tersembunyi; lebar: 180px; tinggi:) #load_file (posisi: absolut; 0; lebar: 0; lebar: tinggi: 0px; flont: 0px; : 0; filter: alpha (opacity: 0);) #load_file: hover (cursor: pointer;)
Inti dari gagasan ini adalah bahwa input standar ditampilkan di atas tombol untuk memilih file, tetapi sepenuhnya transparan dan memiliki dimensi yang sama dengan tombol. Dengan demikian, pengguna melihat tombol tombol, tetapi ketika kursor mengarah padanya, sebenarnya mengarah pada input. Dengan demikian, ketika ia menekan tombol, sebenarnya menekan pemilihan file input. Agar tidak mengedip kursor setelah memilih file, ukuran font diatur ke 0px.
Sekarang Javascript Kirim kode file ke server dengan tampilan kemajuan:
$ (Fungsi () ($ ("# load_file"). Pada ("ganti", loadFile);)); Fungsi loadFile () ($ ("# addfile span"). HTML ("Diunggah 0%"); file \u003d $ ("# load_file"). File; formulir var \u003d formdata baru ("unggah" , File); $ .ajax ((URL: "
Ketika file dimuat ke server, tombol akan ditampilkan berapa banyak% yang sudah ditransfer ke server. Setelah unduhan selesai, nama tombol dikembalikan seperti itu, dan nilai input dan file diatur kosong sehingga Anda dapat memilih file baru lagi.
Contoh dari bagian server pada PHP (atas permintaan Eugene):
$ message \u003d ""; Jika (kosong ($ _ file ["unggah"] ["nama"]) || $ _FILES ["unggahan"] \u003d\u003d "tidak ada") ($ message \u003d "Anda tidak memilih file";) lain jika ($ _Files ["unggah"] ["ukuran"] \u003d\u003d 0 || $ _FILES ["unggah"] ["Ukuran"]\u003e 9437184) ($ pesan \u003d "Ukuran file tidak mematuhi standar (maksimum 9 MB) ";) Lain jika (($ _FILES [" unggah "] [" ketik "]! \u003d" Gambar / jpeg ") && ($ _Files [" unggah "] [" ketik "]! \u003d" Gambar / pjpeg ") && ($ _files ["unggah"] ["ketik"]! \u003d "gambar / gif") && ($ _files ["unggah"] ["ketik"]! \u003d "gambar / png")) ($ PESAN ")) (" Boleh Untuk mengunduh gambar HANYA JPG, GIF dan PNG. ";) Selain itu jika (! is_uploaded_file ($ _ file [" unggah "] [" tmp_name "]))) ($ message \u003d" Ada yang salah. Cobalah untuk mengunduh file lagi. ";) Lain lain ($ ftype \u003d $ _files [" unggah "] [" ketik "]; $ fname \u003d" newname_image. ". ($ Ftype \u003d\u003d" gambar / gif ": ($ ftype \u003d\u003d" Gambar / PNG "?" PNG ":" jpg ")); jika (move_uploaded_file ($ _ file [" unggahan "] [" tmp_name "], $ _Server [" Document_Root "]." / File /". ) ($ message \u003d "berhasil dimuat.";) Lainnya ($ pesan \u003d "Sesuatu tidak seperti itu untuk. Cobalah untuk mengunduh file lagi. ";)) Keluar ($ pesan);
Informasi tentang gambar yang diunduh akan terkandung dalam $ _FILES ["Unggah"], karena File skrip ditambahkan sebagai berikut: Form.append ("unggahan", file); Dengan demikian, semua yang diperlukan dari program PHP adalah untuk memverifikasi bahwa file tersebut sesuai dengan parameter yang diharapkan, mentransfer file ke folder yang diinginkan (Dalam contoh dalam folder file) dengan nama berikut (dalam contoh newname_image) dan mengembalikan jawaban ke browser, yang dalam contoh saya hanya ditampilkan oleh perintah Alert Pengguna (Pesan);
Situasi di mana Anda dapat dan bahkan perlu menggunakan kueri Ajax, banyak dan semuanya di sini tidak membongkar. Meskipun demikian, jika ada saran, contoh lain yang masuk akal untuk ditambahkan di sini, tulis di komentar.
Saya tidak bisa mengirim permintaan paling sederhana Ke servlet dengan jQuery. Tetapi pada saat yang sama, jika saya mengirim melalui formulir, semuanya bekerja dengan keras. Di bawah ini saya memberikan index.html, dari mana saya ingin mengirim login pengguna. Login.js, di mana permintaan itu sendiri, serletstore.java sendiri servlet itu sendiri. Dan struktur seluruh proyek.
login.js. Satu-satunya url yang kurang bekerja \u003d "http: // localhost: 8080 / testservlet / post", dan mereka "/ testservlet / post", "testservlet / post", "/ post," post "menyebabkan kesalahan 404.
Fungsi addnewvoting () (var xhr \u003d new xmlhttprequest (); var body \u003d "nama \u003d" encodeuricomponent ("nama") + "& surname \u003d" + encoduricomponent ("nama keluarga"); xhr.open ("posten); http: // localhost: 8080 / testservlet / post ", true) xhr.setrequestheader (" tipe konten "," aplikasi / x-www-form-urlencoded ") xhr.send (tubuh);); Fungsi addnewvoting1 () (var user \u003d ("firstname": "vlad") var jsonstring \u003d json.stringify (pengguna); var url \u003d "http: // localhost: 8080 / testservlet / post"; $ .ajax ((URL : URL, Metode: "Posting", Data: JSonstring, ContentType: "Aplikasi / JSON", Kesalahan: Fungsi (Pesan) (Pesan); konsol.log (JSONObject);), Sukses: Fungsi (Data) jsonobject \u003d json.parse (data); konsol.log (jsonobject);), header: ("menerima": "aplikasi / json", "menerima-bahasa": "id", "cache-control": "Max- usia \u003d 3600 ")))););
Saat menelepon fungsi kedua menampilkannya:
index.html.
Servletstore.java.
Impor javax.servlet.servletException; Impor javax.servlet.annotation.webservlet; Impor javax.servlet.http.htpsvlet; Impor javax.servlet.http.httpservletrequest; Impor javax.servlet.http.httpservletresponse; Impor java.io.ioexception; Impor java.io.crintwriter; @Webservlet (nama \u003d "post", urlpatterns \u003d "/ post") Servlet kelas publik memperpanjang httpservlet (@override void doget void (httpservletrequest req, httpservletresponse resp) melempar servletexception, ioexception (penulis printwriter \u003d penulis. Cetak ("halo");) @Override Void Dopost yang dilindungi (httpservletrequest req, httpservletresponse resp) melempar servletexception, ioexception (super.dopost (req, resp);))
Struktur proyek.
Pelajaran di mana dalam contoh akan mempertimbangkan penciptaan permintaan Ajax asinkron sederhana ke server. Sebagai metode untuk mentransmisikan permintaan, kami akan menggunakan metode GET dan metode posting. Di server, Anda akan menjalankan permintaan menggunakan skrip PHP.
Apa permintaan asinkron Ajax?
Teknologi Ajax terutama digunakan untuk menciptakan permintaan asinkron ke server. Permintaan asinkron adalah permintaan yang dilakukan di latar belakang dan tidak mencegah pengguna berinteraksi dengan halaman.
Saat mengirim permintaan asinkron, browser (halaman) tidak "beku", mis. Dengan itu, seperti sebelumnya, Anda bisa bekerja. Tapi kemudian, bagaimana mengetahui kapan jawabannya berasal dari server. Untuk menentukan ini, Anda harus memonitor properti Browser ReadyState (Status Kesiapan). Properti ini berisi nomor di mana seseorang dapat menilai nilai tahap mana adalah penyelidikan. Tabel berikut menunjukkan nilai-nilai utama properti readystate dan negara-negara yang sesuai.
Itu. Ternyata kita perlu melacak ketika nilai properti ReadyState akan sama dengan 4. Ini berarti apa yang ditanggapi server pada yang dikirim. Nilai yang tersisa dalam praktik digunakan cukup jarang, dan beberapa browser mungkin tidak mendukungnya.
Untuk menentukan pada tahap apa kueri, Anda harus menggunakan objek XMLHTTRequest OnreadTechange. Acara ini terjadi setiap kali nilai properti readystate berubah. Akibatnya, di pawang acara ini (fungsi yang tidak disebutkannamen atau bernama), Anda dapat mendaftarkan tindakan yang akan memeriksa apakah properti ini 4 sama dengan dan, misalnya, respons server output ke halaman.
Membuat kueri Ajax Asynchronous (Dapatkan Metode)
Pertimbangkan penciptaan asinkron Permintaan Ajax Pada contoh, yang akan setelah mengunduh halaman untuk menyambut pengguna dan menampilkan alamat IP-nya.
Untuk melakukan ini, Anda perlu membuat 2 file di server dalam satu direktori:
- selamat datang.html - Halaman HTML yang akan ditampilkan kepada pengguna. Di halaman yang sama, letakkan skrip yang akan menjalankan semua tindakan yang diperlukan untuk pekerjaan AJAX pada sisi klien.
- file pemrosesan.php - PHP yang akan memproses permintaan di sisi server, dan membentuk jawaban. Mari kita mulai berkembang dari membuat struktur dasar dari file welcome.html
Contoh Ajax
Pertimbangkan urutan tindakan yang perlu dilakukan pada sisi klien (dalam kode JavaScript):
- Metode dengan yang akan dikirim ke server (dapatkan, posting).
- URL yang akan memproses permintaan server.
- Jenis Permintaan: Sinkron (Salah) atau Asinkron (Benar).
- Nama dan kata sandi jika perlu.
Berlangganan Acara OnreadyStatechange dari objek XHR dan tunjukkan pawang sebagai fungsi anonim atau bernama. Setelah itu, buat kode dalam fungsi ini, yang akan memeriksa status respons, dan melakukan langkah-langkah tertentu pada halaman. Jawaban yang berasal dari server selalu dalam properti responstextext.
Selain itu, dengan nilai yang valid dari properti ReadyState nomor 4, Anda dapat memeriksa nilai properti status. Properti ini menentukan status kueri. Jika itu 200, maka semuanya baik-baik saja. Jika tidak, terjadi kesalahan (misalnya, 404 - URL tidak ditemukan).
Kami akan mengirimkan permintaan ke server menggunakan metode Kirim ().
Jika Anda menggunakan metode GET untuk mengirim kueri, lalu mengirimkan data ke parameter metode ini tidak. Mereka ditransmisikan sebagai bagian dari URL.
Jika Anda menggunakan metode pos untuk mengirim kueri, maka data harus ditransfer sebagai parameter menggunakan metode Kirim (). Selain itu, sebelum menelepon metode ini, Anda harus menginstal header tipe konten sehingga server tahu di mana pengkodean datang kepada-Nya dan dapat menguraikannya.
Siapkan data yang diperlukan untuk melaksanakan permintaan di server. Jika Anda tidak memerlukan data apa pun untuk dieksekusi di server, langkah ini dapat dilewati.
Buat variabel yang akan berisi instance objek XHR (xmlhttprequest).
Konfigurasikan permintaan menggunakan metode Open ().
Parameter berikut ditentukan:
Isi elemen skrip:
// 2. Buat permintaan var request \u003d new xmlhttpreest (); // 3. Menyiapkan permintaan. Upen kueri ("Dapatkan", "Processing.php", Benar); // 4. Berlangganan peristiwa onreadystatechange dan memprosesnya menggunakan permintaan fungsi anonim.AddeventListener ("readystatechange", fungsi () (// Jika status kueri 4 status dan permintaan status 200 (OK) if ((Ready.ReadyState \u003d\u003d 4) && (Request.Status \u003d\u003d 200)) (// Misalnya, tarik objek XHR ke konsol. Log Browser Console; // dan jawaban (teks), yang berasal dari server dalam konsol peringatan. jendela (permintaan.responsext); // dapatkan id \u003d selamat datang var welcome \u003d document.getelementbyid ("selamat datang"); // ganti isi item dengan jawaban yang datang dari welcome.innerhtml server \u003d permintaan. ))); // 5. Mengirim permintaan ke server permintaan. () Server;
Akibatnya, file welcome.html akan memiliki kode berikut:
Contoh Ajax
Di server (menggunakan PHP):
- Kami menerima data. Jika data dikirim melalui metode GET, kemudian dari Global Array $ _GET ["Nama"]. Dan jika data ditransmisikan menggunakan metode posting, maka dari Global Array $ _post ["Nama"].
- Menggunakan data ini, jalankan beberapa tindakan di server. Sebagai akibatnya kita mendapatkan jawaban. Tarik dengan gema.
Membuat kueri Ajax Asynchronous (Metode Post)
Ubah contoh di atas. Sekarang Ajax Query ke server akan dilakukan setelah menekan tombol. Dia akan menerima nama yang memasuki pengguna ke elemen input dan mengirimkannya melalui metode pos ke server. Setelah menerima respons dari server, ganti konten elemen div pada halaman.
Contoh Ajax
