9_AJAX_COMP3322B_s2019.pdf - COMP 3322B Modern Technologies on World Wide Web 2nd semester 2018-2019 AJAX Basics(O2 Dr C Wu Department of Computer

9_AJAX_COMP3322B_s2019.pdf - COMP 3322B Modern Technologies...

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

Dr. C Wu Department of Computer Science The University of Hong Kong AJAX Basics (O2) 2nd semester 2018-2019 COMP 3322B Modern Technologies on World Wide Web
Image of page 1
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 2
Motivation After clicking “Like”
Image of page 3
Motivation To implement the Facebook like ” functionality using only HTML and server-side processing language like PHP You can use HTML code like this < a href =" recordLike.php ? postToLike =1 "> Like </ a > And recordLike.php on the web server contains PHP code to insert the "like" information to the Database, reconstruct the entire page and send it back to your browser
Image of page 4
Motivation (cont’d) GET recordLike.php?postToLike=1 HTTP/1.1 Host : .... HTTP/1.1 200 OK …. <!DOCTYPE html> HTML of the entire page
Image of page 5
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.php ” and sending back new HTML page) From server perspective: recordLike.php” has to generate the entire page 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 uploads only part of the page
Image of page 6
How AJAX works Server sends web page that contains AJAX code Browser renders the webpage Client interacts with the webpage and invokes a JS func<on (event handler) The JS func<on creates an XMLHTTPRequest object, and sends the request to server Server processes the request Server sends result The JS func<on processes the response and modifies the affected HTML content Client Server (in JSON or other format)
Image of page 7
XMLHttpRequest Object The XMLHttpRequest
Image of page 8
Image of page 9

You've reached the end of your free preview.

Want to read all 25 pages?

  • Fall '13
  • Dr. C. Wu
  • Ajax, Web page, World Wide Web, Web server

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture