{"id":8144,"date":"2019-05-27T05:17:03","date_gmt":"2019-05-27T05:17:03","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=8144"},"modified":"2023-01-18T15:44:33","modified_gmt":"2023-01-18T08:44:33","slug":"apa-itu-ajax","status":"publish","type":"post","link":"\/id\/tutorial\/apa-itu-ajax","title":{"rendered":"Apa itu AJAX dan bagaimana cara kerjanya?"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Website tidak hanya soal konten saja. Jika ingin menjadi webmaster, ada sejumlah hal yang harus Anda pahami, seperti apa itu AJAX. AJAX adalah sebuah singkatan dari <\/span><i><span style=\"font-weight: 400\">Asynchronous Javascript and XML<\/span><\/i><span style=\"font-weight: 400\"> dan mengacu pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi web untuk bekerja secara <\/span><i><span style=\"font-weight: 400\">asynchronous <\/span><\/i><span style=\"font-weight: 400\">(tidak langsung) &ndash; memproses setiap request (permintaan) yang datang ke server di sisi background. Agar lebih memahami apa itu AJAX, kami akan membahas terminologinya satu per satu.<\/span><\/p><p><span style=\"font-weight: 400\">JavaScript merupakan bahasa coding yang kerap digunakan. Salah satu fungsinya adalah untuk mengelola konten dinamis website dan memungkinkan interaksi user yang dinamis. Layaknya HTML, XML atau eXtensible Markup Language adalah varian lain dari bahasa markup. Jika HTML dirancang untuk menampilkan data, maka XML dirancang untuk memuat dan membawa data.<\/span><\/p><p><span style=\"font-weight: 400\">Baik JavaScript maupun XML bekerja secara <\/span><i><span style=\"font-weight: 400\">asynchronous<\/span><\/i><span style=\"font-weight: 400\"> di dalam AJAX. Alhasil, aplikasi web yang menggunakan AJAX dapat mengirimkan dan menerima data dari server tanpa harus mereload keseluruhan halaman.<\/span><\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ID-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Download Istilah-Istilah Web Development untuk Pemula<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-contoh-penggunaan-ajax\"><b>Contoh Penggunaan AJAX<\/b><\/h2><p><span style=\"font-weight: 400\">Untuk lebih memahami pengertian AJAX dan penggunaannya, kita akan memisalkannya dengan fitur Google Autocomplete. Ketika Anda sedang mengetik kata kunci di Google, fitur ini akan menyelesaikannya untuk Anda. Meskipun keywordnya berubah-ubah secara real time, tampilan halamannya tetap sama. Pada awal tahun 90-an, di mana internet belum secanggih dan semasif sekarang, fitur tersebut mengharuskan Google untuk memuat halaman setiap kali rekomendasi kata kunci baru muncul di layar. Saat ini, dengan adanya AJAX, pertukaran data dan layar yang menampilkan data akan bekerja secara bersamaan tanpa menginterfensi atau mengganggu fungsi masing-masing.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"723\" height=\"317\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/fitur-autocomplete-google.jpg\/public\" alt=\"Apa itu AJAX: fitur Google Autocomplete\" class=\"wp-image-8146\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/fitur-autocomplete-google.jpg\/w=723,fit=scale-down 723w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/fitur-autocomplete-google.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/fitur-autocomplete-google.jpg\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Sebenarnya, konsep AJAX sudah ada sekitar pertengahan tahun 90an. Hanya saja, versi tersebut belum dikenal seperti sekarang. Popularitasnya baru menanjak ketika Google menerapkan konsep tersebut pada Google Mail dan Google Maps di tahun 2004. Sampai saat ini, AJAX telah digunakan di berbagai aplikasi web untuk mempersingkat proses komunikasi server.<\/span><\/p><p><span style=\"font-weight: 400\">Berikut beberapa contoh penggunaan AJAX di kehidupan sehari-hari.<\/span><\/p><h3 class=\"wp-block-heading\"><b>Sistem voting dan rating<\/b><\/h3><p>Bagi yang sering berbelanja online, pasti kerap diminta untuk memberikan rating bintang, kan? Atau mungkin juga pernah mengisi formulir voting online? Biasanya kedua sistem ini menggunakan AJAX. Setelah klik opsi rating atau voting, website akan memperbarui kalkulasi tapi tampilan halaman tetap sama, tidak ada yang diubah atau harus direload.<\/p><h3 class=\"wp-block-heading\"><b>Chat room<\/b><\/h3><p><span style=\"font-weight: 400\">Sebagian website ada yang mengaktifkan chat room bawaan di halaman utamanya. Chat room ini menjadi media bagi Anda untuk berkomunikasi dengan tim customer support. Anda tidak perlu khawatir fitur ini akan tertutup bilamana ingin membuka halaman lain dari website tersebut. AJAX tidak akan mereload halaman setiap kali Anda mengirimkan dan menerima pesan chat baru.<\/span><\/p><h3 class=\"wp-block-heading\"><b>Notifikasi <i>trending <\/i>di Twitter<\/b><\/h3><p><span style=\"font-weight: 400\">Twitter menggunakan AJAX untuk mengumumkan informasi atau notifikasi terbaru. Setiap kali ada tweet baru mengenai topik yang sedang <\/span><i><span style=\"font-weight: 400\">trending<\/span><\/i><span style=\"font-weight: 400\">, Twitter akan memperbarui notifikasi tanpa mengganggu fungsi halaman utama.<\/span><\/p><p><span style=\"font-weight: 400\">Dalam bahasa yang sederhana, AJAX memudahkan pekerjaan yang <\/span><i><span style=\"font-weight: 400\">multitasking<\/span><\/i><span style=\"font-weight: 400\">. Ketika ingin mengisi formulir voting online, misalnya, dan hanya fitur tersebut saja yang berubah tapi tidak dengan halamannya, maka website tersebut menerapkan konsep AJAX.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-cara-kerja-ajax\"><b>Cara Kerja AJAX<\/b><\/h2><p><span style=\"font-weight: 400\">AJAX bukanlah teknologi dan bukan pula bahasa pemrograman. Seperti yang telah dijelaskan sebelumnya, AJAX adalah sekumpulan teknik pengembangan web. Pada umumnya sistem ini terdiri atas:<\/span><\/p><ul class=\"wp-block-list\">\n<li><b>HTML\/XHTML<span style=\"font-weight: 400\"> sebagai bahasa utama dan CSS untuk menampilkan data.<\/span><\/b><\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>The Document Object Model (DOM)<\/strong><span style=\"font-weight: 400\"> untuk menampilkan data yang dinamis beserta interaksinya.<\/span><\/li>\n\n\n\n<li><strong>XML<\/strong><span style=\"font-weight: 400\"> untuk pertukaran data, sedangkan XSLT untuk manipulasi data. Sebagian besar developer mulai mengganti XML dengan <\/span><strong>JSON<\/strong><span style=\"font-weight: 400\"> karena bentuknya yang mendekati JavaScript.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Objek<\/span> <strong>XMLHttpRequest<\/strong><span style=\"font-weight: 400\"> untuk komunikasi tidak langsung (asynschronous).<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Bahasa pemrograman <\/span><b>JavaScript<\/b><span style=\"font-weight: 400\"> untuk menyatukan semua teknologi ini.<\/span><\/li>\n<\/ul><p><span style=\"font-weight: 400\">Untuk memahami cara kerja AJAX secara keseluruhan, setidaknya Anda harus punya pemahaman teknis dasar terlebih dulu. Untungnya, prosedur umum dari cara kerja AJAX tidak begitu sulit. Lihat diagram dan tabel di bawah ini untuk perbandingannya.<\/span><\/p><p><b>Diagram:<\/b><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"711\" height=\"616\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/diagram.jpg\/public\" alt=\"Pengertian AJAX: Diagram\" class=\"wp-image-8148\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/diagram.jpg\/w=711,fit=scale-down 711w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/diagram.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/diagram.jpg\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 711px) 100vw, 711px\" \/><\/figure><\/div><p><b>Tabel perbandingan<\/b><span style=\"font-weight: 400\">:<\/span><\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><b>Konsep Konvensional<\/b><\/td><td><strong>Konsep AJAX<\/strong><\/td><\/tr><tr><td>\n<ol>\n<li>Permintaan (request) HTTP dikirimkan dari web browser ke server.<\/li>\n<li>Server menerima, dan kemudian, mengambil data.<\/li>\n<li>Server mengirimkan data yang diminta ke web browser.<\/li>\n<li>Web browser menerima data dan mereload halaman untuk menampilkan data.<\/li>\n<\/ol>\n<p>Selama proses ini berlangsung, user tidak punya pilihan selain menunggu sampai keseluruhan proses berakhir. Tak hanya membuang-buang waktu, konsep konvensional juga memberikan loading yang tidak perlu ke server.<\/p>\n<\/td><td>\n<ol>\n<li>Browser membuat JavaScript <em>call<\/em> yang kemudian akan mengaktifkan XMLHttpRequest.<\/li>\n<li>Di background, web browser mengirimkan permintaan (request) HTTP ke server.<\/li>\n<li>Server menerima, mengambil, dan mengirimkan data kembali ke web browser.<\/li>\n<li>Web browser menerima data yang diminta dan akan langsung ditampilkan di halaman tanpa harus melalui proses reload terlebih dulu.<\/li>\n<\/ol>\n<\/td><\/tr><\/tbody><\/table><\/figure><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>Fungsi AJAX adalah untuk mempersingkat atau mempermudah&nbsp;<em>user experience<\/em>. Pengunjung kini tak perlu lagi menunggu lama hanya untuk mengakses konten di situs Anda. Namun tentu saja, penggunaan AJAX setidaknya berdasarkan pada kepentingan dan keperluan Anda. Google, misalnya, memungkinkan usernya untuk memilih versi AJAX atau versi konvensional pada saat menggunakan Google Mail. Pahami kebutuhan dan kepentingan user dan gunakanlah AJAX dengan benar dan tepat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Website tidak hanya soal konten saja. Jika ingin menjadi webmaster, ada sejumlah hal yang harus Anda pahami, seperti apa itu AJAX. AJAX adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi web untuk bekerja secara asynchronous (tidak langsung) &ndash; memproses setiap request (permintaan) yang [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/apa-itu-ajax\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Apa Itu AJAX dan Bagaimana Cara Kerjanya?","rank_math_description":"Naikkan user experience dengan menggunakan AJAX. Tapi apa itu AJAX? Bagaimana pengertian AJAX dan cara kerjanya?","rank_math_focus_keyword":"apa itu ajax, ajax adalah, pengertian ajax, fungsi ajax","footnotes":""},"categories":[7890],"tags":[8500,8497,8498,8499,5552,5513,8070,5553,8503,8496,8502,8501],"class_list":["post-8144","post","type-post","status-publish","format-standard","hentry","category-glosarium","tag-ajax","tag-ajax-adalah","tag-cara-kerja-ajax","tag-fungsi-ajax","tag-html","tag-http","tag-https","tag-javascript","tag-kelebihan-ajax","tag-pengertian-ajax","tag-penggunaan-ajax","tag-xml"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-ajax","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-ajax","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-ajax","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-ajax","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-ajax","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-ajax","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-ajax","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-ajax","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-ajax","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-ajax","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-ajax","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-ajax","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-ajax","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-ajax","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-ajax","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=8144"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8144\/revisions"}],"predecessor-version":[{"id":28953,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8144\/revisions\/28953"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=8144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=8144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=8144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}