Kamis, 10 Juni 2010

PENGANTAR TEKNOLOGI WEB 11

PENGANTAR TEKNOLOGI WEB

Pengantar AJAX

Prinsip Desain AJAX

Web Applications

Web Applications

Web Applications

Asynchronous Processing Scenario

Pendahuluan

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web. Sejak telah dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan web programmer.

Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa.

Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain.

AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll.

AJAX menggunakan XMLHTTTPRequest

Teknologi yg memungkinkan aplikasi web menyediakan rich interaction, just in time information, dan dynamic interface tanpa halaman tersebut refresh!

AJAX = XMLHTTPRequest + DHTML (HTML, CSS, dan JavaScript) + rich design

Examples

1. Google Map

2. Google Suggest

3. NetFlix.com

4. MUSE Calendar (Ajax tooltip)

5. www.2locals.com (Ajax)

6. Amazon Diamond

Google suggest

Amazon diamond

Classic web

Ajax


Cara Kerja

Learning ajax

Triggers (events)

Operations (xmlhttprequest)

Updating (DOM)

HTTP Request dan Dasar-dasar Respon

Sedangkan untuk metode request HTTP yang umum digunakan antara lain POST dan GET.

XMLHttpRequest

XMLHttpRequest merupakan metode request HTTP yang beroperasi di belakang layar (tanpa harus merefresh halaman web).

Metode ini berwujud suatu obyek. Sehingga dalam hal ini AJAX merupakan konsep yang mendeskripsikan interaksi antara XMLHttpRequest (client side object) dengan server script seperti PHP, ASP dll.

Sayangnya, XMLHttpRequest ini memiliki bentuk obyek yang berbeda dalam beberapa browser sehingga dalam penggunaannya perlu penanganan khusus yang disesuaikan dengan jenis browsernya. Sebagai contoh, dalam IE obyek tersebut dinyatakan sebagai ActiveX

Metode-metode pada XMLHttpRequest

Dalam obyek XMLHttpRequest terdapat beberapa metode yang digunakan untuk proses request. Berikut ini beberapa diantaranya:


Contoh Ajax

XHR

Contoh: Ajax Sederhana

Contoh.html


Contoh: Ajax Sederhana

Cek.js

Contoh: Ajax Sederhana

Cek.js (cont’d)

Contoh: Ajax Sederhana

Cek.php

AJAX desain

Interaction + feedback + information = RICH


Make it direct

Inline editing

In context tools

Drag n drop

Keep a light footprint

Tetap Fokus

Cross border

Paging

Expand the content

Kreatif

Feedback

Live feedback & prevent error

Offer Invitation

Show transitions

Information sharing

Multi variate data

Information interactive

Information interactive

Tidak ada komentar:

Posting Komentar