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
Motivation After clicking “Like”
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
Motivation (cont’d) GET recordLike?postToLike=1 HTTP/1.1 Host : .... HTTP/1.1 200 OK …. <!DOCTYPE html> … HTML of the entire page
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
How AJAX works Server sends web page that contains AJAX code Browser renders the webpage Client interacts with the webpage and invokes a JS
You've reached the end of your free preview.
Want to read all 26 pages?
- Fall '19