CS1520 Recitation: Ajax Jeongmin Lee Plan for Today Introduction - - PowerPoint PPT Presentation

▶
cs1520 recitation ajax
SMART_READER_LITE
LIVE PREVIEW

CS1520 Recitation: Ajax Jeongmin Lee Plan for Today Introduction - - PowerPoint PPT Presentation

Feb 01, 2023 473 likes •974 views

CS1520 Recitation: Ajax Jeongmin Lee Plan for Today Introduction How does it work XMLHttpRequest Object Send Request Get Response Example: Get CD Plan for Today Introduction How does it work XMLHttpRequest

slide-1
SLIDE 1

CS1520 Recitation: Ajax

Jeongmin Lee

slide-2
SLIDE 2

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-3
SLIDE 3

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-4
SLIDE 4

AJAX

  • Asynchronous JavaScript And XML
slide-5
SLIDE 5

AJAX

  • Asynchronous JavaScript And XML
  • Allows updating a webpage without reloading it.
slide-6
SLIDE 6

AJAX

  • Asynchronous JavaScript And XML
  • Allows updating a webpage without reloading it.
  • Only the part to be updated is is reloaded with a

request and a response.

slide-7
SLIDE 7

AJAX

  • Asynchronous JavaScript And XML
  • Allows updating a webpage without reloading it.
  • Only the part to be updated is is reloaded with a

request and a response.

  • It is a combination of built-in XMLHttpRequest
  • bject (request to server) and Javascript and HTML

DOM object (display/usage of data).

slide-8
SLIDE 8

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-9
SLIDE 9

How does it work?

  • An event occurs in

a web page (user load the page, or a button is clicked)

slide-10
SLIDE 10

How does it work?

  • An

XMLHttpRequest

  • bject is created

by JavaScript

slide-11
SLIDE 11

How does it work?

  • The

XMLHttpRequest

  • bject sends a

request to a webserver

slide-12
SLIDE 12

How does it work?

  • The server

processes the request

slide-13
SLIDE 13

How does it work?

  • The server sends a

response back to the webpage

slide-14
SLIDE 14

How does it work?

  • The response is

read by Javascript and proper action is performed by the JS.

slide-15
SLIDE 15

Why Ajax?

  • Without Ajax:

reloading whole page in browser is needed

  • With Ajax:

not needed!

slide-16
SLIDE 16

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-17
SLIDE 17

XMLHttpRequest object

  • The XMLHttpRequest object is used to exchange

request and response data between a client and a server.

  • The actual thing you need to create first is the object:
  • variable = new XMLHttpRequest();
slide-18
SLIDE 18

Methods in XMLHttpRequest object

Method Description

new XMLHttpRequest() Creates a new XMLHttpRequest object abort() Cancels the current request getAllResponseHeaders() Returns header information getResponseHeader() Returns specific header information

  • pen(method,url,async,user,psw)

Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password

slide-19
SLIDE 19

Methods in XMLHttpRequest object

send() Sends the request to the server Used for GET requests

send(string)

Sends the request to the server. Used for POST requests setRequestHeader() Adds a label/value pair to the header to be sent

slide-20
SLIDE 20

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-21
SLIDE 21

Send a Request to Server

  • The open() and send() methods are used to send a

request object to server.

  • xhttp.open(“GET”, “ajax_info.txt”, true)
slide-22
SLIDE 22

Send a Request to Server

  • open(method, url, async)

○ Method: the type of request (GET or POST)

slide-23
SLIDE 23

Send a Request to Server

  • open(method, url, async)

○ Method: the type of request (GET or POST) ○ Url: the server file location that is requested

slide-24
SLIDE 24

Send a Request to Server

  • open(method, url, async)

○ Method: the type of request (GET or POST) ○ Url: the server file location that is requested ○ Async: true (asynchronous) and false (synchronous) ○ ** asynchronous means you can fetch and reload only the part of the page you want to update.

slide-25
SLIDE 25

Send a Request to Server

  • send(): sends the request to the server.

○ send() without parameter: GET ○ send(“some parameter string”) : POST

slide-26
SLIDE 26

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-27
SLIDE 27

Receive Response from Server

  • After sending a request, your request object

now has status properties.

  • These properties represents the status of the

request and you can get the information of whether it is processed well or not.

slide-28
SLIDE 28

Receive Response from Server

  • readyState: the status of the request

○ 0: request not initialized ○ 1: server connection established ○ 2: request received ○ 3: processing request ○ 4: request finished and response is ready

slide-29
SLIDE 29

Receive Response from Server

  • Status:

○ 200: “Ok” (no problem to get the object) ○ 403: “Forbidden” - not allowed to get the

  • bject

○ 404: “Page not found” - probably url is wrong

slide-30
SLIDE 30

Receive Response from Server

  • Response Type:

○ XMLHttpRequest.responseText ○ XMLHttpRequest.responseURL ○ XMLHttpRequest.responseXML

slide-31
SLIDE 31

Receive Response from Server

  • onreadystatechange:

○ defines a function to be called when state property changes

slide-32
SLIDE 32

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-33
SLIDE 33

<html> <body> <div id="demo"> <h2>Let AJAX change this text</h2> <button type="button"

  • nclick="loadDoc()">Change Content</button>

</div> </body>

  • For example we have this HTML page
slide-34
SLIDE 34

<html> <body> <div id="demo"> <h2>Let AJAX change this text</h2> <button type="button"

  • nclick="loadDoc()">Change Content</button>

</div> </body>

  • For example we have this HTML page
  • With this loadDoc() javascript function

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-35
SLIDE 35
  • Let’s focus on loadDoc() function.
  • 1. We created the XMLHttpRequest named xhttp

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-36
SLIDE 36
  • Let’s focus on loadDoc() function.
  • 2. Defined a function for onreadystatechange ,

which triggered only when the readyState changed.

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-37
SLIDE 37
  • Let’s focus on loadDoc() function.
  • 3. The function checks readyState ==4.

Code 4 means that request finished and response is ready.

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-38
SLIDE 38
  • Let’s focus on loadDoc() function.
  • 4. The function checks also status == 200.

200 meant “OK” on loading the http object

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-39
SLIDE 39
  • Let’s focus on loadDoc() function.
  • 5. Then, it gets ‘this.responseText’ and put the string in the “demo”

DOM html object.

  • Note that this.responseText gets the response data as string.

When you want it as XML, you can use responseXML

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-40
SLIDE 40
  • Let’s focus on loadDoc() function.
  • 6. Keep in mind that the loadDoc() function is called only

when the readyState is changed.

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-41
SLIDE 41
  • Let’s focus on loadDoc() function.

So when the loadDoc() function is called, the xhttp request is made first and then the xhttp.open(..) and xhttp.send() are executed.

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-42
SLIDE 42
  • Let’s focus on loadDoc() function.
  • 7. After the request is made over open() and send() function,

then when the response is received by client browser, the anonymous function with onreadystatechange is executed.

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

slide-43
SLIDE 43

Plan for Today

  • Introduction
  • How does it work
  • XMLHttpRequest Object
  • Send Request
  • Get Response
  • Example: Get CD
slide-44
SLIDE 44
  • One more example: Read XML file:

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "cd_catalog.xml", true); xhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; }

slide-45
SLIDE 45
  • 1. loadDoc() function is in overall same as previous example.
  • 2. But we have myFunction(this) to make it separate of

processing XML file stuff.

  • 3. We now open “cd_catalog.xml” file.

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "cd_catalog.xml", true); xhttp.send(); }

slide-46
SLIDE 46

The cd_catalog.xml file looks like following. (http://www.w3schools.co m/xml/cd_catalog.xml)

<CATALOG> <script/> <script/> <div> <a id="slick_getbyid_test"/> </div> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> ....

slide-47
SLIDE 47
  • 4. The myFunction(xml) is on reading the xml file, and iterate
  • ver each CD object to create the HTML table.

function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; }

slide-48
SLIDE 48
  • 5. And after iterating over all items, it adds the content to the

“demo” DOM html object.

function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; }

slide-49
SLIDE 49

Questions?