hai gays...bahasan kali ini tentang mata kuliah pemrograman
web.yaitu tepatnya tentang AJAX. apa itu ajax,dan dasar-dasar ajax.
Pengertian AjaxAJAX adalah singkatan dari Asynchronous JavaScript
and XML. Pada dasarnya ajax menggunakan XMLHttpRequest object
Javascript untuk membuat request ke server secara asynchronous atau
tanpa melakukan refresh halaman website. Yang dibutuhkan agar ajax
dapat berjalan adalah javascript harus di enable pada browser yang
digunakan. Walaupun javascript merupakan dasar dari Ajax, dimana
javascript sangat susah pada implementasi dan maintenance, tetapi
Ajax memiliki struktur pemrograman yang lebih mudah untuk dipahami.
Anda tinggal membuat object XMLHttpRequest dan memastikan object
tersebut terbentuk dengan benar. Kemudian menentukan kemana
hasilnya akan ditampilkan atau dikirim.Ajax dapat digunakan untuk
melakukan banyak hal, seperti loading halaman HTML tanpa refresh
halaman web, validasi form dan banyak lagi yang bisa dilakukan
dengan ajax. Di tutorial ini Ajax akan dipadukan dengan bahasa
pemrograman PHP yang sangat powerfull. Ajax bertugas melakukan
request ke web server dan PHP yang berada di server akan melakukan
apa yang diminta oleh Ajax, mengirim hasilnya ke web browser dan
Ajax menampilkannya kepada user. Karena Ajax dibangun dengan
javascript maka untuk dapat mengikuti tutorial ini dengan baik anda
perlu memiliki dasar-dasar javascript. Selain itu anda juga perlu
memiliki dasar-dasar pemrograman PHP. Jika anda belum memiliki
dasar-dasar PHP anda dapat memperoleh tutorialnya di website ini.
Sedangkan untuk tutorial javascript anda bisa memperolehnya dari
berbagai sumber yang ada di internet. Konsep HTTP Request dan
ResponseUntuk mengetahui bagaimana konsep dari Ajax anda perlu
mengetahui bagaimana sebuah web browser memproses sebuah request
dan menerima sebuah response dari web server. Standar yang
digunakan web browser pada saat ini adalah HTTP (HyperText Transfer
Protocol). HTTP digunakan oleh web browser untuk mengirim request
dari website ke web server dan kemudian menerima response dari web
server. HTTP request berkerja seperti email, memberitahukan kapan
request dikirim, berisi header yang memberitahu apa yang harus
dilakukan server dan bagaimana menghandle request tersebut.Sekali
sebuah request diterima, web server kemudian menentukan response
apa yang akan diberikan. Terdapat banyak kode response, tabel
dibawah memperlihatkan kode yang umumnya.
Terdapat banyak request method yang ada, tetapi yang paling
sering digunakan adalah GET dan POST. Sekarang anda telah memiliki
bayangan bagaimana request dikirim ke web server dan kemudian web
server mengirim response dari request tersebut ke web browser, akan
mudah bagi anda untuk memahami bagaimana XMLHttpRequest berkerja.
Keduanya sangat mirip, tetapi XMLHttpRequest dioperasikan di
belakang layar dan tanpa memerlukan refresh halaman. XMLHttpRequest
Object
Ajax bisa dibilang adalah sebuah konsep untuk menerangkan
interaksi antara client-side XMLHttpRequest Object dengan script
server-side. Untuk membuat request ke web server menggunakan Ajax,
anda harus membentuk Object XMLHttpRequest terlebih dahulu. Untuk
membentuk object XMLHttpRequest berbeda pada setiap browser. Pada
microsoft internet explorer object dibentuk sebagai ActiveX
control, sedang pada browser seperti Firefox dan safari menggunakan
basic javascript object. XMLHttpRequest MethodsSetelah
XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang
bisa digunakan. Method-method tersebut dijelaskan di bawah ini.1.
abort()Method abort() digunakan untuk menghentikan request yang
sedang berjalan. Method ini sangat berguna jika anda
memperhitungkan lama waktu koneksi, misalnya jika waktu koneksi
melebihi rentang waktu tertentu anda bisa menggunakan method
abort() untuk menghentikan request secara prematur.2.
getAllResponseHeader()Anda dapat menggunakan method ini untuk
memperoleh semua informasi dari semua header HTTP yang sedang
diberikan oleh server. Misalnya set sebuah header akan terlihat
seperti :
Date: Sun, 13 Nov 2005 22:53:06 GMTServer: Apache/2.0.53 (Win32)
PHP/5.0.3X-Powered-By: PHP/5.0.3Content-Length: 527Keep-Alive:
timeout=15, max=98Connection: Keep-AliveContent-Type: text/html 3.
getResponseHeader("headername")Method ini dapat digunakan untuk
memperoleh isi dari begian sebuah header, sebagai contoh untuk
memperoleh ukuran dari document yang sedang direquest, anda dapat
menggunakan getResponseHeader("Content-Length").4. open
("method","URL","async","username","pswd")Method ini merupakan
method yang paling penting dan berguna pada XMLHttpRequest. Method
ini digunakan untuk membuka koneksi dengan document yang ada di
server. Dengan method ini anda memberitahukan kepada web server
method apa yang digunakan untuk membuka file ("GET" atau "POST").
Sebagai catatan tidak semua argument pada method ini harus diisi,
tergantung dengan situasi dan kebutuhan.5.
setRequestHeader("label","value")Method ini dapat digunakan untuk
menentukan header pada saat melakukan request. Sebagai catatan,
method ini hanya bisa dipanggil setelah method open digunakan dan
sebelum method send dipanggil.6. send("content")method ini
digunakan untuk mengirim request ke server. Jika request dikirim
secara asynchronous, maka response akan datang secepatnya. Jika
tidak, response akan datang setelah response diterima oleh web
browser. Parameter pada method ini tidak harus diisi, parameter ini
sangat berguna untuk memproses HTML form dan memberikan anda untuk
mengirim nilai dari element form ke web server. XMLHttpRequest
MethodsAfter the XMLHttpRequest is formed, there is some method or
function that can be used. These methods are described below.1.
abort ()Method abort () used to stop the currently running request.
This Method is especially useful if you take into account the
length of time, e.g. If the connection time connection exceeds a
certain span of time you can use the method abort () to stop the
request prematurely.2. getAllResponseHeader ()You can use this
method to obtain all the information of all the HTTP headers that
are provided by the server. For example set a header will look
like:
Date: Sun, 13 Nov 2005 22:53:06 GMTServer: Apache-2.0.53
(Win32)/PHP 5.0.3X-Powered-By:/PHP 5.0.3Content-Length:
527Keep-Alive: timeout = 15, max = 98Connection:
Keep-AliveContent-Type: text/html 3. getResponseHeader (headername
")This Method can be used to obtain the contents of a header,
begian for example to obtain the size of the document that is being
direquest, you can use getResponseHeader ("Content-Length").4. open
("method", "URL", "async", "username", "pswd")This Method is a
method that is most important and useful on XMLHttpRequest. This
Method is used to open a connection with a document that is on the
server. With this method, you notify the web server method that is
used to open any file ("GET" or "POST"). As a side note not all
argument in method is required, depending on the situation and
needs.5. setRequestHeader ("label", "value")This Method can be used
to specify the headers at the time of performing the request. As a
side note, this method can only be called after the open method is
used and before it send invoked method.6. send ("content")This
method is used to send the request to the server. If the request is
sent to the asynchronous, then the response will come as soon as
possible. Otherwise, the response will come after the response is
received by the web browser. This method does Parameter in the
required fields, this parameter is useful for processing HTML forms
and give you the value of the element to send a form to a web
server.Form Object XMLHttpRequestTo create an XMLHttpRequest object
you can use the following code: function getXMLHttpRequest(){//jika
user menggunak IE if(window.ActiveXObject){ return new
ActiveXObject("Microsoft.XMLHTTP"); }else
if(window.XMLHttpRequest){ //user menggunakan browser selain IE
return new XMLHttpRequest(); }else {alert("Status : can not create
XMLHttpRequest Object");} }Send a Request to the ServerWhen you are
finished creating the object XMLHttpRequest you can send a request
to the server. When sending a request to the server you have to
specify the request method used, whether to use a GET or POST. If
you want to display information from the server you will use the
GET method, whereas if you submit information to the server then
please use method POST. In this tutorial is going to learn to use
the GET method (POST will be explained in the tutorial selanjunya).
To send a request to the server using the GET method, you can use
the code below.var xmlhttp=getXMLHttpRequet();function
sendRequest(pageUrl,elementID){ var
obj=document.getElementById(elementID); var
obj.innerHTML='loading... please wait'; if(xmlhttp.readyState==4 ||
xmlhttp.readyState==0){ xmlhttp.open("GET",pageUrl,true);
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4
&& xmlhttp.status==200){
obj.innerHTML=xmlhttp.responseText; } } xmlhttp.send(null); }
}function above takes the HTML element ID parameter and the URL of
the file that exists on the server. First to do is replace
innerHTML property of an HTML element, to display the text "loading
... please wait". Then open a connection to the server with the
method open (). If the readyState property equal to 4 (complete)
and status equals 200 (OK) response from the server and display it
by replacing innerHTML property of the HTML element with
responseText property of the XMLHttpRequest object.
Examples that are described using the videos please see DEMO
Video.Click here to see a video demo about ajax.
http://www.myphptutorials.com/ source:
