SEEM4570 System Design and Implementation. Lecture 4 AJAX and Demo

Transcription

1 SEEM4570 System Design and Implementation Lecture 4 AJAX and Demo

2 Prerequisite Please follow lecture note 3 up to P. 19 to set up your app environment. We build everything on top of it. In index.html, remove the following line: <meta http-equiv="content-security-policy" content="style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> 2017 Gabriel Fung 2

3 AJAX AJAX = Asynchronous JavaScript and XML. AJAX is not a programming language, but a way of thinking New way to use existing standards. AJAX is the art of exchanging data with a server E.g. Updating parts of a web page without reloading the whole page Gabriel Fung 3

4 Writing AJAX Writing AJAX from scratch is difficult. Different browsers have different syntax to implement AJAX. Luckily, we have many JavaScript Frameworks that help us to simplify our job. Usually, JavaScript Frameworks have taken care of this for us, so that we can write AJAX functionality with only a few lines of codes In this course, we use jquery to help us achieve AJAX Gabriel Fung 4

5 jquery and AJAX jquery provides many ways for you to use AJAX. In this lecture, we use AJAX in this way: $.ajax({ type: get_or_post, // "GET" or "POST" url: location, data: data, // data you want to send, if any success: function(data){ // something you want to do if success }, error: function(){ // something you want to do if fail. E.g. 404 error. } }); 2017 Gabriel Fung 5

6 Example 1 Preparation Let s create a page called title.html. This is the title screen for your game: +--www +--css +--img +--js +--index.html +--title.html 2017 Gabriel Fung 6

7 Example 1 title.html The title screen has three buttons: START, RANKING and ABOUT <div id="title-start_button" class="title_button">start</div> <div id="title-score_button" class="title_button">ranking</div> <div id="title-setting_button" class="title_button">about</div> 2017 Gabriel Fung 7

8 Example 1 index.js When the device is ready, we want to show the title page immediately. Hence revise index.js: // Remember we have some codes before. var app = { init: function() { $.ajax({ type: "get", url: "title.html", success: function(data){ $("body").html(data); // jquery method to update content }, error: function(){ console.log("error when loading title.html"); } }); } }; 2017 Gabriel Fung 8

9 Example 1 Result You should obtain the following screen: 2017 Gabriel Fung 9

10 Example 2 Enhance the Look and Feel The previous example is a bit boring. So let s enhance its look and feel. We need to add a file called title.css : +--www +--css +--index.css +--title.css +--img +--js +--index.html +--title.html 2017 Gabriel Fung 10

11 Example 2 title.css Add the following to title.css:.title_button{ text-align:center; margin:20px; padding:20px; border:solid; border-width:1px; border-color:#0054a6; background:#0072bc; color:#ffffff; font-family:"arial"; font-size:30px; } 2017 Gabriel Fung 11

12 Example 2 title.html Now, revise title.html to include title.css: <link rel="stylesheet" type="text/css" href="css/title.css"> <div id="title-start_button" class="title_button">start</div> <div id="title-ranking_button" class="title_button">ranking</div> <div id="title-about_button" class="title_button">about</div> 2017 Gabriel Fung 12

13 Example 2 Result You should now obtained: 2017 Gabriel Fung 13

14 Example 3 About Page When the user clicked the ABOUT button, it will go to the about us page. First, create two new files: about.html and about.css: +--www +--css +--about.css +--index.css +--title.css +--img +--js +--about.html +--index.html +--title.html 2017 Gabriel Fung 14

15 Example 3 about.html and about.css The content of about.html and about.css will be left as an exercise for you. Simply write whatever you think is appropriated Gabriel Fung 15

16 Example 3 Handle Click Event Now create a file title.js which tries to handle the click event: +--www +--css +--img +--js +--index.js +--jquery min.js +--title.js +--about.html +--index.html +--title.html 2017 Gabriel Fung 16

17 Example 3 title.js Add the following content: var titlejs = { init: function() { $("#title-about_button").on("click", function(){ $.ajax({ type: "get", url: "about.html", success: function(data){ $("body").html(data); }, error: function(){ console.log("error when loading about.html"); } }); }); } }; titlejs.init(); // make sure you run the function! 2017 Gabriel Fung 17

18 Example 3 Revise title.html Revise title.html to load title.js: <link rel="stylesheet" type="text/css" href="css/title.css"> <script>$.getscript("js/title.js");</script> <div id="title-start_button" class="title-button">start</div> <div id="title-ranking_button" class="title-button">ranking</div> <div id="title-about_button" class="title-button">about</div> 2017 Gabriel Fung 18

19 Example 3 Demo You should get the followings: 2017 Gabriel Fung 19

20 Example 3 Other Issues For the BACK button in the About Page, you can link it back to title page by following the similar steps as outlined in this Example Gabriel Fung 20

21 AJAX Note To use AJAX, you need to satisfy "same-origin policy" In computing, the same-origin policy is an important security concept. It permits scripts running on pages originating from the same site to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites Gabriel Fung 21