程序代写 Dr Martin White

Dr Martin White
Mobile Web 3D Applications
AJAX, JQuery and JSON

Copyright By PowCoder代写 加微信 powcoder

Dynamic update with AJAX, JQuery & JSON
Table of Contents
Introduction 2
Convert Lab 5 to an AJAX, JQuery and JSON version 3
Steps to convert Lab 5 to an AJAX version in Lab 6 3
Setting up Lab 6 3
Create the data model 4
New functionality for your 3D App 7
Create your AJAX update code 10
Update your index.html file home contents 13
Update your index.html file coke, sprite and pepper contents 18
Tidy up your CSS and redesign your HTML 5 layout 22
Redesign the HTML layout and add more interaction input 25
Redesign the input controls for the X3D models 25
Redesign the X3D model contents HTML layout 29
Connect up the X3D model interaction control buttons 32
X3DOM hiding and switching visible nodes 38
Add 3D images to your 3D App 38
Finish Off 39
Lab 7 MVC, JQuery, AJAX, JSON, PHP and SQLite 40
Appendix 41
Appendix — Review Week 5 Results 41

Introduction
This tutorial will be brief, primarily intended to spend some time to tidy up your code so far and adding some more functionality. The tutorial will follow a series of key steps and point you to the completed example and its components so that you can examine with the Chrome Developer Tools, as usual. However, don’t forget to make sure you have finished Lab 5 before you attempt this week’s tutorial, see Appendix — Review Week 5 Results.
The goal of Part 1 of this week’s lab is to convert your Lab 5 template into a dynamic version that takes content from a backend data store. The data store for this lab will be a simple JSON file, which in effect emulates a JSON packet being returned from the web server. We will utilise the jQuery.getJSON() method, which you can learn more about here:
· http://api.jquery.com/jquery.getjson/
We will largely only use this shorthand version, because we will mostly be retrieving data from the backend, to create an AJAX request on the server (JSON file). I say mostly because during your final assignment you may wish to add extra functionality that writes data to the back end, e.g. to add more objects into the database, or update existing database contents.
You should take the time at this stage to tidy up any CSS, and connect up any buttons, e.g. camera, model load, animation, etc. to execute any associated functionality.
Convert Lab 5 to an AJAX, JQuery and JSON version
You should have already completed Lab 5, but don’t forget your version may be slightly different to this example, if so this tutorial will form a guide. If you have followed Lab 5 exactly as in that tutorial, then you can carry on implementing the following Lab 6 instructions.
Steps to convert Lab 5 to an AJAX version in Lab 6
We shouldn’t, of course, forget that we have already used AJAX to construct the 3D Image Gallery. But, instead of using XMLHttpRequest, we are now we are going to use JQuery’s AJAX methods to dynamically update the front-end view from a back-end JSON file.
Setting up Lab 6
Follow these steps to convert your Lab 5 template into an AJAX based version:
1. Create a Lab 6 folder and copy over your Lab 5 site — use your Windows file manager to do this. While you are doing this, reflect on the file structure. There will be code and files there, which are not needed anymore. For example, you can dump:
· The examples folder, you can dump.
· The gallery folder assuming that you have now integrated the gallery coded properly into your 3D App SPA.
· You don’t need the texts folder in assets anymore, as you have already used this text. In this tutorial, you are going to transfer the text into a JSON file anyway, which you can copy from the HTML.
· There will be JS and CSS files form the distribution you installed that you don’t need, clean them out.
2. As before, I suggest using a lightweight code editor such as NotePad++, Brackets, Sublime Text, etc. to edit your Lab 6 code. I am using Visual Studio Code, as we did for Labs 1, 4 and 5.
· When you have your Lab 5 site copied, and tided up, to your Lab 6 site, test it to make sure it still works.
· You should have an index.html. You should also have an assets folder containing your images (gallery_images and site_images) and x3d models, a scripts (js and php) folder and a css folder, etc. Figure 3 illustrates something like what you should have if you have organised your site as you processed through these labs using Bootstrap — I have opened most of the folders, so you can check you are in the right space.
· Note in Figure 1 we have put the hook.php file in a php folder inside your scripts folder as part of deploying our gallery code. Similarly, we have placed the gallery_generator.js in the scripts folder and the gallery images are inside the assets folder in a gallery_images subfolder, and tidied all other images into the site_images subfolder. This means we need to modify the paths in the hook.php and gallery_generator.js and other files (inex.html and custom.css) files accordingly.
· As usual, you can examine all this code in the Live Feedback Site using the Chrome Dev Tools > Inspect

Figure 1: Your Lab 5 3D App site copied to Lab 6 ready to add the JSON backend, etc.
Create the data model
3. We will need to create a model of the data we want to fetch (or get) from the backend server. So, create a folder for your model (call it model) at the same level as your scripts or assets folder.
4. Create a JSON file to store your data. When you have create your JSON file make sure you validate your JSON code with one of the online JSON validation tools, see Figure 2.
· For more information on JSON (JavaScript Object Notation) read the Lab Notes provided on the Canvas site, which also give you links to several online sources that provide a good introduction to JSON, e.g. the w3schools JSON tutorial, and so on. However, put simply: “JSON is built on two structures:
· A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
· An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.”
· You can see from Figure 2 how to organise your data. In this case we can see a pageTextData Object with an array of 4 pageTextdata records composed of the names: title, subtitle and description with their corresponding data values. Take some time to do some background research on JSON
· Again, using the Chrome Developer Tools, you can inspect this file and create your own. Place your data.json file in the model folder.
· Make sure when you create this data.json file that you do not create a line return in the text string, this will cause a silent error. Figure 2 simply shows the text cropped as an image so you can better see the structure, but I have word wrap turned on in Visual Studio Code, so don’t make the mistake of forcing a line return.
· Further, as already mentioned, make sure that you validate your data.json file with one of many of the online JSON validators because, as again as already mentioned JSON fails silently. Figure 3 shows the validator (JSONLint) and this particular data.json file as being valid.

Figure 2: The new model folder and data.json file in Visual Studio Code

Figure 3: Creating and validating the data.json file.
5. Save and close your data.json file, we’ll need it later.
New functionality for your 3D App
6. It is worthwhile reflecting on what additional functionality we can include in our 3d App besides dynamic update of contents. There are several simple additions we can add to the functionality of your Lab 5 results, some are essential to make the 3D App dynamic and others may be optional, but only because you might think of better functions that you can add, and some are highly recommended:
· Essential: Create and link in a simple JavaScript document (getJsonData.js) that makes an AJAX service request to get the main text data from the JSON data store, i.e. the data.json file in the model folder. You will need to write this, see Figure 5. We will need to link in the JQuery library as well, which you already did in Lab 5.
· Recommended: Rearrange your HTML layout and modify any associated CSS, i.e. rebranding your 3D App. You will need to do this for your assignment hand in Week 11 anyway. If you hand in an assignment in Week 11 that is virtually the same thing as given the labs Lab you will end up with basic threshold marks.
· Recommend (strongly) investigating the Bootstrap 4 Cards; this component appears to be very powerful!
· Optional: Apply the PHP functions that are described in the Lab 6 Notes, i.e. header and footer includes, which you can use to separate out your header and footer code into separate files — this is more useful when you have many files and you want to update just a single file to reflect across all pages. For example, although we want to use a single page layout, in practice we might do this for the model pages, have a separate home, about, contacts, statement of originality, and so on pages. So, using PHP to manage this is useful.
· Optional: Also, you might want to try out the PHP swap contents approach to replace the JavaScript swap contents code you developed in previous labs.
· Recommended: As an alternative to the PHP swap methods, try out the JQuery methods for ‘hide’ and ‘show’ page content, rather than the JavaScript swap code you developed in previous labs. There are also other methods such as ‘fadeIn’, etc. See Figure 4, you should get into the habit of prototyping your code like this, and then port this to your 3D App. Incidentally, this particular code is recommended rather than optional because it gives you the opportunity to pick up marks by showing a deeper understanding of code having developed beyond the basic JavaScript.
· Recommended: Create some 3D images of your 3D models to use as extra media contents. Link these 3D images to your home page column images, and your 3D Image Gallery.
· Recommend: As always, towards the end of this tutorial, consider tweaking or tidying up your CSS if necessary.

Figure 4: Use w3schools to try out effects, e.g. JQuery show(), hide(), fadeIn(), fade(), etc. methods
Create your AJAX update code
7. Let’s create the JavaScript getJsonData.js document (or file) to link into your 3D App. The easiest thing to do here, to keep this short, is simply show you the code, see Figure 28. But, note this isn’t the final code. You will need to add more code to completely remove all data embedded in the front-end view so that it is served up asynchronously from the back-end. As usual, you will be able to examine your Lab 6 results, if you need more help, using the Chrome Developer Tools. And, as usual, the Live Feedback Site has working code!

Figure 5: The getJsonData.js file.
· Here is what it does:
· Line 2 simply uses the jQuery $(document).ready(function(){ handler goes here}); which effectively waits to execute the handler until the HTML DOM has fully loaded. You often see JavaScript code put at the bottom of the HTML body to do the same.
· Line 5 exploits the JQuery $.getJSON () method, check out w3schools to experiment with this method, which is used to make an AJAX request and output the returned result, which is a JSON object. You need to provide a URL to send the request to, which in this case is simply the data.json file in the model folder. But, this could effectively be an api call to an api method, PHP or otherwise, located on some server ‘somewhere, could be anywhere, …’. A JSON object is then returned, i.e. the function(jsonObj), which you need to write a handler to strip out the data from the JSON object
· Tip, if you want to observe the data being returned in the jsonObject, you can use console.log(jsonObj), see Figure 6, and view this is the Chrome Developer Tools.

Figure 6: Use the console.log() function to debug, comment it out when finished
· If you use the console.log() function you can then see in Chrome Developer Tools the jsonObj returned, see Figure 8. We are not actually using this data in the jsonobj yet, we would need to attach it to an ID in the frontend view. But, this is useful, because you might put the data into the wrong array, which I did! So, you should be able to see the returned object assuming that you have your model (data.json) and JavaScript (getjsondata.js) written correctly, even before you have your HTML id selectors in the HTML set up and associated CSS rules, etc. completed.
· In the example given, Figure 5, we simply build the required HTML to replace the div tags in the web page for #title_home, #subTitle_home, #description_home, and so on for the other 3 content block elements. We can see that the JQuery .html() method assigns the HTML and data retrieved to the JQuery id selector: $(‘#id’). For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient.
· It is useful to note that a lot of JQuery’s functions are effectively wrappers around JavaScript functions making it easier for us to code more efficiently.
· Once you have created the getJsonData.js file you will need to link it to the index.html file, as well as the jQuery libraries, which you already have, see Figure 7.
· Also, the slim version of JQuery does not include the AJAX methods and other animation effects, so you need to change to the full version if you are not already using the full version. see Figure 7.

Figure 7: Link in the getJsondata.js file and the JQuery JavaScript library.

Figure 8: Examine the jsonObj with the console log in Chrome Developer Tools.
Update your index.html file home contents
8. Now that we can see that we are indeed getting the data from the backend, we need to hook it up to the frontend view. To do this you will now need to modify your HTML to use the HTML generated by the getJsonData JavaScript file. For example, Figure 9 shows the HTML code for the text in the main_text box on the home page.

Bootstrap — replaced the HTML for the main_text sub-components, with the three new id selectors

Bootstrap — Here’s the result, it’s the same as before, except the main text content is now asynchronously loaded from the backend data.json file

Figure 9: We are now using the id’s for title_home, subtitle_home and description_home to dynamically insert the corresponding data with an AJAX request
· To walk you through this, Figure 10 shows the JSON data in the data.json file in the model directory, for the main_text box.

Figure 10: The main_text box data in the data.json file on the backend web server.
· And, clearly Figure 11 shows the corresponding part of the JQuery handler code that gets this data from the jsonObject, builds the HTML, with the JQuery .html method and returns it to the front-end HTML file via the associated ID.

Figure 11: The associated JQuery handler code that gets this data from the jsonObject
· So the title data gets dropped into the div tag with the id=“title_home”, and so on for the subtitle and description.
· And, remember, your CSS rules in custom.css will now style the contents according to the rules you specified in your main_text for the h2, h3 and p tags.
9. Finish connecting the home contents for the backend to the frontend.
· Notice, in Figure 5 we have written the AJAX based code to request data for the left, centre and right columns. We now need to modify the HTML to insert the data contents for the home page (i.e. home contents section) left, centre and right columns. Figure 12 shows you the modified HTML code for the column contents. For example, we now use the ID selectors for title_left, subtitle_left, description_left to drop the contents for the left column into the