Pemrograman Web
AJAX
M A H ARDEKA T R I A NA NTA
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015
deka.kelas@gmail.com
Pengantar
AJAX = Asynchronous JavaScript And XML. AJAX != programming language
AJAX adalah suatu teknik pertukaran data dengan server dan meng-update
Javascript
Javascript adalah sebuah bahasa pemrograman yang dapat memberikan fitur animasi, data dinamis, interaktivitas, dan efek visual pada dokumen HTML. Javascript != Java
Javascript Netscape Inc.
Java SUN Microsystems (sekarang ORACLE) Javascript dahulu dikenal sebaga ECMAScript
Penggunaan JS
JS diidentifikasi oleh browser dengan menggunakan tag <script>
Pada umumnya JS diletakkan di dalam tag <head> , tetapi bisa juga diletakkan dalam tag
<body> html
JS
Grammar Structure
Pada dasarnya struktur bahasa JS serupa dengan baha perograman C atau C++ dengan sedikit perbedaan.
Statement Setiap statement diakhiri dengan tanda titik koma (semicolon) ;
Built-in Function perintah yang dapat digunakan untuk berinteraksi antara web browser, program JS, dan HTML. Contoh : alert() document.write() isNan()
Tipe-tipe data JS :
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
jawaban = true; // Boolean
if( jawaban == true ) alert( "Jawabannya benar!" ); else alert( "jawabannya salah!");
Penamaan Variabel (
Unique Identifiers
)
The general rules for constructing names for variables (unique identifiers) are:
◦ Names can contain letters, digits, underscores, and dollar signs.
◦ Names must begin with a letter
◦ Names can also begin with $ and _ (but we will not use it in this tutorial)
◦ Names are case sensitive (y and Y are different variables)
◦ Reserved words (like JavaScript keywords) cannot be used as names ex: alert, window,
document, etc. [ read more in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords
Penggabungan Variabel
Beberapa variabel dengan tipe data yang berbeda dalam JS dapat digabungkan secara langsung
dengan menggunakan operator tambah
+
Kontrol Logika
var nilai; var hasil;
nilai = 82;
if (nilai>80) {
hasil = "Baik"; } else {
hasil = "Kurang"; }
// variabel hasil akan bernilai "Baik"
var skor; skor = "A";
switch (skor){
case "A": alert("Istimewa"); break;
case "B+": alert("Sangat Memuaskan") break;
case "B": alert("Memuaskan") break;
case "C+": alert("Lebih dari cukup") break;
case "C": alert("Cukup") break;
case "D": alert("Kurang") break;
default : alert("Nggak komentar deh..."); }
// pesan yang ditampilkan pada kotak dialog adalah "Istimewa!"
Perulangan
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 11
forlooping do-while looping
DOM (Document Object Model)
Merupakan cara pandang JavaScript didalam melihat struktur data dari dokumen markup yang terdiri dari tag, ID dan atribut.
Sebuah dokumen HTML direpresentasikan oleh DOM dalam bentuk sebuah struktur hirarkis pohon. Misalkan sebuah dokumen HTML sederhana seperti berikut:
DOM (Document Object Model)
DOM Function
DOM Property
Asynchronous VS Synchronous
Synchronous Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET.
Pada saat client mengirimkan request terhadap server,client akan menunggu
sampai proses yang diminta selesai dikerjakan, kemudian server akan mengembalikan hasil proses tersebut kepada client.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 19
Asynchronous VS Synchronous
Asynchronous Sebagian besar interaksi dan pertukaran data dilakukan dibelakang layar.
Halaman web tidak harus selalu dimuat ulang secara keseluruhan setiap kali pengguna melakukan perubahan.
Meningkatkan interaktifitas, kecepatan dan usability.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 21
Web Model
AJAX Component
XMLHttpRequest Object.
DOM (Document Object Model).
XML.
XMLHttpRequest
Sebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request)
terhadap halaman web.
Sebagian besar web browser mendefinisikan XMLHttpRequest sebagai JavaScript object.
Internet Explorer mendefinisikan object ini sebagai ActiveX Control.
XMLHttpRequest
General Browser
◦ xmlhttp = new XMLHttpRequest();
Internet Explorer 7 Above
◦ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Internet Explorer 6 Below
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 27
{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body> </html>
<h1>we are trying AJAX </h1> <p> aaaaaaa </p>
XMLHttpRequest
readyState - XMLHttpRequest Property
Digunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server.
Properti ini diubah melalui event onreadystatechange.
statusText
–
XMLHttpRequest Property
Sama halnya seperti properti status, properti statusText digunakan untuk menyatakan response status dari server.
Status yang diberikan dalam bentuk keterangan.
Misalnya: respon 404 akan disampaikan dalam bentuk "Not Found", 403 dalam bentuk "Forbidden" dan seterusnya.
responseText
–
XMLHttpRequest Property
responseXML
–
XMLHttpRequest Property
Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format XML.
onreadystatechange - XMLHttpRequest
Event
Digunakan untuk mengetahui status dari request yang telah dikirimkan.
Ketika terjadi perubahan pada status request, event ini akan dijalankan dan mengupdate nilai dari property readyState yang terdapat pada object
onreadystatechange - XMLHttpRequest
Event
Ketika metode open() berhasil dijalankan, nilai dari properti readyState akan diubah menjadi 1.
Ketika metode send() berhasil dijalankan dan response header telah diterima, nilai dari properti readyState akan diubah menjadi 2
Ketika browser mendapat perintah dari server untuk memulai memuat data yang diinginkan, event onreadystatechange akan mengubah nilai dari property readyState menjadi 3.
Ketika data yang diinginkan telah berhasil didownload dengan lengkap, event onreadystatechange akan mengubah nilai dari properti readyState menjadi 4.
Object innerHTML
Object innerHTML merupakan turunan dari object document.
innerHTML berisi content dari element HTML, yaitu nilai / value yang terletak diatara tag pembuka dan tag penutup.
Contoh:
<div id="divContent">innerHTML disini</div>
Object innerHTML
Untuk dapat mengambil atau mengubah data secara on the fly (tanpa
melakukan reload) pada sebuah element HTML, diperlukan sebuah pengenal yang melekat pada element tersebut. Pengenal ini dapat didefinisikan melalui atribut ID.
XML
•XML merupakan singkatan dari eXtensible Markup Language.
•Seperti halnya HTML, XML tersusun dari element-element.
•Element-element ini terdiri dari dari tag pembuka dan tag penutup serta mempunyai ID dan
HTML vs XML
•HTML
• Element penyusunnya sudah terstandarisasi.
•XML
• Memungkinkan element-element XML dideklarasikan dengan lebih fleksibel. Dengan begitu,
setiap orang dapat menentukan element yang akan dibuat sesuai keinginannya.
References
Javascript http://www.w3schools.com/js/default.asp
Document Object Model
http://bertzzie.com/knowledge/javascript/Document-Object-Model.html
AJAX http://www.w3schools.com/ajax/default.asp
