<p>Asynchronous JavaScript and XMLHTTP atau biasa disebut dengan <strong>AJAX </strong>adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer <i>web surfer</i>, 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 <i>usability</i>. sumber<em> (wikipedia)</em></p>
<p>Lalu bagaimana cara penggunaan AJAX pada bahasa pemrograman Java web?</p>
<p><strong>Baca :</strong></p>
<ul>
<li><a href="https://www.tutorialpedia.net/login-multi-level-dengan-servlet-dan-jsp/">Login multi level dengan servlet dan JSP</a></li>
<li><a href="https://www.tutorialpedia.net/wp-admin/post.php?post=2778&;action=edit" target="_blank">Membuat Form Login dengan servlet dan JSP</a></li>
</ul>
<p>Kali ini saya akan membuat tutorial sederhana cara penggunaan AJAX JQuery pada java web application servlet dan JSP. Tutorial ini diperuntukkan bagi anda yang sedang<a href="https://www.tutorialpedia.net"> belajar bahasa pemrograman</a> java web application.</p>
<h3><strong>Contoh Penggunaan AJAX JQuery Pada Servlet dan JSP.</strong></h3>
<p>1. Buat project baru pada IDE NetBeans anda.</p>
<p>2. Lalu buat package baru dengan nama <strong>&#8220;ajaxdemo&#8221;</strong></p>
<p>3. Buat file servlets pada package <strong>&#8220;ajaxdemo&#8221; </strong>dengan nama <strong>&#8220;AjaxServlet&#8221;</strong></p>
<p>Berikut ini ini adalah isi kode dari masing-masing file.</p>
<h3><strong>index.jsp</strong></h3>
<pre class="lang:java decode:true"><;%-- 
 Document : index 
 Created on : Dec 14, 2016, 9:19:03 PM 
 Author : TutorialPedia.NET 
--%>; 
 
<;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="ISO-8859-1"%>; 
<;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; 
<;html>; 
 <;head>; 
 <;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">; 
 <;title>;Penggunaan Ajax pada servlet dan JSP<;/title>; 
 <;script src="http://code.jquery.com/jquery-latest.js">; 
 <;/script>; 
 <;script>; 
 $(document).ready(function() { 
 $('#submit').click(function(event) { 
 var username=$('#user').val(); 
 $.get('AjaxServlet',{user:username},function(responseText) { 
 $('#welcometext').text(responseText); 
 }); 
 }); 
 }); 
 <;/script>; 
 <;/head>; 
 <;body>; 
 <;form id="form1">; 
 <;h1>;Contoh Penggunaan AJAX JQuery Pada Servlet dan JSP<;/h1>; 
 Masukkan Nama anda: 
 <;input type="text" id="user"/>; 
 <;input type="button" id="submit" value="Submit"/>; 
 
 
 <;div id="welcometext">; 
 <;/div>; 
 <;/form>; 
 <;/body>; 
<;/html>; 
</pre>
<h3><strong>AjaxServlet.java</strong></h3>
<pre class="lang:java decode:true">package ajaxdemo; 
 
import java.io.IOException; 
import javax.servlet.ServletException; 
 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
 
public class AjaxServlet extends HttpServlet { 
 
 protected void doGet(HttpServletRequest request, HttpServletResponse response) 
 throws ServletException, IOException { 
 String name=null; 
 name = "Hello "+request.getParameter("user"); 
 if(request.getParameter("user").toString().equals("")){ 
 name="Hello User"; 
 } 
 response.setContentType("text/plain"); 
 response.setCharacterEncoding("UTF-8"); 
 response.getWriter().write(name); 
 } 
 
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
 } 
}</pre>
<h3><strong>Penjelasan Kode</strong></h3>
<p>Kode JQuery berikut yang terletak pada section head berfungsi untuk mengirimkan data ke AjaxServlet ketika button submit di tekan.</p>
<pre class="lang:default decode:true"> <;script>; 
 $(document).ready(function() { 
 $('#submit').click(function(event) { 
 var username=$('#user').val(); 
 $.get('AjaxServlet',{user:username},function(responseText) { 
 $('#welcometext').text(responseText); 
 }); 
 }); 
 }); 
 <;/script>;</pre>
<p>Lalu sekarang coba running project yang anda buat tadi. Berikut ini adalah screenshot dari Contoh Penggunaan AJAX JQuery Pada Servlet dan JSP.</p>
<p>Ketika user memasukkan nama, maka secara otomatis browser akan menampilkan nama yang user inputkan tanpa merefresh halaman terlebih dahulu.</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_252.png"><img class="aligncenter size-full wp-image-2867" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_252.png" alt="penggunaan ajax" width="926" height="422" /></a></p>
<p>Untuk melihat apakah project yang kita buat tadi error atau tidak, anda bisa menggunakan addon firebug untuk melihat log error pada request ataupun response ajax. Karena apabila terjadi kesalahan pada saat menggunakan ajax error tersebut tidak akan muncul pada web browser, untuk kita perlu menggunakan addon firebug untuk melihat kesalahan dalam penulisan kode. Berikut ini apabila terjadi kesalahan pada kode yang kita tulis.</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_253.png"><img class="aligncenter size-full wp-image-2868" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_253.png" alt="" width="952" height="481" /></a></p>
<p><a class="fasc-button fasc-size-medium fasc-type-flat fasc-ico-before dashicons-visibility" style="background-color: #109d58; color: #ffffff;" href="http://webapps.programmr.com/fikryans10/ImplementationAjaxJQueryonServletAndJSP/index.jsp" target="_blank" data-fasc-style="background-color:#109d58;color:#ffffff;">Demo</a> | <a class="fasc-button fasc-size-medium fasc-type-flat ico-fa fasc-ico-before fa-github-square" style="background-color: #109d58; color: #ffffff;" href="https://github.com/fikryans/AJAX-JQuery-on-servlet-and-JSP" target="_blank" data-fasc-style="background-color:#109d58;color:#ffffff;">Github</a></p>
<p>File yang berada dalam repository github merupakan project netbeans. Anda bisa mendownloadnya dengan cara Klik <strong>Clone or Download </strong>lalu pilih <strong>Download ZIP.</strong></p>
<p>Demikian tutorial Contoh Penggunaan AJAX JQuery Pada Servlet dan JSP.</p>
<p>Jika anda mengalami kendala error, anda bisa konsultasikan kepada author melalui fanpage TutorialPedia.NET.</p>

Contoh Penggunaan AJAX JQuery Pada Servlet dan JSP
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
Related Articles
3 Comments
Leave A Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
kalau kita mau tombol buat filter data tabel gitu biar berdasarkan nama atau apa gimana ya?
pakai datatables bootstrap lebih gampang gan.
Salah satu keuntungan Ajax adalah Aplikasi Ajax dapat dibangun untuk memungkinkan transisi yang mudah antar halaman web ke pengguna dibanding menggunakan kembali tombol “back” & “forward” konvensional yang ada di browser.