Scribd
Upload
117 views25 pages

AJAX in Web Programming Guide

This document discusses AJAX (Asynchronous JavaScript and XML). It defines AJAX as a way to asynchronously get data from a server to update a web page without reloading. It covers the components used in AJAX including HTML, CSS, JavaScript, DOM, and XMLHttpRequest. It provides examples of AJAX implementations like live search and form submission without page refresh. It also discusses the advantages of faster response and reduced bandwidth usage, and the disadvantages of integration challenges and inability to bookmark dynamic states.

Uploaded by

Ferdi Firdaus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
117 views25 pages

AJAX in Web Programming Guide

This document discusses AJAX (Asynchronous JavaScript and XML). It defines AJAX as a way to asynchronously get data from a server to update a web page without reloading. It covers the components used in AJAX including HTML, CSS, JavaScript, DOM, and XMLHttpRequest. It provides examples of AJAX implementations like live search and form submission without page refresh. It also discusses the advantages of faster response and reduced bandwidth usage, and the disadvantages of integration challenges and inability to bookmark dynamic states.

Uploaded by

Ferdi Firdaus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Pertemuan 10

Pemprograman Web
AJAX

IF-INF120402-PEMPROGRAMAN WEB 1
Agenda
• Introduction
• Component
• Pro and Cons

2
✓ INTRODUCTION

Google suggest

3
✓ INTRODUCTION
What is AJAX ?
• Asynchronous JavaScript and XML

• AJAX was made popular in 2005 by Google, with Google


Suggest.

• Not a programming language. It’s a way of using javascript

• Browser asynchronously get data from server and update


page dynamically without reloading the whole page.

4
✓ SYNCHRONOUS WEB

• User must wait while new pages load


• click, wait, refresh Pattern

5
✓ ASYNCHRONOUS WEB

• User can keep interacting with page while data loads


• Avoid click, wait, refresh Pattern

6
✓ WHY AJAX ?
• AJAX enables a much better user experience for websites and
applications.

• Developers can now provide user interfaces that are nearly as


responsive and rich as more tradition widows form application
while taking advantage of the web’s innate ease of deployment.

• Can be used to load specific portions of page that need to be


changed.

• Allows dynamically updating page without making user wait

7
✓ COMPONENTS
• HTML & CSS – for presenting
• JavaScript – for local processing
• Document Object Model (DOM) – to access data
inside the page or to access elements of an XML
file on the server
• XMLHttpRequest object – to read/send data to
the server

8
✓ CONCEPT

Source : https://www.hostinger.com/
9
XMLHttpRequest Object

• Dengan object XMLHttpRequest, suatu halaman web dapat


membuat request dan medapatkan response dari webserver

10
XMLHttpRequest Object
• XMLHttpRequest Method:
1. abort() : menghentikan request yang berjalan.
2. getAllResponseHeader() : memperoleh semua informasi dari semua header yang
sedang diberikan oleh server.
3. getResponseHeader(“headername”) : memperoleh isi dari bagian sebuah header
4. Open (“method”,”URL”,”async”,”username”,”pswd”) : membuka koneksi dengan
dokumen yang ada di server
5. Send(“content”) : untuk mengirim request ke server.
6. Onreadystatechange : Properti ini sebuah event handler untuk mentrigger sebuah
blok kode atau function.

11
✓ VARIOUS OF AJAX IMPLEMENTATION

• Live Search

12
✓ VARIOUS OF AJAX IMPLEMENTATION

• Page browser

13
✓ VARIOUS OF AJAX IMPLEMENTATION

• Submit php form without page refresh

14
✓ SAMPLE CODE AJAX

15
✓ CONSTRACT AJAX APPLICATION
1. An HTML document

16
✓ CONSTRACT AJAX APPLICATION

2. Adding Javascript

17
✓ CONSTRACT AJAX APPLICATION

3. Add function getXMLHTTPRequest()

18
✓ CONSTRACT AJAX APPLICATION

4. Create XMLHTTPrequest object

19
✓ CONSTRACT AJAX APPLICATION

5. Create server request

20
✓ CONSTRACT AJAX APPLICATION

6. telltimeXML.php

21
✓ CONSTRACT AJAX APPLICATION

22
✓ ADVANTAGES
• Page can be refreshed dynamically

• Response of the interface to user is faster

• Load much faster because the payload is


much smaller

• Reduce the demand for bandwidth


23
✓ DISADVANTAGES
• Integration of browser

• Hard for user to bookmark state of the web


pages

24
REFERENCES
• JENI, Pemrograman WEB, Joyce Avestro (2007)
• Hunter. J, Crawford. W.,Java Servlet Programming 2nd edition,
O’relly Media Inc, 2001
• https://themmit.com/java-the-best-programming-language-in-web-
development/
• https://www.javatpoint.com/cookies-in-servlet
• https://logicalread.com/

25

You might also like