Cara Membuat Permintaan AJAX dengan jQuery untuk Pemrograman HTML5 dan CSS3 - dummies

Tujuan utama perpustakaan AJAX seperti jQuery adalah untuk memudahkan permintaan AJAX untuk pemrogram HTML5 dan CSS3. Sukar untuk mempercayai betapa mudahnya ini dengan jQuery.

Bagaimana untuk memasukkan fail teks dengan AJAX

Lihat kod bersih ini:

ajax. html $ (dokumen). siap (getAJAX); fungsi getAJAX () {$ ("# output"). beban ("hello txt");}

HTML sangat bersih. Ia hanya menghasilkan output yang dipanggil div kosong.

Contoh ini menggunakan AJAX, jadi jika ia tidak berfungsi, anda mungkin perlu mengingati beberapa butiran tentang cara kerja AJAX. Program yang menggunakan AJAX harus dijalankan melalui pelayan web, bukan hanya dari fail setempat. Juga, fail yang dibaca seharusnya berada pada pelayan yang sama seperti program yang membuat permintaan AJAX. Mekanisme beban () yang diterangkan di sini sesuai untuk situasi asas di mana anda ingin memuatkan potongan kod teks-teks atau HTML ke dalam halaman anda.

Membina CMS lelaki miskin dengan AJAX

AJAX dan jQuery boleh menjadi cara yang sangat berguna untuk membina laman web yang cekap, walaupun tanpa pengaturcaraan sisi pelayan. Lazimnya laman web adalah berdasarkan kepada beberapa elemen kecil yang boleh ditukar dan digunakan semula. Anda boleh menggunakan AJAX untuk membina rangka kerja yang membolehkan penggunaan semula dan pengubahsuaian kandungan web mudah.

Walaupun tidak ada apa-apa yang mengejutkan tentang halaman dari perspektif pengguna, lihat kod boleh menunjukkan beberapa kejutan:

CMS Menggunakan AJAX $ (init); fungsi init () {$ ("# tajuk"). beban ("kepala. html"); $ ("# menu"). beban ("menu html"); $ ("# content1"). beban ("story1. html"); $ ("# content2"). beban ("story2. html"); $ ("# footer"). beban ("footer. html");};

Halaman tidak mempunyai kandungan!

Semua divs kosong. Tiada teks yang ditunjukkan dalam pukulan skrin hadir dalam dokumen ini, tetapi semua ditarik dari fail yang lebih kecil secara dinamik. Halaman terdiri daripada divs bernama kosong.
Daripada mana-mana kandungan tertentu, halaman terdiri daripada ruang letak dengan ID. Ia menggunakan jQuery.
Perpustakaan jQuery digunakan untuk memudahkan pemuatan data melalui panggilan AJAX. Semua kandungan dalam fail berasingan.
Lihat melalui direktori, dan anda dapat melihat fail HTML yang sangat mudah yang mengandungi bahagian kecil halaman. Sebagai contoh, cerita1. html kelihatan seperti ini: Buku I - Mencipta Yayasan HTML
```
Yayasan HTML Bunyi

Semua Tentang Pengesahan
Memilih Alat Anda
Menguruskan Maklumat dengan Senarai dan Jadual
Membuat Sambungan dengan Pautan
Menambah Imej
Mencipta borang
Kaedah
```
init () berjalan pada dokumen .siap . Apabila dokumen sudah siap, halaman menjalankan kaedah init (). Kaedah
init () menggunakan panggilan AJAX untuk memuat kandungan secara dinamik. Ia tidak lebih daripada satu siri kaedah jQuery load (). Pendekatan ini mungkin kelihatan seperti banyak kerja, tetapi ia mempunyai ciri-ciri yang sangat menarik:

Jika anda sedang membina sebuah laman besar dengan beberapa halaman, anda biasanya ingin merancang penampilan visual sekali dan menggunakan semula umum yang sama templat berulang kali.

Juga, anda mungkin akan mempunyai beberapa elemen yang akan konsisten dalam beberapa halaman. Anda hanya boleh membuat dokumen lalai dan salin dan tampal untuk setiap halaman, tetapi pendekatan ini menjadi kemas. Apa yang berlaku jika anda telah membuat 100 halaman mengikut template dan kemudian perlu menukar pengepala? Anda perlu membuat perubahan pada 100 halaman yang berbeza.
Kelebihan pendekatan gaya template adalah penggunaan semula kod. Sama seperti penggunaan gaya luaran membolehkan anda melipatgandakan helaian gaya merentasi beratus-ratus dokumen, mereka bentuk template tanpa kandungan membolehkan anda menyimpan potongan kod dalam fail yang lebih kecil dan menggunakannya semula. Semua 100 muka surat menunjuk ke fail menu yang sama, jadi jika anda mahu menukar menu, tukar satu fail dan segala perubahan dengannya.

Inilah cara anda menggunakan pendekatan seperti berikut:

Buat templat tunggal untuk keseluruhan tapak anda.

Membina HTML dan CSS asas untuk mengurus rupa dan rasa keseluruhan untuk keseluruhan tapak anda. Jangan bimbang tentang kandungan lagi. Hanya membina ruang letak untuk semua komponen halaman anda. Pastikan untuk memberi setiap elemen ID dan tulis CSS untuk mendapatkan kedudukan yang anda inginkan.

Tambah sokongan jQuery.
Buat pautan ke pustaka jQuery, dan buat kaedah init init (). Masukkan kod untuk mengendalikan pop bahagian-bahagian halaman yang sentiasa konsisten.

Duplikat templat.
Selepas anda memahami bagaimana template akan berfungsi, buat satu salinan untuk setiap halaman laman web anda.

Sesuaikan setiap halaman dengan menukar fungsi
init () . Satu-satunya bahagian templat yang berubah ialah fungsi init (). Semua halaman anda akan sama, kecuali mereka mempunyai fungsi init () yang disesuaikan yang memuat kandungan yang berbeza.

Muatkan kandungan tersuai ke dalam div dengan AJAX.
Gunakan fungsi init () untuk memuatkan kandungan ke dalam setiap div.

Ini adalah cara yang baik untuk menguruskan kandungan, tetapi ia bukan sistem pengurusan kandungan penuh. Malah AJAX tidak dapat membenarkan anda untuk

menyimpan kandungan di web. Sistem pengurusan kandungan yang lebih kompleks juga menggunakan pangkalan data berbanding fail untuk mengendalikan kandungan. Anda memerlukan beberapa pengaturcaraan sisi pelayan (seperti PHP) dan biasanya pangkalan data (seperti mySQL) untuk mengendalikan kerja semacam ini.