Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Mengenai AJAX
Gimana sih caranya biar AJAX bisa dipahami dengan baik... sudah berapa kali saya nonton videonya... masih belum ada yang masuk... sebenarnya cara kerja ajax itu gimana sih?
7 Jawaban:
kalo menurut saya ajax itu suatu metode yang digunakan suapaya web bisa interaktif. contoh kecilnya biar kalo kita insert sesuatu di form input, maka data akan masuk ke database tanpa reload halaman. jadi lebih bagus juga buat segi kecepatan.
itu menurut saya sih, mungkin yang lain ada yang mau nambahin....
Harusnya namanya jaman sekarang diganti tuh jadi AJAJ.. kan sekarang semua muanya udah pada pake JSON hehehe, kalo AJAX kan Asynchronous Javascript And XML. Tapi yang umum dipake sekarang JSON, jadi AJAJ hahaha
simplenya ajax itu suatu methode untuk nganter2in informasi dari server ke client(browser) tanpa harus reload page.
Pertama2 antum musti tau, normalnya siklus request tuh gimana, basicly kurang lebih kaya gini :
Tulis URL (request)-> request dianterin ke server -> Server siapin informasi yg diminta -> server ngasih informasi yg diminta -Y infromasi dianterin ke client (browser) -> informasinya di bikin jadi webpage yg kita liat.
nah normalnya, semua proses itu terjadi saat antum refresh page di browser/saat antum ketikin url di browser. (beberapa detik kan biasanya ada loading sebelum screennya berubah)
dengan ajax, proses itu terjadi di background tanpa perlu reload/refresh page. hence the name asynchronous : (*In computer programs, asynchronous operation means that a process operates independently of other processes)
mungkin aplikasi gampangnya seperti ini
//di htmlnya
<button onClick="add_friend()">Add Friend</button>
...
//di js nya
function add_friend(){
$.ajax({
method: "POST", //methode post, artinya kita kirim informasi
url: "<url_yg_bakal_nerima_informasi_yg_dikirim",
data: { name: "John", location: "Boston" } // informasi yg dikirim
})
}
...
//di backendnya
//ini contohnya pake Django(python)
def postUser(request, id):
if request.is_ajax():
if request.method == 'POST':
# Get Raw data
data = json.loads(request.body.decode("utf-8"))
# get individual element (clean raw data)
nama = data['name'] //isinya "John"
lokasi = data['location'] //isinya "Boston"
# data Validation
if (len(username)>20):
error += 1
item["message"]["col"] = "Name"
item["message"]["col_msg"] = "Die Name ist zu Lang"
if (error>0):
item["message"]["typ"] = "error"
item["message"]["body"] = "Daten kann nicht gespeichert werden. Bitte korregieren sie die falsche Feld(ern)"
# Wenn Kein error gibt. dann daten in die datenbank speichern
if (error==0):
user = User.object.create()
user.name=username
user.location = lokasi
user.save()
contoh diatas buat kalo button itu di click, kita langsung kirim informasi ttg request add friend ke server, tanpa harus reload page.
dan masih banyak lagi ttg apa yg bisa kita lakuin dengan ajax.
ajax ini bisa dibilang dasar lahirnya interactivity dari modern webframework yg ada sekarang, jd jangan nyerah belajarnya gan ! ilmu bermanfaat bgt ini !
mungkin sebelum belajar AJAX, agan harus cari tau dulu apa itu HTTP Request, Http Method, Http Status
Kira-kira bisa gak... dengan metode ajax, saat button di klik,,, dia hanya nge load atau refresh kontent dalam tag div? tentu sekaligus memasukan data...
Iya emang tujuannya ajax adalah itu gan, untuk retrieve data (dan sekaligus menampilkan data tersebut dalam sebuah page) tanpa refresh browser. Coba agan liat ini gan, https://armanrozika.github.io/cleandictionary/, (project belajar ajax ane itu haha). Ketika agan ketik suatu kata di kolom input dan klik button search (atau enter), code javascriptnya melakukan panggilan ajax ke server (ane pake API nya wordnik di sini), dan hasil datanya (yang berupa JSON) ane tampilkan di page. Dan itu semua tanpa refresh browser gan.
Oiya, kalo mau liat source code aplikasi ane itu, bisa di sini gan https://github.com/armanrozika/cleandictionary, semoga bisa bermanfaat :)
Makasih... @armanrozika... saya simpan idenya... syapa tahu bisa membantu dalam penyelesaian project http://nolpertama.id yang sedang saya kerjakan...