jQuery & AJAX

Introduction
1.
jQuery
Introduction
jQuery
⬡ jQuery is a JavaScript library.
⬡ jQuery allows you to use JavaScript much
easier in your website.
⬡ Sometimes one line of code in jQuery takes
two or more lines of code in a pure
JavaScript code.

3
Place your screenshot here

4
Setting up jQuery
⬡ Being a JavaScript Library, we can’t directly
use jQuery without importing special file or
library itself.
⬡ To use jQuery we need jQuery file itself.
⬡ You can download jQuery in:
https://jquery.com/download/

5
Setting up jQuery
⬡ After downloaded, move the file in the same
directory tree of the project you work with
and add this line of code before accessing
jQuery codes.

6
Place your screenshot here

7
Place your screenshot here

8
Place your screenshot here

9
Place your screenshot here

10
jQuery Selectors

EXAMPLE SELECTS

$(“*”) All elements

$(“#sample”) Element with id=“sample”

$(“.sample”) Elements with class=“sample”

$(“p”) All <p> elements

11
jQuery Syntax
⬡ $(“selector”).action()
⬡ $ sign to access jQuery
⬡ (“selector”) selector to find HTML elements
⬡ .action() functions to be performed on the
element/elements selected

12
Place your screenshot here

13
Place your screenshot here

14
Place your screenshot here

15
Event Handling
⬡ Normally if we use JavaScript in an event
handling we usually add some action listener
in HTML Elements by adding some
attributes like onclick, onchange, onload,
etc.

16
Event Handling
⬡ Using jQuery it allow us to use event
handling without adding some HTML
attributes for action listener instead the
action listener will be provided in the script
file.

17
Place your screenshot here

18
Place your screenshot here

19
Place your screenshot here

20
Event Handling
⬡ Let’s try to add click() listener inside the
ready() action.

21
Place your screenshot here

22
Place your screenshot here

23
Event Methods

EXAMPLE DESCRIPTION

ready() All elements

click() Click event

dblclick() Double click event

keyup() Key-up event

submit() Submit event

24
2.
AJAX
Introduction
Introduction to AJAX
⬡ AJAX, short for Asynchronous JavaScript
and XML.
⬡ With AJAX, web application can send and
retrieve data from a server asynchronously
(in the background) without reloading the
page.

26
 An HTTP request was sent to server
using XMLHttpRequest object
Process the HTTP request
An event was occured on a web and creates reponse
page. Ex: button clicked

NETWORK

Browser
Server
Process the returned data using Send response back to
JavaScript and updates the page the browser
content

27
XMLHttpRequest
⬡ XMLHttpRequest object can be used to
request data from a web server
⬡ We can use XMLHttpRequest object to:
∙ Update a web page
∙ Request data from a server
∙ Receive data from a server
∙ Send data to a server

28
XMLHttpRequest States

VALUE STATE DESCRIPTION

0 UNSET Client has been created

1 OPENED Open() has been called

2 HEADERS_RECEIVED Send() has been called

3 LOADING Downloading

4 DONE The operation is completed

29
XMLHttpRequest Status

VALUE DESCRIPTION

100-199 Informational responses.

200-299 Successful responses.

300-399 Redirects

400-499 Client errors

500-599 Server errors

30
Place your screenshot here

31
Place your screenshot here

32
33
Place your screenshot here

34
XMLHttpRequest
⬡ Let’s try to change the url of AJAX from
‘sample.txt’ to ‘sampl.txt’.

35
Place your screenshot here

36
Place your screenshot here

37
3.
Send/Retrieve Data using
POST/GET
Using GET (read all data)
⬡ First, retrieve all data from records table and
display all data into an HTML element
(table).

39
Place your screenshot here

40
41
Place your screenshot here

42
Place your screenshot here

43
Using GET (read one data)
⬡ Create a form and function that will get the
data from the database and display it to the
inputs.

44
Place your screenshot here

45
46
Binding Events
⬡ We can’t just bind an event to a dynamic
element.
⬡ But we can just use alternative way to bind
event to an element.

47
Place your screenshot here

48
Place your screenshot here

49
50
51
Using GET (delete data)
⬡ Bind event to the button delete that will get
the value of the ID and delete the record in
the database using AJAX.

52
Place your screenshot here

53
Place your screenshot here

54
55
Using POST (edit data)
⬡ Create a function that will get all the data
from the edit form and update the data using
AJAX.

56
57
Place your screenshot here

58
Place your screenshot here

59
Using POST (add data)
⬡ Create a add form and create a function that
will get all the data from the add form and
add the data using AJAX.

60
Place your screenshot here

61
62
Place your screenshot here

63
Place your screenshot here

64