Cara Program di Ajax (dengan Gambar)

Isi kandungan:

Cara Program di Ajax (dengan Gambar)
Cara Program di Ajax (dengan Gambar)

Video: Cara Program di Ajax (dengan Gambar)

Video: Cara Program di Ajax (dengan Gambar)
Video: Daftar Buah yang Bisa Bantu Menurunkan Asam Urat 2024, Mac
Anonim

AJAX atau Ajax adalah JavaScript dan XML Asinkron. Ini digunakan untuk menukar data dengan pelayan dan mengemas kini sebahagian halaman web tanpa memuatkan keseluruhan halaman web di sisi klien. Paparan dan tingkah laku laman web yang ada tidak terganggu sama sekali semasa bertukar dan mengemas kini data. Ajax juga dianggap sebagai sekumpulan teknologi yang memiliki HTML, CSS, DOM, dan JavaScript yang digunakan untuk menandai, membuat gaya, dan memungkinkan pengguna untuk berinteraksi dengan maklumat di laman web. Dalam artikel ini, ia akan menunjukkan kepada anda cara menulis program sederhana dalam Ajax langkah demi langkah menggunakan Notepad ++. Beberapa pengetahuan asas mengenai HTML, DOM, JavaScript, dan pelayan Web tempatan atau Pelayan Web jauh diperlukan. WampServer digunakan dalam artikel ini untuk ujian.

Langkah-langkah

Kaedah 1 dari 2: Pengekodan

3929304 1
3929304 1

Langkah 1. Sediakan gambar untuk menulis program Ajax

Simpan gambar di folder yang sama di mana anda akan menyimpan fail html dan teks anda yang memaparkan program Ajax. Dalam artikel ini, direktori "ProgramInAjax" disiapkan di dalam folder "wamp" di bawah direktori "www" tempat anda memasang WampServer.

3929304 2
3929304 2

Langkah 2. Buka mana-mana penyunting teks

Notepad ++ digunakan sebagai penyunting teks dalam artikel ini.

3929304 3
3929304 3

Langkah 3. Buat fail baru dalam penyunting teks

Taipkan perkara berikut:


Aduh! Ke mana perginya bunga kuning itu?

Anda boleh menaip apa sahaja yang anda mahukan di dalam tag html di sini.

3929304 4
3929304 4

Langkah 4. Simpan fail sebagai dokumen teks dengan nama "ajax-data.txt

” Sebenarnya, anda boleh menamakan fail apa sahaja yang anda mahukan tetapi pastikan anda memasukkan nama fail yang sama dengan pengekodan dalam baris ini:

xmlhttp.open ("DAPATKAN", "ajax-data.txt", benar);

Walau bagaimanapun, tag HTML digunakan untuk header sehingga kelihatan lebih besar dan lebih tidak kelihatan.

3929304 5
3929304 5

Langkah 5. Buat fail baru untuk laman web

Fail ini adalah untuk fail HTML untuk melihat program Ajax dalam penyemak imbas Web.

3929304 6
3929304 6

Langkah 6. Salin kod berikut:

  Program Ajax Pertama Saya Letakkan kod Ajax di bawah.  


Klik butang di bawah untuk menjadikan bunga itu hilang

3929304 7
3929304 7

Langkah 7. Simpan fail

Klik butang simpan pada bar menu. Kotak "Simpan Sebagai" dibuka. Masukkan nama untuk dokumen anda. Dalam artikel ini, nama file adalah "indeks."

3929304 8
3929304 8

Langkah 8. Klik anak panah ke bawah untuk memilih peluasan fail

Pada bidang "Simpan sebagai jenis", klik anak panah tarik turun untuk memilih peluasan fail.

3929304 9
3929304 9

Langkah 9. Pilih "Fail Bahasa Penanda Teks Hyper

” Pastikan ia mempunyai "html" di dalam kurungan. Klik simpan setelah memilih "html."

3929304 10
3929304 10

Langkah 10. Uji fail HTML dalam penyemak imbas Web

Buka laman web dalam penyemak imbas web. Pergi ke "Run" di bar menu atas. Klik dan pilih "Lancarkan di Chrome" atau penyemak imbas apa pun yang dipasang di sistem anda. Google Chrome digunakan untuk pengujian dalam artikel ini. Anda mungkin memasang beberapa penyemak imbas lain dalam Notepad ++. Anda boleh memilih penyemak imbas kegemaran anda. Pilihan lain, anda boleh mengklik ikon WampServer di bar tugas di bahagian bawah skrin dan memilih "Localhost." Anda harus melihat direktori anda di sana dan klik fail indeks.

Langkah 11. Klik butang di bawah gambar untuk menguji skrip

3929304 12
3929304 12

Langkah 12. Halaman web terakhir anda

Halaman web anda harus disegarkan dengan maklumat yang anda masukkan ke dalam fail teks pada awalnya. Bunga dan tajuk mesti diganti dengan tajuk baru yang disebut "Oh oh! Ke mana perginya bunga kuning itu?"

Kaedah 2 dari 2: Penjelasan Kod

3929304 13
3929304 13

Langkah 1. Bahagian badan

Badan HTML mempunyai bahagian "div" dan satu butang. Bahagian ini akan digunakan untuk memaparkan maklumat yang dikembalikan dari pelayan. Butang memanggil fungsi bernama "loadXMLDoc ()," jika diklik.

   Program Ajax Pertama Saya   Gambar terdapat di sini untuk menguji program Ajax.

Klik butang di bawah untuk menjadikan bunga itu hilang

Butang ada di sini

3929304 14
3929304 14

Langkah 2. Bahagian kepala

Bahagian kepala file HTML memiliki tag skrip yang berisi fungsi "loadXMLDoc ()".

 Program Ajax Pertama Saya Letakkan kod Ajax di bawah. 

Langkah 3. Penjelasan Lebih Banyak

Perkara yang paling penting dari Ajax adalah objek XMLHttpRequest. Ia digunakan untuk menukar data dengan pelayan dan semua penyemak imbas moden menyokong objek tersebut.

  • Sintaks untuk membuat objek XMLHttpRequest () berubah-ubah = XMLHttpRequest baru (); tetapi pada masa yang sama sintaks untuk membuat versi lama Internet Explorer (IE5 dan IE6) yang menggunakan objek ActiveX berubah-ubah = ActiveXObject baru ("Microsoft. XMLHTTP");.
  • Untuk menangani semua penyemak imbas moden, perlu memeriksa apakah penyemak imbas menyokong objek XMLHttpRequest. Sekiranya berlaku, ia akan mencipta objek XMLHttpRequest. Sekiranya tidak, ia akan membuat objek ActiveX untuknya.
  • Kemudian ia akan menghantar permintaan ke pelayan. Kaedah objek XMLHttpRequest yang disebut "open ()" dan "send ()" akan digunakan. xmlhttp.open ("DAPATKAN", "ajax_info.txt", benar); xmlhttp.send ();.

Petua

  • Pilihan lain untuk melihat hasilnya, anda boleh membuka penyemak imbas kegemaran anda dan menaip "localhost / ProgramInAjax" di bar alamat web untuk memaparkan halaman web. Anda seharusnya dapat melihat halaman web jika menamakan fail HTML anda ke "index.html."
  • Simpan fail html anda lebih kerap semasa kerja anda. Menekan Ctrl dan S pada masa yang sama untuk pengguna Window akan menjimatkan lebih banyak masa.
  • Pastikan untuk menambahkan fail HTML yang disimpan di lokasi yang sama dengan fail teks gambar dan data anda.
  • Apabila anda menamakan fail, peka huruf besar kecil apabila anda menambahkan nama-nama tersebut ke dalam kod. Contohnya, "myImage" berbeza dengan "MyImage" atau "myimage."

Disyorkan: