AJAX 2

Lanjutan Artikel sebelumnya tentang AJAX

• Menyiapkan halaman form
  

Pertama-tama, kita harus mempersiapkan HTML yang akan digunakan oleh user.
Jika kita akan menggunakan AJAX sebagai  respon user input pada field City, perlu ditambahkan sebuah event listener pada field City. Akan ditambahkan juga atribut id pada elemen form – hal ini akan memudahkan pekerjaan kita.

Menggunakan event listener pada input field City merupakan hal yang mudah : hanya perlu meregistrasikan fungsi JavaScript yang akan dipanggil pada events. Dibawah ini adalah HTML form yang disempurnakan :

...
Address : <input type="text" name="address"/> <br/>
City : <select id=”city” name="city" onchange=”updateZip(this.value)”>
<option>Select One from List</option
<option value="Quezon City">Quezon City</option>
</select>
<br/>
Zip Code : <input id=”city” type="text" name="zip" size="4"/> <br/>
...

Dengan perubahan diatas, browser akan memanggil fungsi updateZip tiap kali user memilih value dari daftar City.

• Membuat sebuah instance object XMLHttpRequest

Sekarang saatnya menuliskan kode fungsi updateZip yang akan menanganikomunikasi terhadap server dan mengupdate value zip. Sebagaimana yang dibahas sebelumnya, JavaScript mengijinkan  server untuk berkomunikasi dengan menggunakan sebuah object yang dikenal dengan XMLHttpRequest.

Permasalahan berikutnya  adalah membuat object tersebut.  Pembuatan object ini tidak semudah menambahkan baris kode :

var xmlRequest = new XMLHttpRequest();

Kode diatas hanya dapat bekerja pada Mozilla, FireFox, Safari, Konqueror, NetScape dan Opera, namun  tidak pada Internet  Explorer. IE adalah browser pertama yang  menggunakan fungsi semacam ini, namun dibuat dari proprietary  object ActiveX

(sebagai lawan dari JavaScript object). Terlebih lagi, method yang digunakan untuk membuat XMLHttpRequest berbeda pada IE  5.0+ dibandingkan  dengan versi-versi sebelumnya.

Supaya dapat digunakan oleh browser-browser yang ada, gunakan kode berikut ini :

function createRequestObject() {
var xmlRequest;
try {
xmlRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (error1) {
try {
xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (error2) {
if (typeof XMLHttpRequest != 'undefined') {
xmlRequest = new XMLHttpRequest();
}
}
}

return xmlRequest;
}

• Menggunakan object XMLHttpRequest untuk berkomunikasi dengan Server 

Jika telah membuat instance  object dari XMLHttpRequest, selanjutnya object tersebut dapat digunakan untuk membuat fungsi updateZip. Pada dasarnya, kita mengirimkan request kepada server berupa input City yang diberikan user. Sebagai resource, kita dapat mengimplementasikan servlet.

<script type=”text/javascript”>
var xmlRequest;

function updateZip(cityValue) {
xmlRequest = createRequestObject();
xmlRequest.open(“GET”, 
“http://ourServer/ourApplication/getZIPCode?city=” +
cityValue);
xmlRequest.send(null);
}

Terdapat beberapa cara untuk menampung respon dari server. Untuk menampung respon sebagai String sederhana,  gunakan atribut responseText. Untuk menampungnya sebagai dokumen XML, gunakan atribut responseXML. Namun, value  dari atribut – atribut tersebut tidak dapat diakses secara langsung.

Ingat kembali akronim dari AJAX. A berarti Asynchronous yang berarti seluruh method yang membuat request  pada server tidak mengandung respon dari server  langsung setelah eksekusi method. Respon dari server akan tiba dalam waktu yang tidak dapat ditentukan.

• Fungsi Callback
  

Untuk mengatasi situasi semacam ini, XMLHttpRequest mengijinkan kita untuk menggunakan fungsi JavaScript sebagai Callback handler : callback adalah fungsi yang akan digunakan oleh XMLHttpRequest setelah menerima respon dari server.

Dibawah ini adalah fungsi JavaScript yang digunakan untuk meregistrasi sebuah fungsi dengan nama processServerData sebagai fungsi callback :

<script type=”text/javascript”>
var xmlRequest;

function updateZip(cityValue) {
xmlRequest = createRequestObject();
xmlRequest.onreadystatechange=processServerData;
xmlRequest.open(“GET”, 
“http://ourServer/ourApplication/getZIPCode?city=” + cityValue);
xmlRequest.send(null);
}

Pada saat menuliskan kode fungsi  callback, perhatikan bahwa event onreadystatechange muncul  tiap kali terdapat perubahan keadaan pada object XMLHttpRequest. Pada contoh, kita hanya  ingin menangani data setelah menerima respon, maka dibuatlah statement kondisional untuk memeriksa apakah
XMLHttpRequest pada kondisi yang sesuai :

function processServerData() {
if (xmlRequest.readystate == 4) {
var data = xmlRequest.responseText;
document.getElementById(“zip”).value = data;
}
}

Dibawah ini adalah kondisi – kondisi yang mungkin terjadi :

Tabel 1.1

Tabel Kondisi
Value Readystate	Indikasi
0.	Uninitialized. Method send() belum dipanggil.
1.	Loading. Request sedang dikirim menuju server.
2.	Loaded. Respon dari server telah diterima.
3.	Interactive. Respon sedang diproses.
4.	Completed. Respon telah diproses. Siap untuk digunakan.

Hal lain yang perlu diperhatikan pada saat membuat fungsi callback adalah kemungkinan error pada server. Kode yang kita gunakan diatas akan berjalan sebagaimana fungsinya, diasumsikan jika tidak ada permasalahan dari sisi server, namun kemungkinan kesalahan selalu akan terjadi. 

XMLHttpRequest menyediakan cara untuk  menentukan HTTP status code yang diberikan oleh server. Jika kode menyatakan dalam kondisi 200, berarti request telah berhasil diproses :

function processServerData() {
if (xmlRequest.readystate == 4) {
if (xmlRequest.status == 200) {
var data = xmlRequest.responseText;
document.getElementById(“zip”).value = data;
document.getElementById(“zipError”).innerHTML = “”;
} else {
document.getElementById(“zipError”).innerHTML = “Error in
retrieving ZIP code”;
}
}
}

Potongan kode JavaScript diatas menggunakan cara yang sederhana namun sangat bermanfaat untuk menampilkan pesan pada user : diasumsikan bahwa terdapat elemen HTML (

) dengan id dari zipError. Proses yang sukses dilakukan dari sisi server akan membiarkan elemen ini kosong. Sebaliknya,  sebuah error pada server akan menampilkan pesan kesalahan sesuai yang ditentukan pada kode.

Satu hal yang patut untuk diperhatikan, atribut innerHTML didukung oleh sebagian besar, namun tidak seluruh browser. Alternatif lain yang lebih kompatibel bagi browser adalah sebagai berikut : 

function processServerData() {
if (xmlRequest.readystate == 4) {
var zipErrorDiv = document.getElementById(“zipError”);
if (xmlRequest.status == 200) {
var data = xmlRequest.responseText;
document.getElementById(“zip”).value = data;
zipErrorDiv.replaceChild(document.createTextNode(“”),
zipErrorDiv.childNodes[0]);
} else {
zipErrorDiv.replaceChild(document.createTextNode(“Error
in retrieving ZIP code”),
zipErrorDiv.childNodes[0]);
}
}
}

Berikut ini adalah kode lengkap dari halaman yang telah dibuat :

<html>
<head>
<title>Registration Form</title>
<script type=”text/javascript”>
var xmlRequest;
function updateZip(cityValue) {
xmlRequest = createRequestObject();
xmlRequest.onreadystatechange=processServerData;
xmlRequest.open(“GET”, 
“http://ourServer/ourApplication/getZIPCode?city=” + cityValue);
xmlRequest.send(null);
}
function processServerData() {
if (xmlRequest.readystate == 4) {
if (xmlRequest.status == 200) {
var data = xmlRequest.responseText;
document.getElementById(“zip”).value = data;
document.getElementById(“zipError”).innerHTML = “”;
} else {
document.getElementById(“zipError”).innerHTML = “Error in
retrieving ZIP code”;
}
}
}
function createRequestObject() {
var xmlRequest;
try {
xmlRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (error1) {
try {
xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (error2) {
if (typeof XMLHttpRequest != 'undefined') {
xmlRequest = new XMLHttpRequest();
}
}
}
return xmlRequest;
}
</head>
<body>
<H1> Welcome new user! </H1>
Please enter your information in the fields below
<form action="/submit">
Name : <input type="text" name="name" id=”name”/> <br/>
Address : <input type="text" name="address" id=”address”/> <br/>
City : <select id=”city” name="city" onchange=”updateZip(this.value)”>
<option>Select One from List</option
<option value="Quezon City">Quezon City</option>
</select>
<br/>
Zip Code : <input type="text" name="zip" id=”zip” size="4"/> <div
id=”zipError”></div>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

 Berikut ini adalah contoh implementasi dari pemanggilan resource dari sisi server oleh AJAX :

public ZIPRetrievalServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse
response) 
throws ServletException, IOException {
String city = request.getParameter(“city”);
ZIPService service = new ZIPService();
String zipCode = service.getZipForCity(city);
response.setContentType(“text/html”);
PrintWriter out = response.getWriter();
out.println(zipCode);
out.close();
}
}