9_AJAX_COMP3322A_f2019.pdf - COMP 3322A Modern Technologies on World Wide Web 1st semester 2019-2020 AJAX basics Dr C Wu Department of Computer Science

9_AJAX_COMP3322A_f2019.pdf - COMP 3322A Modern Technologies...

This preview shows page 1 - 9 out of 26 pages.

Dr. C Wu Department of Computer Science The University of Hong Kong AJAX basics 1st semester 2019-2020 COMP 3322A Modern Technologies on World Wide Web
Image of page 1
Roadmap Technologies for creating dynamic, interactive web pages JavaScript ( AJAX , JSON, jQuery) [client side] HTML5 [client side] Node.js [ server side and client side] AngularJS [client side] React [client side]
Image of page 2
AJAX (Asynchronous JavaScript and XML) Basic idea : exchanging data with the server and updating parts of a web page, without reloading the whole page Classic web pages (which do not use AJAX) must reload the entire page if the content changes Web applications can send data to and retrieve data from a server asynchronously (in the background), without interfering with the display and behavior of the existing page Example applications using AJAX Google map, Gmail, YouTube, Facebook, Not a new programming language, but a new way to use existing technologies on the client side to create fast and dynamic web pages use HTML, CSS, JavaScript, DOM, etc.
Image of page 3
Motivation After clicking “Like”
Image of page 4
Motivation To implement the Facebook like ” functionality using only HTML and server-side processing You can use HTML code like this < a href =" recordLike ? postToLike =1 "> Like </ a > and the Express.js web server handles recordLike by recording the new "like" information, sends updated html content back to your browser, which will replace the entire web page on display
Image of page 5
Motivation (cont’d) GET recordLike?postToLike=1 HTTP/1.1 Host : .... HTTP/1.1 200 OK …. <!DOCTYPE html> HTML of the entire page
Image of page 6
Not a good approach because From client perspective: when clicking on the “like” button, the current page stops, and browser waits for server response (waiting for server processing of “ recordLike ” and sending back new HTML content) From server perspective: recordLike has to generate the entire page content every time a client presses the “like” button, which severely increases the server workload Motivation (cont’d) Solution: client uses AJAX to communicate with the server behind the scene, and updates only part of the page
Image of page 7
How AJAX works Server sends web page that contains AJAX code Browser renders the webpage Client interacts with the webpage and invokes a JS
Image of page 8
Image of page 9

You've reached the end of your free preview.

Want to read all 26 pages?

  • Fall '19

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture