{"id":11797,"date":"2022-08-29T09:50:06","date_gmt":"2022-08-29T09:50:06","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=11797"},"modified":"2023-05-11T07:29:38","modified_gmt":"2023-05-11T07:29:38","slug":"belajar-teknik-ajax-dengan-jquery","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/","title":{"rendered":"Belajar Teknik AJAX Dengan jQuery"},"content":{"rendered":"\n

Dikutip dari Wikipedia, Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari:<\/p>\n\n\n\n

  1. DOM yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan<\/li>
  2. Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.<\/li>
  3. XML umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM<\/li>
  4. JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah<\/li><\/ol>\n\n\n\n

    Contoh Penggunaan Ajax<\/h3>\n\n\n\n

    Berikut ini adalah contoh kode Ajax Native<\/p>\n\n\n

    \n<!DOCTYPE html>\n<html>\n<body>\n \n<div id="demo">\n<h1>The XMLHttpRequest Object<\/h1>\n<button type="button" onclick="loadDoc()">Change Content<\/button>\n<\/div>\n \n<script>\nfunction loadDoc() {\n  var xhttp = new XMLHttpRequest();\n  xhttp.onreadystatechange = function() {\n    if (this.readyState == 4 && this.status == 200) {\n      document.getElementById("demo").innerHTML =\n      this.responseText;\n    }\n  };\n  xhttp.open("GET", "ajax_info.txt", true);\n  xhttp.send();\n}\n<\/script>\n \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    Jika dibandingkan dengan penggunaan Ajax menggunakan jQuery, akan terlihat seperti dibawah ini<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html>\n<head>\n<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\n<script>\n$(document).ready(function(){\n    $("button").click(function(){\n        $("#div1").load("demo_test.txt #p1");\n    });\n});\n<\/script>\n<\/head>\n<body>\n \n<div id="div1"><h2>Let jQuery AJAX Change This Text<\/h2><\/div>\n \n<button>Get External Content<\/button>\n \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    Cukup mudah bukan ? Jika menggunakan jQuery, Fungsi Ajax sudah ada didalam library sehingga kita cukup memanggil method yang tersedia. Selamat mencoba 🙂<\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Dikutip dari Wikipedia, Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan<\/p>\n","protected":false},"author":1,"featured_media":11743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4293,4295,4296,4294,4292,4291],"class_list":["post-11797","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-jquery-teknik-ajax","tag-belajar-jquery-teknik-ajax-pemula","tag-kursus-jquery-teknik-ajax-bandung","tag-kursus-jquery-teknik-ajax-jakarta","tag-tutorial-jquery-teknik-ajax","tag-tutorial-jquery-teknik-ajax-pemula"],"yoast_head":"\nBelajar Teknik AJAX Dengan jQuery - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Teknik AJAX Dengan jQuery - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Dikutip dari Wikipedia, Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-29T09:50:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-11T07:29:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"Belajar Teknik AJAX Dengan jQuery\",\"datePublished\":\"2022-08-29T09:50:06+00:00\",\"dateModified\":\"2023-05-11T07:29:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/\"},\"wordCount\":235,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"keywords\":[\"Belajar jQuery Teknik AJAX\",\"Belajar jQuery Teknik AJAX Pemula\",\"Kursus jQuery Teknik AJAX Bandung\",\"Kursus jQuery Teknik AJAX Jakarta\",\"Tutorial jQuery Teknik AJAX\",\"Tutorial jQuery Teknik AJAX Pemula\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/\",\"name\":\"Belajar Teknik AJAX Dengan jQuery - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"datePublished\":\"2022-08-29T09:50:06+00:00\",\"dateModified\":\"2023-05-11T07:29:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"width\":\"750\",\"height\":\"400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-teknik-ajax-dengan-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar Teknik AJAX Dengan jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Teknik AJAX Dengan jQuery - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Teknik AJAX Dengan jQuery - WebHozz Blog","og_description":"Dikutip dari Wikipedia, Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan","og_url":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/","og_site_name":"WebHozz Blog","article_published_time":"2022-08-29T09:50:06+00:00","article_modified_time":"2023-05-11T07:29:38+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"Belajar Teknik AJAX Dengan jQuery","datePublished":"2022-08-29T09:50:06+00:00","dateModified":"2023-05-11T07:29:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/"},"wordCount":235,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","keywords":["Belajar jQuery Teknik AJAX","Belajar jQuery Teknik AJAX Pemula","Kursus jQuery Teknik AJAX Bandung","Kursus jQuery Teknik AJAX Jakarta","Tutorial jQuery Teknik AJAX","Tutorial jQuery Teknik AJAX Pemula"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/","url":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/","name":"Belajar Teknik AJAX Dengan jQuery - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","datePublished":"2022-08-29T09:50:06+00:00","dateModified":"2023-05-11T07:29:38+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","width":"750","height":"400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/belajar-teknik-ajax-dengan-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar Teknik AJAX Dengan jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=11797"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11797\/revisions"}],"predecessor-version":[{"id":12459,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11797\/revisions\/12459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/11743"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=11797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=11797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=11797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}