1. Alasan utama menggunakan Ajax
1. Untuk mencapai pengalaman pengguna yang lebih baik melalui aplikasi Ajax yang sesuai;
2. Untuk mentransfer beberapa pekerjaan sebelumnya yang dibebani oleh server ke klien, yang bermanfaat bagi daya pemrosesan klien yang menganggur dan mengurangi server. dan beban bandwidth, sehingga mencapai tujuan menghemat ruang ISP dan biaya sewa bandwidth.
2. Kutipan
Jesse James Garrett, pengusul paling awal dari konsep Ajax, percaya bahwa Ajax adalah singkatan dari Asynchronous JavaScript dan XML. Ajax bukanlah bahasa atau teknologi baru. Ini sebenarnya beberapa teknologi yang dikombinasikan dengan cara tertentu untuk memainkan peran masing-masing dalam kolaborasi umum. Ini termasuk:
· Menggunakan XHTML dan CSS untuk standarisasi presentasi
· Menggunakan DOM Menyadari tampilan dinamis dan interaksi;
·Gunakan XML dan XSLT untuk pertukaran dan pemrosesan data;
·Gunakan XMLHttpRequest untuk pembacaan data asinkron;
·Terakhir gunakan JavaScript untuk mengikat dan memproses semua data;
Prinsip kerja Ajax setara dengan menambahkan lapisan tengah dibuat untuk melakukan operasi pengguna secara asinkron dan respons server tidak sinkron. Tidak semua permintaan pengguna diserahkan ke server, sebagian verifikasi data dan pemrosesan data diserahkan kepada mesin Ajax itu sendiri. Hanya ketika ditentukan bahwa data baru perlu dibaca dari server, maka mesin Ajax akan mengirimkan permintaan tersebut ke server atas namanya.
3. Ikhtisar
Meskipun Garrent mencantumkan 7 teknologi penyusun Ajax, saya pribadi percaya bahwa inti dari apa yang disebut Ajax hanyalah JavaScript, XMLHTTPRequest dan DOM. Jika format data yang digunakan adalah XML, XML juga dapat ditambahkan (Ajax dimulai dari sisi server) Yang dikembalikan data bisa dalam format XML atau format lain seperti teks).
Dalam metode interaksi lama, pengguna memicu permintaan HTTP ke server, dan server memprosesnya lalu mengembalikan halaman HTML baru ke klien. Setiap kali server memproses permintaan yang dikirimkan oleh klien, klien hanya dapat menunggu diam. , dan meskipun itu hanya interaksi kecil dan hanya perlu mendapatkan sebagian data sederhana dari server, halaman HTML lengkap harus dikembalikan, dan pengguna harus membuang waktu dan bandwidth untuk membaca ulang seluruh halaman setiap saat. .
Setelah menggunakan Ajax, pengguna merasa hampir semua operasi akan merespon dengan cepat tanpa menunggu halaman dimuat ulang (layar putih).
1. XMLHTTPRequest
Salah satu fitur terbesar Ajax adalah ia dapat mengirimkan atau membaca dan menulis data ke server tanpa menyegarkan halaman (juga dikenal sebagai memperbarui halaman tanpa menyegarkan). Fitur ini terutama memanfaatkan komponen XMLHTTP objek XMLHTTPRequest. Dengan cara ini, aplikasi desktop hanya dapat bertukar data dengan server tanpa harus menyegarkan antarmuka setiap saat atau mengirimkan pekerjaan pemrosesan data ke server setiap saat. Hal ini tidak hanya mengurangi beban pada server tetapi juga mempercepat waktu pemrosesan . Kecepatan respons dan mempersingkat waktu tunggu pengguna.
Microsoft adalah yang pertama menerapkan XMLHTTP. IE (IE5 dan lebih tinggi) memperluas fungsinya dengan memungkinkan pengembang untuk menggunakan komponen XMLHTTP ActiveX di dalam halaman Web. Pengembang dapat langsung mentransfer data ke atau mengambil data dari server tanpa menavigasi dari data halaman Web . Fitur ini penting karena membantu mengurangi kesulitan koneksi tanpa kewarganegaraan, dan juga dapat meningkatkan kecepatan proses dengan menghilangkan kebutuhan untuk mengunduh HTML yang berlebihan. Mozilla (Mozilla 1.0 dan yang lebih baru serta NetScape 7 dan yang lebih baru) merespons dengan membuat kelas proksi XML warisannya sendiri: kelas XMLHttpRequest. Konqueror (dan Safari v1.2, juga browser berbasis KHTML) juga mendukung objek XMLHttpRequest, dan Opera juga akan mendukung objek XMLHttpRequest di v7.6x+ dan versi yang lebih baru. Untuk sebagian besar, objek XMLHttpRequest sangat mirip dengan komponen XMLHTTP, dan metode serta propertinya serupa, kecuali sejumlah kecil properti yang tidak didukung.
Penerapan XMLHttpRequest:
·Aplikasi objek XMLHttpRequest di JS
var xmlhttp = new XMLHttpRequest();
·Aplikasi komponen XMLHTTP Microsoft di JS
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP)
;
Metode objek XMLHttpRequest
/**
* Instansiasi XMLHttpRequest lintas-browser.
*/
if (typeof XMLHttpRequest == 'tidak terdefinisi') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
untuk ( var i=0; i < msxmls.length; i++) {
coba {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
lempar Kesalahan baru("Tidak ada komponen XML yang terpasang! ")
}
}
function createXMLHttpRequest() {
coba {
// Mencoba membuatnya "dengan cara Mozilla"
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
// Sepertinya tidak - sekarang dengan cara IE
if (window.ActiveXObject ) {
kembalikan ActiveXObject baru(
getXMLPrefix() + "
.XmlHttp
"
)
;
XMLHttpRequest objek metode
| metode | deskripsi |
| abort() | membatalkan permintaan saat ini |
| getAllResponseHeaders() | mengembalikan header lengkap sebagai string |
| getResponseHeader("headerLabel") | mengembalikan label header tunggal sebagai string |
| open("method","URL"[,asyncFlag[ , "userName"[, "password"]]]) | Tetapkan URL target, metode, dan parameter lain dari permintaan yang tertunda |
| kirim(konten) | kirim permintaan |
| setRequestHeader("label", "value") | atur header dan kirimkan bersama-sama dengan permintaan |
atribut objek XMLHttpRequest
| deskripsi | peristiwa |
| readyState | |
| untuk | perubahan status |
| Status objek (bilangan bulat): 0 = tidak diinisialisasi 1 = Membaca 2 = Baca 3 = Berinteraksi 4 = Lengkapi | |
| versi teks dari data yang dikembalikan oleh proses server respondText | . |
| Objek dokumen XML yang kompatibel dengan DOM dikembalikan oleh | proses serverresponsiveXML |
| yang | dikembalikan oleh server, seperti: 404 = "File tidak ditemukan", 200 = |
| "Sukses" | |
| dikembalikan oleh server | statusText | . Informasi teks
2. JavaScript JavaScript
adalah bahasa pemrograman yang banyak digunakan di browser. Ini telah diremehkan sebagai bahasa yang buruk di masa lalu (memang membosankan untuk digunakan) dan sering digunakan oleh sebagian orang tujuan. Gadget dan lelucon yang mencolok atau validasi formulir yang membosankan. Namun faktanya ini adalah bahasa pemrograman yang nyata, memiliki standar tersendiri dan didukung secara luas di berbagai browser.
3.Model Objek Dokumen
DOM
.DOM adalah sekumpulan API untuk file HTML dan XML. Ini memberikan representasi struktural file, memungkinkan Anda mengubah konten dan visibilitasnya. Esensinya adalah membangun jembatan komunikasi antara halaman web dan Script atau bahasa pemrograman.
Semua properti, metode, dan peristiwa yang pengembang WEB dapat operasikan dan buat file diwakili oleh objek (misalnya, dokumen mewakili objek "file itu sendiri", objek tabel mewakili objek tabel HTML, dll.). Objek-objek ini dapat diakses dari Script oleh sebagian besar browser saat ini.
Halaman web yang dibangun dengan HTML atau XHTML juga dapat dianggap sebagai kumpulan data terstruktur. Data ini dimasukkan ke dalam DOM (Document Object Model).
4. XML
Mesin Ajax yang disebutkan oleh Jesse James Garrett sebenarnya adalah aplikasi JavaScript yang relatif kompleks yang digunakan untuk memproses permintaan pengguna, membaca dan menulis server, dan mengubah konten DOM.
Mesin Ajax JavaScript membaca informasi dan menulis ulang DOM secara interaktif. Hal ini memungkinkan halaman web direkonstruksi dengan mulus, yaitu mengubah konten halaman setelah halaman diunduh. namun untuk membuat laman web benar-benar dinamis, tidak hanya memerlukan interaksi internal, namun juga perolehan data dari luar. Dulu, kami mengizinkan pengguna memasukkan data dan mengubah konten laman web melalui DOM, namun sekarang, XMLHTTPRequest memungkinkan. kita untuk Membaca dan menulis data di server tanpa memuat ulang halaman, meminimalkan input pengguna.
Komunikasi jaringan berbasis XML bukanlah hal baru. Faktanya, FLASH dan JAVA Applet telah bekerja dengan baik. Sekarang interaksi kaya semacam ini juga tersedia di halaman web. Hal ini didasarkan pada teknologi standar dan didukung secara luas dan tidak memerlukan plug-in atau plug-in. Unduh applet.
Ajax adalah transformasi aplikasi WEB tradisional. Di masa lalu, server membuat halaman HTML setiap kali dan mengembalikannya ke klien (browser). Di sebagian besar situs web, setidaknya 90% dari banyak halaman adalah sama, seperti: struktur, format, header, footer, iklan, dll. Satu-satunya perbedaan adalah sebagian kecil dari konten, tetapi setiap kali server akan menghasilkan semua Pengembalian halaman bagi klien merupakan pemborosan yang tidak terlihat, baik itu waktu pengguna, bandwidth, konsumsi CPU, atau bandwidth dan ruang yang disewa oleh ISP dengan harga tinggi. Jika dihitung berdasarkan halaman, hanya beberapa K atau puluhan K mungkin tidak terlalu mengesankan, namun bagi ISP besar seperti SINA yang menghasilkan jutaan halaman setiap hari, bisa dikatakan kerugian yang sangat besar. AJAX dapat berfungsi sebagai lapisan tengah antara klien dan server untuk menangani permintaan klien dan mengirimkan permintaan tersebut ke server sesuai kebutuhan. Anda bisa mendapatkan apa yang Anda gunakan dan berapa banyak yang Anda gunakan, sehingga tidak akan ada redundansi dan pemborosan data . , mengurangi jumlah total data yang diunduh, dan tidak perlu memuat ulang seluruh konten saat memperbarui halaman. Hanya bagian yang perlu diperbarui yang dapat diperbarui. Dibandingkan dengan metode pemrosesan dan pemuatan ulang latar belakang murni, pengguna menunggu waktu dipersingkat dan pemborosan sumber daya berkurang. Diminimalkan, berdasarkan teknologi yang terstandarisasi dan didukung secara luas, dan tidak memerlukan plug-in atau applet yang diunduh, Ajax adalah solusi yang saling menguntungkan bagi pengguna dan ISP.
Ajax memisahkan antarmuka dan aplikasi dalam WEB (bisa juga dikatakan memisahkan data dan presentasi). Di masa lalu, tidak ada batasan yang jelas antara keduanya. Pemisahan data dan presentasi kondusif untuk pembagian kerja dan kerja sama dan mengurangi kebutuhan personel non-teknis untuk berinteraksi dengan halaman. Modifikasi menyebabkan kesalahan aplikasi WEB, meningkatkan efisiensi, dan lebih cocok untuk sistem penerbitan saat ini. Anda juga dapat mentransfer beberapa pekerjaan sebelumnya yang dibebani oleh server ke klien, yang bermanfaat bagi kekuatan pemrosesan klien yang menganggur.
4.
Munculnya penerapan konsep Ajax telah membuka awal era pemutakhiran halaman tanpa penyegaran, dan cenderung menggantikan penggunaan formulir (form) submission dalam pengembangan web tradisional untuk memperbarui halaman web, yang dapat dianggap sebagai tonggak sejarah. Namun Ajax tidak dapat diterapkan di semua tempat, dan cakupan penerapannya ditentukan oleh karakteristiknya.
Contoh aplikasinya adalah aplikasi Ajax untuk menu cascading.
Pemrosesan menu berjenjang kami sebelumnya adalah sebagai berikut:
Untuk menghindari memuat ulang halaman yang disebabkan oleh setiap operasi pada menu, kami tidak menggunakan metode memanggil latar belakang setiap kali, tetapi membaca semua data menu berjenjang sekaligus. keluar dan ditulis ke dalam array, dan kemudian menggunakan JavaScript untuk mengontrol presentasi subset item berdasarkan operasi pengguna. Ini memecahkan masalah kecepatan respons operasi, tidak memuat ulang halaman, dan menghindari permintaan yang sering ke server, tetapi jika pengguna tidak merespons menu Jika Anda mengoperasikan atau hanya mengoperasikan sebagian menu, sebagian data yang dibaca akan menjadi data mubazir dan menyia-nyiakan sumber daya pengguna, terutama bila struktur menu rumit dan jumlah datanya besar ( Misalnya, menunya memiliki banyak level, dan setiap level memiliki ratusan item), kelemahan ini bahkan lebih menonjol.
Jika Ajax diterapkan dalam kasus ini, hasilnya akan ditingkatkan:
saat menginisialisasi halaman, kami hanya membacakan semua data tingkat pertama dan menampilkannya. Saat pengguna mengoperasikan salah satu item menu tingkat pertama, hasilnya akan dikirim ke pengguna melalui Ajax. Latar belakang meminta semua data dari submenu tingkat kedua yang memiliki item tingkat pertama saat ini. Jika ia terus meminta item di menu tingkat kedua yang sudah disajikan, maka ia akan meminta semuanya data dari semua menu tingkat ketiga yang sesuai dengan item menu tingkat kedua yang dioperasikan.Data, dan seterusnya... Dengan cara ini, Anda bisa mendapatkan apa pun yang Anda gunakan dan sebanyak yang Anda butuhkan data, mengurangi jumlah total pengunduhan data, dan tidak perlu memuat ulang seluruh konten saat memperbarui halaman, cukup perbarui bagian yang perlu diperbarui. Dibandingkan dengan pemrosesan latar belakang dan memuat ulang, ini mempersingkat waktu tunggu pengguna dan meminimalkan pemborosan sumber daya.
Selain itu, karena Ajax dapat memanggil data eksternal, ia juga dapat mewujudkan fungsi agregasi data (tentu saja dengan otorisasi yang sesuai), seperti pembaca RSS online versi BETA yang baru saja dirilis oleh Microsoft pada tanggal 15 Maret; pengembangan beberapa data terbuka Beberapa aplikasinya sendiri, seperti beberapa aplikasi pencarian buku baru menggunakan data Amazon.
Singkatnya, Ajax cocok untuk aplikasi WEB dengan banyak interaksi, sering membaca data, dan klasifikasi data yang baik.
1. Mengurangi beban server. Karena konsep dasar Ajax adalah "mendapatkan data sesuai permintaan", hal ini dapat mengurangi beban yang disebabkan oleh permintaan yang berlebihan dan berdampak pada server secara maksimal;
2. Memperbarui halaman tanpa menyegarkan, mengurangi waktu tunggu aktual dan psikologis pengguna;
pertama, "tekan Mode" data yang diperlukan "mengurangi jumlah aktual data yang dibaca. Untuk memberikan analogi yang sangat jelas, jika metode kelebihan beban adalah kembali ke asal dari satu titik akhir dan kemudian ke titik akhir lainnya, maka Ajax didasarkan di satu titik akhir. Jangkau titik akhir lainnya
kedua, meskipun Anda ingin membaca data yang relatif besar, tidak perlu memiliki layar putih seperti RELOAD, karena Ajax menggunakan XMLHTTP untuk mengirim permintaan untuk mendapatkan data respons server, tanpa memuat ulang titik akhir tersebut. seluruh halaman. Gunakan Javascript untuk mengoperasikan DOM dan terakhir memperbarui halaman, sehingga selama proses membaca data, pengguna tidak dihadapkan dengan layar putih, tetapi status halaman asli (atau Anda dapat menambahkan kotak prompt LOADING untuk membiarkan pengguna memahami status proses pembacaan data), hanya ketika semua data diterima, bagian konten yang sesuai diperbarui, dan pembaruan ini juga terjadi secara instan dan hampir tidak terlihat oleh pengguna. Singkatnya, pengguna sangat sensitif. Mereka dapat merasakan pertimbangan Anda terhadap mereka. Meskipun hal ini tidak mungkin memberikan hasil langsung, hal ini akan menumpuk ketergantungan mereka pada situs web sedikit demi sedikit di hati pengguna.
3. Pengalaman pengguna yang lebih baik;
4. Ini juga dapat mentransfer beberapa pekerjaan sebelumnya yang dibebani oleh server ke klien, yang dapat digunakan oleh kekuatan pemrosesan klien yang menganggur, mengurangi beban pada server dan bandwidth, serta menghemat ruang dan bandwidth biaya sewa;
5, Ajax dapat memanggil data eksternal;
6. Ini didasarkan pada teknologi standar dan didukung secara luas, dan tidak memerlukan plug-in atau applet yang diunduh;
7. Ajax memisahkan antarmuka dan aplikasi di WEB (bisa juga dikatakan memisahkan data dan presentasi)
8. Ini adalah situasi yang saling menguntungkan bagi pengguna dan ISP.
6. Masalah dengan Ajax
1. Beberapa perangkat genggam (seperti ponsel, PDA, dll.) belum mendukung Ajax dengan baik;
2. Mesin Ajax yang dibuat dengan JavaScript, kompatibilitas JavaScript, dan DeBugs membuat pusing kepala
; memuat ulang, karena perubahan halaman tidak sejelas memuat ulang, sehingga mudah menimbulkan masalah bagi pengguna - pengguna tidak yakin apakah data saat ini baru atau telah diperbarui. Solusi yang ada meliputi: Petunjuk lokasi yang relevan dan pembaruan data area dirancang agar lebih jelas, dan pengguna diminta setelah pembaruan data, dll.;
4. Dukungan untuk media streaming tidak sebaik FLASH dan Java Applet;