AJAX – Asynchronous JavaScript And XML (PART 2)

Berikut posting lanjutan tentang pembahasan pengunaan AJAX dari posting sebelumnya, pada posting berikut akan membahas penangan format data XML sebagai data respon dari server.
Pada posting sebelumnya telah dibahas pembuataan class object XMLHttpRequest dan juga pengunaan object tersebut untuk melakukan komunikasi permintaan (request) data dari server.

Sedikit penjelasan singkat XML
– XML merupakan singkatan dari eXtensible Markup Language.
– XML merupakan Tag base sintaks.
– Data XML dapat sebagai Datasource kecil dalam melakukan pertukaran informasi.
– Lebih lengkap tentang XML bisa di lihat pada link berikut ini : http://www.w3.org

Pada AJAX pengunaan format XML digunakan dalam pengembalian data dari server atau data respon dari server atas request yang di lakukan user dari browser, berikut gambaran proses Request dari browser dan Respon dari server.

Ajax Diagram

Ajax Diagram

Setelah menerima Respon data XML dari server selanjutnya kita hanya perlu membaca data XML tersebut dan melakukan pemformatan data tersebut. Pada contoh berikut akan dibuat pemformatan data dengan menanfaatkan DOM dengan Javascript.

Sample Data XML yang akan di berikan server pada contoh ini sebagai berikut :

[xml]

<xml id="coreQuick">
<coreQuick>
<quicknews>
<id>1</id>
<title>Quick news pertama</title>
<sender>JerryPeter</sender>
<date>2006-07-30</date>
<time>19:20:19</time>
<info>
Ruangkecil.Or.id, pemanfaatan AJAX
dalam pengembangan web application
</info>
</quicknews>
</coreQuick>
</xml>

[/xml]

Ajax Demo

Ajax Demo

Format ini digunakan untuk melakukan format data Quick news pada Ruangkecil ini.

Dari contoh data XML tersebut terdapat hanya terdapat 1 buat info Quick news yang didalamnya terdapat beberapa element berikut (Id, Title, Sender, Date, Time dan Info), dari format XML tersebut akan di lakukan pemformatan data seperti pada gambar disamping.

Untuk melakukan pemformatan data akan di lakukan pada bagian block function setelah pengiriman respon dari server telah selesai di download (readyState=4).

Halaman sample demo bisa di lihat disini.

Pengunaan Javascript dalam melakukan formating data dengan DOM adalah sebagai berikut :

[javascript]

function createFormat(){
document.getElementById("divContent").innerHTML=
"<div align=’center’>Menunggu Respon server</div>";
if (oRequest.readyState == 4) {
// baca data respon dari server
var xmlData = oRequest.responseXML;
var coreQuick = xmlData.getElementsByTagName("quicknews");

// Loop data XML yang ada
for (var i=0; i < coreQuick.length; i++){
var currentQuick = coreQuick[i];

// Create main Quick News data
var newQuick = document.createElement("div");
newQuick.setAttribute("className", "quickNews")
newQuick.setAttribute("class", "quickNews");

// Ambil data title dari XML data
var newTitle = document.createElement("div");
newTitle.setAttribute("className", "title");
newTitle.setAttribute("class", "title");

var titleStr = document.createTextNode(
currentQuick.getElementsByTagName("title")[0].firstChild.data);
newTitle.appendChild(titleStr);

// Ambil data sender dari XML data
var newSender = document.createElement("div");
newSender.setAttribute("className", "sender");
newSender.setAttribute("class", "sender");
var senderStr = document.createTextNode("Pengirim: " +
currentQuick.getElementsByTagName("sender")[0].firstChild.data);;
newSender.appendChild(senderStr);

// Ambil data Tanggal dari XML
var newDate = document.createElement("div");
newDate.setAttribute("className", "date");
newDate.setAttribute("class", "date");
var dateStr = document.createTextNode("Tanggal kirim: " +
currentQuick.getElementsByTagName("date")[0].firstChild.data);
newDate.appendChild(dateStr);

// Ambil data Info quick news dari XML data
var newInfo = document.createElement("div");
newInfo.setAttribute("className", "info");
newInfo.setAttribute("class", "info");
var infoStr = document.createTextNode(
currentQuick.getElementsByTagName("info")[0].firstChild.data);
newInfo.appendChild(infoStr);

// Final proses formating data yang akan di tampilkan
newQuick.appendChild(newTitle);
newQuick.appendChild(newInfo);
newQuick.appendChild(newSender);
newQuick.appendChild(newDate);

// Append data quick news kedalam Div content yang telah di persiapkan
document.getElementById("divContent").appendChild(newQuick);
}
}
}
}
[/javascript]

function createFormat(){
document.getElementById(“divContent”).innerHTML=
“<div align=’center’>Menunggu Respon server</div>”;
if (oRequest.readyState == 4) {
// baca data respon dari server
var xmlData = oRequest.responseXML;
var coreQuick = xmlData.getElementsByTagName(“quicknews”);// Loop data XML yang ada
for (var i=0; i < coreQuick.length; i++){
var currentQuick = coreQuick[i];

// Create main Quick News data
var newQuick = document.createElement(“div”);
newQuick.setAttribute(“className”, “quickNews”)
newQuick.setAttribute(“class”, “quickNews”);

// Ambil data title dari� XML data
var newTitle = document.createElement(“div”);
newTitle.setAttribute(“className”, “title”);
newTitle.setAttribute(“class”, “title”);

var titleStr = document.createTextNode(
currentQuick.getElementsByTagName(“title”)[0].firstChild.data);
newTitle.appendChild(titleStr);

// Ambil data sender dari XML data
var newSender = document.createElement(“div”);
newSender.setAttribute(“className”, “sender”);
newSender.setAttribute(“class”, “sender”);
var senderStr = document.createTextNode(“Pengirim: ” +
currentQuick.getElementsByTagName(“sender”)[0].firstChild.data);;
newSender.appendChild(senderStr);

// Ambil data Tanggal dari XML
var newDate = document.createElement(“div”);
newDate.setAttribute(“className”, “date”);
newDate.setAttribute(“class”, “date”);
var dateStr = document.createTextNode(“Tanggal kirim: ” +
currentQuick.getElementsByTagName(“date”)[0].firstChild.data);
newDate.appendChild(dateStr);

// Ambil data Info quick news dari XML data
var newInfo = document.createElement(“div”);
newInfo.setAttribute(“className”, “info”);
newInfo.setAttribute(“class”, “info”);
var infoStr = document.createTextNode(
currentQuick.getElementsByTagName(“info”)[0].firstChild.data);
newInfo.appendChild(infoStr);

// Final proses formating data yang akan di tampilkan
newQuick.appendChild(newTitle);
newQuick.appendChild(newInfo);
newQuick.appendChild(newSender);
newQuick.appendChild(newDate);

// Append data quick news kedalam Div content yang telah di persiapkan
document.getElementById(“divContent”).appendChild(newQuick);
}
}
}
}

Penjelasan function diatas
Pada bagian awal function terdapat script untuk memberikan pesan selama proses loading dan formating data belum selesai dilakukan, berikut pesan yang akan di tampilkan:

[javascript]

<span class="script">document.getElementById("divContent").innerHTML= "<div align=’center’>Menunggu Respon server</div>";</span>

[/javascript]

Setelah data XML selesai diterima, proses pembacan data dilakukan dengan mengunakan script berikut:

[javascript]

<span class="script">var xmlData = oRequest.responseXML; </span>

[/javascript]

Disini digunakan responeXML bukan mengunkan responseText seperti pada contoh sebelumnya, hal ini digunakan karena format data yang diterima kali ini berupa XML data.
Hal ini juga agar browser memperlakukan data hasil respon dari server sebagai data XML sehingga nantinya dapat dilakukan parsing dengan mengunakan function2 parsing XML dengan DOM.
Hasil respon yang di dapat akan di tampung kedalam sebuah variable object xmlData, selanjutnya variabel xmlData ini akan berisi data XML hasil respon dari server.

Script berikutnya adalah membaca semua Element (tag) dengan nama”quicknews” dan menampungnya kedalam variabel coreQuick.
Sampai disini semua Group element dengan nama quicknews telah di tampung pada variable coreQuick dan kita dapat membaca-nya satu persatu untuk dilakukan formating data.

[javascript]

<span class="script">var coreQuick = xmlData.getElementsByTagName("quicknews"); </span>

[/javascript]

Untuk pembacaan masing-masing data quicknews akan dilakukan Loop sebanyak jumlah Element quicknews terdapat pada file data XML yang diterima, untuk mengetahui jumlah Element quicknews yang ada di gunakan sintaks berikut :

[javascript]
<span class="script">coreQuick.length</span>
[/javascript]

Setiap kali loop quickNews dibaca akan dibuat variable penampung data aktif yang sedang dibaca dengan mengunakan script berikut :

[javascript]

<span class="script">var currentQuick = coreQuick[i];</span>

[/javascript]

Berikutnya dibuat sebuah DIV baru untuk masing-masing quick news yang ada, dengan menambahkan 2 attribute kedalam DIV tersebut, attribut ini nantinya akan di link dengan file CSS.
Digunakan 2 attribute (className dan class) agar pembuatan link format CSS dapat dibaca pada IE browser dan Non IE browser.

[javascript]

<span class="script">// Create main Quick News data
var newQuick = document.createElement("div");
newQuick.setAttribute("className", "quickNews");
newQuick.setAttribute("class", "quickNews"); </span>

[/javascript]

Catatan:
– IE mengunakan attribute className
– Non IE mengunakan attribute class

Langkah selanjutnya adalah meng-extract data masing2 quicknews kedalam object data (newTitle, newInfo, newSender dan newDate) dengan mengunakan script berikut :

[javascript]

<span class="script">// Ambil data title dari XML data
var newTitle = document.createElement("div");
newTitle.setAttribute("className", "title");
newTitle.setAttribute("class", "title");
var titleStr = document.createTextNode(
currentQuick.getElementsByTagName("title")[0].firstChild.data);
newTitle.appendChild(titleStr);

// Ambil data sender dari XML data
var newSender = document.createElement("div");
newSender.setAttribute("className", "sender");
newSender.setAttribute("class", "sender");
var senderStr = document.createTextNode( "Pengirim: " +
currentQuick.getElementsByTagName("sender")[0].firstChild.data);
newSender.appendChild(senderStr);

// Ambil data Tanggal dari XML
var newDate = document.createElement("div");
newDate.setAttribute("className", "date");
newDate.setAttribute("class", "date");
var dateStr = document.createTextNode( "Tanggal kirim: " +
currentQuick.getElementsByTagName("date")[0].firstChild.data);
newDate.appendChild(dateStr);

// Ambil data Info quick news dari XML data
var newInfo = document.createElement("div");
newInfo.setAttribute("className", "info");
newInfo.setAttribute("class", "info");
var infoStr = document.createTextNode(
currentQuick.getElementsByTagName("info")[0].firstChild.data);
newInfo.appendChild(infoStr);</span>

[/javascript]

Mulai2 akan dibuat DIV untuk masing-masing element, kemudian menambahkan attribute className dan class untuk link kedalam file format CSS, seteleh selesai dilakukan pengambilan data masing2 element dengan script berikut :

[javascript]

<span class="script">var senderStr = document.createTextNode("Pengirim: " +
currentQuick.getElementsByTagName("sender")[0].firstChild.data);</span>

[/javascript]

Berikutnya kita tinggal melakukan formating peletakan informasi yang sudah di data pada proses diatas kedalam format yang kita perlukan, script melakukan formating adalah sebagai berikut :

[javascript]

<span class="script">newQuick.appendChild(newTitle);
newQuick.appendChild(newInfo);
newQuick.appendChild(newSender);
newQuick.appendChild(newDate); </span>

[/javascript]

Title dibagian atas, di ikuti dengan Informasi quick news, Pengirim dan juga Tanggal kirim.

Sampai disini semua object class yang telah di bentuk masih dalam posisi Onthefly object dan belum di tambahkan kedalam lokasi content yang telah di perisapkan sebelumnya pada Document file HTML.
Untuk menambahkan kedalam struktur data HTML yang ada digunakan script pada bagian berikut, pada contoh ini DIV dengan nama divContent merupakan lokasi penempatan data2 quick news yang sedang di format.

[javascript]

<span class="script">document.getElementById("divContent").appendChild(newQuick); </span>

[/javascript]

Selesai dari loop dan function diatas data2 XML telah di parsing dan di format, dan berikutnya tinggal membuat file CSS sesuai keperluan untuk merapihkan data XML yang ada.

Contoh hasil bisa di lihat disini.
Dan source code lengkap bisa di download disini.

Related Posts



Leave a Reply