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

Tujuan utama sebuah perpustakaan AJAX seperti jQuery adalah untuk menyederhanakan permintaan AJAX untuk programmer HTML5 dan CSS3. Sulit dipercaya betapa mudahnya ini bisa dengan jQuery.

Cara memasukkan file teks dengan AJAX

Periksa kode bersih ini:

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

HTML sangat bersih. Ini hanya menciptakan div kosong yang disebut output.

Contoh ini tidak menggunakan AJAX, jadi jika tidak berfungsi, Anda mungkin perlu mengingat beberapa detail tentang bagaimana AJAX bekerja. Sebuah program yang menggunakan AJAX harus dijalankan melalui server web, tidak hanya dari file lokal. Selain itu, file yang dibaca harus berada di server yang sama dengan program yang membuat permintaan AJAX.

Mekanisme beban () yang dijelaskan di sini cocok untuk situasi dasar di mana Anda ingin memuat cuplikan teks biasa atau potongan kode HTML ke dalam halaman Anda.

Membangun CMS orang miskin dengan AJAX

AJAX dan jQuery bisa menjadi cara yang sangat berguna untuk membangun situs web yang efisien, bahkan tanpa pemrograman sisi server. Seringkali sebuah situs web didasarkan pada serangkaian elemen kecil yang dapat ditukar dan digunakan kembali. Anda bisa menggunakan AJAX untuk membangun kerangka kerja yang memungkinkan penggunaan ulang dan modifikasi konten web dengan mudah.

Meskipun tidak ada yang mengejutkan dari halaman dari sudut pandang pengguna, melihat kode dapat menunjukkan beberapa kejutan:

CMS Menggunakan AJAX $ (init); fungsi init () {$ ("# heading"). beban ("kepala. html"); $ ("# menu"). load ("menu. html"); $ ("# content1"). load ("story1. html"); $ ("# content2"). load ("story2. html"); $ ("# footer"). load ("footer. html");}; 
Lihatlah kode ini, dan Anda dapat melihat fitur menarik ini:


Halaman tidak memiliki konten! Semua div kosong. Tak satu pun dari teks yang ditampilkan dalam screen shot hadir dalam dokumen ini, namun semua ditarik dari file yang lebih kecil secara dinamis.


Halaman ini terdiri dari divs bernama kosong. Daripada konten tertentu, halaman terdiri dari placeholder dengan ID.


Menggunakan jQuery. Perpustakaan jQuery digunakan untuk menyederhanakan pemuatan data melalui panggilan AJAX dengan sangat baik.


Semua konten ada dalam file terpisah. Lihatlah melalui direktori, dan Anda dapat melihat file HTML yang sangat sederhana yang berisi sebagian kecil halaman. Misalnya, story1. html terlihat seperti ini:
Buku I - Membuat Pondasi HTML

Yayasan HTML yang Baik
Ini Semua Tentang Validasi
Memilih Alat Anda
Mengelola Informasi dengan Daftar dan Tabel
Membuat Koneksi dengan Tautan
Menambahkan Gambar
Membuat formulir




Metode init () berjalan pada dokumen .siap . Bila dokumen sudah siap, halaman menjalankan metode init ().


Metode init () menggunakan panggilan AJAX untuk memuat konten secara dinamis. Tidak lebih dari serangkaian metode jQuery load ().


Pendekatan ini mungkin tampak seperti banyak pekerjaan, namun memiliki beberapa karakteristik yang sangat menarik:


Jika Anda membangun sebuah situs besar dengan beberapa halaman, Anda biasanya ingin merancang tampilan visual sekali dan menggunakan kembali jenderal yang sama. template berulang kali


Juga, Anda mungkin akan memiliki beberapa elemen yang konsisten pada beberapa halaman. Anda bisa membuat dokumen default dan menyalin dan menempelkannya untuk setiap halaman, namun pendekatan ini menjadi berantakan. Apa yang terjadi jika Anda telah membuat 100 halaman sesuai template dan kemudian perlu mengganti header? Anda perlu melakukan perubahan pada 100 halaman yang berbeda.


Keuntungan dari pendekatan gaya template adalah penggunaan ulang kode. Sama seperti penggunaan gaya eksternal memungkinkan Anda mengalikan keseluruhan style sheet di ratusan dokumen, merancang template tanpa konten memungkinkan Anda menyimpan cuplikan kode dalam file yang lebih kecil dan menggunakannya kembali. Semua 100 halaman mengarah ke file menu yang sama, jadi jika Anda ingin mengubah menu, ubah satu file dan semuanya berubah dengannya.
Inilah cara Anda menggunakan pendekatan semacam ini:


Buat satu template untuk keseluruhan situs Anda.
Bangun HTML dasar dan CSS untuk mengelola keseluruhan tampilan dan nuansa keseluruhan situs Anda. Jangan khawatir tentang konten. Hanya membangun placeholder untuk semua komponen halaman Anda. Pastikan untuk memberi setiap elemen ID dan tuliskan CSS untuk mendapatkan posisi sesuai keinginan.


Tambahkan dukungan jQuery.
Buat link ke perpustakaan jQuery, dan buatlah metode init default (). Masukkan kode untuk menangani penempatan bagian halaman yang akan selalu konsisten.


Gandakan template.
Setelah Anda memahami bagaimana template akan bekerja, buat salinan untuk setiap halaman situs Anda.


Sesuaikan setiap halaman dengan mengubah fungsi init () .
Satu-satunya bagian dari template yang berubah adalah fungsi init (). Semua halaman Anda akan sama, kecuali mereka memiliki fungsi init () yang disesuaikan yang memuat konten yang berbeda.


Muat konten ubahsuaian ke dalam divs dengan AJAX.
Gunakan fungsi init () untuk memuat konten ke dalam setiap div.


Ini adalah cara yang bagus untuk mengelola konten, namun ini bukan sistem pengelolaan konten yang lengkap. Bahkan AJAX tidak dapat mengizinkan Anda untuk menyimpan konten di web. Sistem pengelolaan konten yang lebih kompleks juga menggunakan database daripada file untuk menangani konten. Anda memerlukan semacam pemrograman sisi server (seperti PHP) dan biasanya database (seperti mySQL) untuk menangani pekerjaan semacam ini.