Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.
-
Upload
shyann-edgar -
Category
Documents
-
view
215 -
download
0
Transcript of Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.
![Page 1: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/1.jpg)
Web ProgrammingSE 480:
Week 10: Ajax Data SourcesCopyright © Steven W. Johnson
October 1, 2012
![Page 2: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/2.jpg)
Week 10:
Ajax using XML, JSON, MySQL
Overcoming Ajax weaknesses
Browser cache
Introduction to XML; JSON
2
![Page 3: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/3.jpg)
Disadvantages of Ajax:
3
Clearly the short-term leader
Many problems:
any page-based idea no longer applies
page navigation different
bookmarks don’t work
‘send me your URL’
search engines: dynamic content is ‘deep web’
![Page 4: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/4.jpg)
Ajax:
Made up of JavaScript and CSS over HTTP
Has security issues like JavaScript, HTTP
Graceful degradation, backwards compatibility
Problem: no place to ‘step down’ to
4
XMLHttpRequest
![Page 5: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/5.jpg)
Disadvantages of Ajax:
Hijax: ‘simplified Ajax’ (Jeremy Keith)
Hijax is an exercise in progressive enhancement
Build site without Ajax, add progressive layers
Link behaviors ‘Hijacked’ (kaçırmak) from HTML;
progressively moved toward Ajax
5
![Page 6: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/6.jpg)
Disadvantages of Ajax:
6
HijaxAjax
![Page 7: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/7.jpg)
Drags on performance:
Number and type of files
IE8 supports up to 6 connections per host
HTTP resources are dealt with one-at-a-time
Auto-loaded scripts interpreted before opening
<head> Javascript, ‘onload’ scripts interpreted before page opens
Place essential scripts in head, load dynamically*7
![Page 8: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/8.jpg)
Drags on performance:
Minimize HTTP requests (use one .js file)
Code performance versus DOM manipulations
Manage your cache; reuse items if it can
Give all content cache life
gZip static content
Minimize ‘onload’ script; NO ERRORS
8
![Page 9: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/9.jpg)
Drags on performance:
9
for(i=0; i<array.length; i++) { do something}
end = array.length;for(i=0; i<end; i++) { do something}
![Page 10: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/10.jpg)
Making Ajax work better:
Cache on the server side:
generated JSON
saved recordsets
Cache on the client side:
Results of Ajax calls
Save data to JavaScript objects
10
![Page 11: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/11.jpg)
11
Browser cache:
Cache: brings resources closer temporarily
CPU cache (register)
L2 & L3 cacheResources
(data)
Resources(data)
![Page 12: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/12.jpg)
12
Browser cache:
Memory in HDD used by browser; “Internet Files”
Keeps copies of files to speed re-use
Stores images (banners, buttons, DATA, etc)Resources
(data)
Resources(data)
![Page 13: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/13.jpg)
Browser cache:
Browser caches:
disk: primary cache
memory: mail, SSL, ‘no-cache’ items
image: for decompressed images (.gif, .png, .jpg)
13
![Page 14: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/14.jpg)
Browser cache:
Issues with the cache:
may want to use more effectively
may want to not use at all
Web designers can manage the cache
cut down on bandwidth; save time
store partial processes; recordsets
14
![Page 15: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/15.jpg)
Browser cache
Problems with cache:
many designers don’t consider it
55% of resources don’t specify max-age*
may be turned off locally
may be full (30%* of people in survey)
mobile devices are a disaster
non-cacheable elements (frames)
15*stevesouders.com
![Page 16: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/16.jpg)
Browser cache:
Browser cache control based in:
freshness: time check; uses current if fresh
validation: cached response still good?
invalidation: current page is over-written
Commands used to check:
16
expiresmax-agelast modifiedif-modified-since
![Page 17: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/17.jpg)
3 main ways to control:
meta tags (client side)
with code (server side)
web server configuration files
17
Browser cache:
![Page 18: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/18.jpg)
Client side meta tags (normal web page)
Meta: ‘thinking about’ or ‘describing itself’
18
<meta name=“Keywords” content=“folk, music”><meta name=“Description” content=“Turkish folk music”>
<meta http-equiv=“Cache-control” content=“public”><meta http-equiv=“pragma” content=“no-cache”> //old<meta http-equiv=“Expires” content=“-1”>
public | private | no-cache | no-store
public: may be cached publicprivate: may be cached privateno-cache: do not cacheno-store: may be cached, but not archived
Browser cache:
![Page 19: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/19.jpg)
Encoding links so each instance is unique
Can use time (milliseconds) or random
Works well in Ajax
19
url = “music.php?instrument=" +id + "&random=" +Math.random();
Browser cache:
![Page 20: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/20.jpg)
jQuery/JavaScript
20
{Cache: false}
Browser cache:
![Page 21: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/21.jpg)
header(“Cache-Control: no-cache, must–revalidate”);header(“Expires: Sat, 18 Mar 2002 23:59:59 GMT”); //past expire dateHeader(“Cache-Control: max-age=32436000);
header(“Pragma: no-cache”);header(“Last-Modified: ” .some date);
Server side defines cache settings before sent
header() function creates HTTP requests
21
$_SERVER['HTTP_IF_MODIFIED_SINCE'] == time
Browser cache:
![Page 22: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/22.jpg)
web server configuration files:
httpd.conf
.htaccess
HTTP header files
22
Browser cache:
![Page 23: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/23.jpg)
Apache set ‘mod_expires’ and ‘mod_headers’
23
ExpiresDefault "<base> [plus] {<num> <type>}*"ExpiresByType type/encoding "<base> [plus] {<num> <type>}*" )
<base>: access, now, modification‘plus’ keyword is optional<num>: a number<type>: years, months, weeks, days, hours, minutes, seconds
ExpiresDefault “access plus 1 month”ExpiresByType image/gif “modification plus 5 hours 3 minutes”
Browser cache:
![Page 24: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/24.jpg)
24
Browser cache:
Data in cache won’t update by F5
Can turn off cache, or cache everything (settings)
abc
abc
F5Reload
Reloads page, not data
![Page 25: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/25.jpg)
XML:
eXtensible (genisletmek) Markup Language
Meta (mecaz) language
Purpose: store data in hierarchical format
Can be rendered in browser (text); not intent
25
¸
![Page 26: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/26.jpg)
XML:
Used to describe data and data relationships
‘Semantic information’
26
![Page 27: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/27.jpg)
XML:
XHTML 2.0 was XML as page markup language
Overall effect is same; not equal ideas
27
=+ +
![Page 28: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/28.jpg)
XML:
28
Point: store data and context (baglam) of data
Elements describe what they hold
HTML: presentation of content
HTML: element names defined
XML: data relationships
XML: name elements to make sense
<Name>Steve</Name> //xml
<h2>Steve</h2> //html
˘
![Page 29: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/29.jpg)
XML:
29
Rules for XML:
case sensitive
tags/elements must be opened and closed
proper nesting (FILO)
attribute values must be in quotes
root element (students)
![Page 30: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/30.jpg)
XML:
30
<?xml version=“1.0” encoding=“utf-8”?>
<students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> <gender>Erkek</gender> </student> <student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> <gender>Hanim</gender> </student> </students>
“SML” (Students markup language)Table
Fields
Record
Students
Name Age Bolum Gender
Ali 20 MBBF Erkek
Bahar 21 ITF Hanim
XML: 2-dimensional (boyutlu) tables
Maker of flatfile databases
![Page 31: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/31.jpg)
XML:
31
<?xml version=“1.0” encoding=“utf-8”?>
<building> <apartment> <room>living room</room> <room>dining room</room> <room>kitchen</room> </apartment> </building>
An XML markup language
![Page 32: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/32.jpg)
XML:
32
<?xml version=“1.0” encoding=“utf-8”?>
<building> <apartment> <room type=“bedroom”> <item type=“shirt” color=“blue” /> <item type=“pants” color=“green” /> <item type=“clock” kind=“digital” /> </room> </apartment> </building>
Added ‘empty’ elements (item)
Like <br /> instead of <p>Hi</p> in HTML
attributes
![Page 33: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/33.jpg)
XML: advantages/disadvantages
Self-describing; use of custom tags adds clarity
Human and machine readable
Data and presentation are not mixed (HTML)
Hierarchical (adds semantics)
Model complex data relationships
Cross-platform, language independent
Parsed (ayrıstırmak) by many languages33
¸
![Page 34: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/34.jpg)
XML: advantages/disadvantages
Requires processing application (xslt)
Redundant (gereksiz) syntax
Lots of tags; heavy footprint; verbose (söz)
Doesn’t support data types
Issues with non-hierarchical data
Translating out of XML a problem
34
![Page 35: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/35.jpg)
Break
![Page 36: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/36.jpg)
JSON:
All data sources are like 2-dimensional arrays
Table: records (rows) and fields columns
36
array = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]];
0 1 2 3
0 0 1 2 3
1 4 5 6 7
2 8 9 10 11
0 1 2 3
0 [0,0] [0,1] [0,2] [0,3]
1 [1,0] [1,1] [1,2] [1,3]
2 [2,0] [2,1] [2,2] [2,3]
array[2][1]; //9array[1][3]; //7
![Page 37: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/37.jpg)
JSON:
JavaScript Object Notation
Data interchange (kavsak) format
Passes objects as strings from server to client
Basic form: uses name/value pairs
37
{“firstname”: “Canan”}
firstname = “Canan”;
¸
![Page 38: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/38.jpg)
JSON:
Does have a logo
Has a web site (json.org)
Incorporated into ISO
Douglas Crockford (2002)
Part of ECMAScript, RFC 4627
38
![Page 39: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/39.jpg)
{“name”: “Ali”, “age”: 20, “bolum”: “MBBF” }
JSON:
Many string values identified in same “record”
Information defining one person/entity
Strings in quotes; numbers not
39
![Page 40: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/40.jpg)
array = [[“Cem”, “Ali”, “Eda”],[18, 22, 24]];
{students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” }]}
JSON:
Arrays used to represent many entities
Curly brackets define entities
Square brackets define entire source
40
![Page 41: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/41.jpg)
students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” }];
JSON:
All three represent the same data; “records”
Effectively a database table
41
students = [ {“name”: “Ali”, “age”: 20, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: 21, “bolum”: “ITF” } ];
Students
Name Age Bolum Gender
Ali 20 MBBF Erkek
Bahar 21 ITF Hanim
students[1].age //21
![Page 42: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/42.jpg)
JSON:
An array of arrays or a database with 2 tables
‘Company’ is DB, tables ‘employees’, ‘managers’
var company = {“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":18}, { "firstName":"Anna" , "lastName":"Smith" , "age":20}, { "firstName":"Peter" , "lastName":"Jones" , "age":21} ], “managers”: [ { "firstName":“Alice" , "lastName":“Williams" , "age":19}, { "firstName":“Carla" , "lastName":“Walker" , "age":23}, { "firstName":“Joe" , "lastName":“Evans" , "age":22} ]}
document.write(company.employees[2].firstName); //Peterdocument.write(company.managers[1].age); //23
![Page 43: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/43.jpg)
JSON:
Update table values also
var company = {“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":18}, { "firstName":"Anna" , "lastName":"Smith" , "age":20}, { "firstName":"Peter" , "lastName":"Jones" , "age":21} ], “managers”: [ { "firstName":“Alice" , "lastName":“Williams" , "age":19}, { "firstName":“Carla" , "lastName":“Walker" , "age":23}, { "firstName":“Joe" , "lastName":“Evans" , "age":22} ]}
company.employees[2].firstName= “Steve”;
![Page 44: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/44.jpg)
JSON:
JSON.parse converts strings into objects
Native (dahil) in browsers since IE 8
44
JSONObj = JSON.parse(requestObject.responseText);document.getElementById(“a”).innerHTML = JSONObj[1].first;document.getElementById(“b”).innerHTML = JSONObj[1].last;
[ {"first":"John" , "last":"Doe" , "age":18}, {"first":"Anna" , "last":"Smith" , "age":20}, {"first":"Peter" , "last":"Jones“ , "age":21}]
![Page 45: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/45.jpg)
JSON:
JSON.parse:
JSONObj = JSON.parse(requestObject.responseText);
{“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":18}, { "firstName":"Anna" , "lastName":"Smith" , "age":20}, { "firstName":"Peter" , "lastName":"Jones" , "age":21} ], “managers”: [ { "firstName":“Alice" , "lastName":“Williams" , "age":19}, { "firstName":“Carla" , "lastName":“Walker" , "age":23}, { "firstName":“Joe" , "lastName":“Evans" , "age":22} ]}
company.employees[2].firstName= “Steve”;
45
![Page 46: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/46.jpg)
JSON:
.json and .txt are both text file formats
File holds an object/array (data source)
Ajax calls object and extracts data
46
data.txtdata.json
![Page 47: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/47.jpg)
JSON:
Concept: JSON data source on server
Call server with address in array/database
Update page without refreshing entire page
47
page.html
array = []
json.txtdata.json
![Page 48: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/48.jpg)
JSON versus Ajax:
48
“students”= [ {“name”: “Ali”, “age”: “20”, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: “21”, “bolum”: “ITF” }]
<?xml version=“1.0” encoding=“utf-8”?>
<students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> <gender>Erkek</gender> </student> <student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> <gender>Hanim</gender> </student> </students>
![Page 49: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/49.jpg)
JSON versus XML:
Both describe objects as strings
Both suitable for use in web services
Both enjoy broad support, libraries, etc.
Tools to convert, or do so on your own
49
<name>Steve</name>
“name”: “Steve”,
![Page 50: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/50.jpg)
JSON advantages:
JSON is JavaScript
‘XML with anorexia’; faster to parse*
Easier to write, lightweight, less verbose
True data format, not a meta language
Language independent, cross platform
Self-describing and human readable
Hierarchical (values within values, detail on topics)50
![Page 51: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/51.jpg)
JSON disadvantages:
JSON is JavaScript
Requires use of ‘eval’ function*
Reserved JavaScript keywords can’t be
used as Element names
XML is more familiar; more like HTML
More precise tool (has its own DTD)
Better support (libraries, etc)51
![Page 52: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/52.jpg)
JSON and UTF-8:
JSON supports UTF-8; Notepad does not
Must save UTF-8 files using UTF-8; not
ANSI
52
![Page 53: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/53.jpg)
JSON:
x-dimensional array saved as ‘employees’
objname[i].fieldname
53
employees = [{ "firstName":"John" , "lastName":"Doe" , "age":18},{ "firstName":"Anna" , "lastName":"Smith" , "age":20},{ "firstName":"Peter" , "lastName":"Jones" , "age":21}];
document.write(employees[1].age); //20
![Page 54: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/54.jpg)
Making data sources:
Arguably hardest part of labs/assignment
Add data formats have same idea:
‘field name’
‘data’
54
<name>Ali</name>
{“name”:“Ali”}
Name
Ali
![Page 55: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/55.jpg)
Making data sources:
Utilities do exist to transfer data
Can manually convert using a language
55
<name>Ali</name> {“name”:“Ali”}
start = String.indexOf(“<”);end = String.indexOf(“>”);for(i=start+1; i<end-1; i++) { field += string.charAt(i);}
start = String.indexOf(“>”);end = String.lastIndexOf(“<”);for(i=start+1; i<end-1; i++) { value += string.charAt(i);}
write ‘{“’ +field+ ‘”:“’ +value+ ‘”}’
![Page 56: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/56.jpg)
Quiz:
1. What is the address of the value 24?
56
12 16 175 8 123 24 6
[2, 1]
![Page 57: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/57.jpg)
Quiz:
2. Place this array in the table:
57
1 2 34 5 67 8 9
[[1, 2, 3], [4, 5, 6], [7, 8, 9]]
![Page 58: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/58.jpg)
Quiz:
3. What XML tag is most like a record?
58
<bbb>
<aaa> <bbb> <ccc>data</ccc> <ccc>data</ccc> <ccc>data</ccc> </bbb></aaa>
![Page 59: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/59.jpg)
Quiz:
4. From <aaa>, the address of <bbb>?
5. Child nodes of <ccc>
6. What is the root node?
59
<aaa>[0].childNodes[0]
<aaa> <bbb> <ccc>11</ccc> <ccc>22</ccc> <ccc>33</ccc> </bbb></aaa>
0
<aaa>
![Page 60: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/60.jpg)
Quiz:
7. Children of <aaa>?
8. Value of <bbb>[0].childNodes[1].childNodes[0].nodeValue
60
1
<aaa> <bbb> <ccc>11</ccc> <ccc>22</ccc> <ccc>33</ccc> </bbb></aaa>
22
![Page 61: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/61.jpg)
Quiz:
9. JSON array of 3 names:
61
friends = [ {“name”:”Ali”, “name”:”Bahar”, “name”:”Canan”}];
![Page 62: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/62.jpg)
Quiz:
10. What is the value of company.employees[1].age?
62
var company = {“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":18}, { "firstName":"Anna" , "lastName":"Smith" , "age":20}, { "firstName":"Peter" , "lastName":"Jones" , "age":21} ], “managers”: [ { "firstName":“Alice" , "lastName":“Williams" , "age":19}, { "firstName":“Carla" , "lastName":“Walker" , "age":23}, { "firstName":“Joe" , "lastName":“Evans" , "age":22} ]}
20
![Page 63: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/63.jpg)
Web ProgrammingCS 450:
Week 10: Ajax Data SourcesCopyright © Steven W. Johnson
October 1, 2012
![Page 64: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/64.jpg)
64
Installing Uniform Server
Turn off Skype; turn on Windows Firewall
Double click/extract “Coral_8_9_2.exe”
To folder “C:\” (keep track of where it goes)
![Page 65: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/65.jpg)
65
Installing Uniform Server
After extraction, ‘Uniserver’ folder in ‘C’ drive
![Page 66: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/66.jpg)
66
Installing Uniform Server
Given two choices:
Start as program (no registry – manual load)
Start as service (added to registry – auto loads)
![Page 67: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/67.jpg)
67
Installing Uniform Server
Asked if UniServer is supposed to load
Set up a MySQL password
![Page 68: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/68.jpg)
68
Installing Uniform Server
Click on ‘Start Both’
![Page 69: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/69.jpg)
Starting Uniform Server
Apache starts first
You must unblock port (80)
69
![Page 70: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/70.jpg)
Starting Uniform Server
MySQL server starts next
You must unblock port (3306)
70
![Page 71: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/71.jpg)
Starting Uniform Server
Lots to do here
Access to:
phpInfo
phpMyAdmin
UniServer page
71
![Page 72: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/72.jpg)
72
![Page 73: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/73.jpg)
73
![Page 74: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/74.jpg)
74
Processes used by UniServer:
Three running processes:
![Page 75: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/75.jpg)
75
Installing Uniform Server
Turn on UniServer: ‘Start Both’
Turn off: ‘Stop Both’
![Page 76: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/76.jpg)
A “web page”:
Labs:
Register (validate, check user table)
Folk music:
DHTML
XML
JSON
Assignment: Your hobby76
![Page 77: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/77.jpg)
Lab: harika harran’s
Features:
accept/reject new username using Ajax
hash password (sha1)
enable/disable the ‘Register’ button
check area code/city code combination
77
![Page 78: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/78.jpg)
Lab: harika harran’s
Validate all entries (disable submit)
Use .innerHTML to show status of errors
image (green check or red X)
text (error message)
On successful completion, go to ‘thanks.html’
78
![Page 79: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/79.jpg)
Lab: harika harran’s
79
![Page 80: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/80.jpg)
Lab: harika harran’s
Make the database: registerdb
3 tables:
register data (mix user and pass)
area code
city code
80
![Page 81: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/81.jpg)
Lab: harika harran’s
Make the database: registerdb
Create table ‘users’ with 8 fields: usersId (int, 5, primary, auto-increment)
username (unique varchar 12)
password (varchar 32)
lastname (varchar 50)
firstname (varchar 50)
telephone (varchar 11)
email (varchar 50)
registerDate (timestamp, Attribute ON UPDATE)81
![Page 82: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/82.jpg)
Lab: harika harran’s
Make the database: registerdb
Create table ‘areacodes’ with 2 fields:
codeId (int, 5, primary, auto-increment)
areacode (varchar, 4, unique)
82
![Page 83: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/83.jpg)
Lab: harika harran’s
Make the database: registerdb
Create table ‘officecodes’ with 3 fields:
officeId (int, 5, primary, auto-increment)
codeId (int, 5)
officecode (int, 3, unique)
83
![Page 84: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/84.jpg)
84
Lab: harika harran’s
Insert data into your databaseINSERT INTO `users` VALUES(1, 'alib', 'denizyuz', 'Balikcioglu', 'Ali', '02325551234', '[email protected]', '2012-01-16 09:14:32');INSERT INTO `users` VALUES(2, 'selmac', 'jogger', 'Canli', 'Selma', '05324029876', '[email protected]', '2012-01-17 21:32:12');INSERT INTO `users` VALUES(3, 'Painterbey', 'pigments', 'VanGogh', 'Ernest', '05324558525', '[email protected]', '2012-01-19 14:42:05');INSERT INTO `users` VALUES(4, 'Musichanim', 'cmajor', 'Kocakeskin', 'Erdinc', '08756512785', '[email protected]', '2012-01-23 17:51:47');INSERT INTO `users` VALUES(5, 'futbol4ever', 'futbolpitch', 'Sehirbey', 'Pele', '04954286751', '[email protected]', '2012-01-24 08:06:19');INSERT INTO `users` VALUES(6, 'fenerrules', 'roberto', 'Buyukbey', 'Bahar', '09452331425', '[email protected]', '2012-01-24 09:37:12');INSERT INTO `users` VALUES(7, 'knitter', 'needleyarn', 'Ross', 'Benjamin', '09427254392', '[email protected]', '2012-01-26 09:14:37');INSERT INTO `users` VALUES(8, 'ieustudent', 'balcova', 'Einstein', 'Robert', '06427356284', '[email protected]', '2012-01-27 22:12:12');INSERT INTO `users` VALUES(9, 'kskrules', 'johann', 'Rooney', 'Mehmet', '08436184287', '[email protected]', '2012-01-27 23:06:41');INSERT INTO `users` VALUES(10, 'sedasinger', 'mavigoz', 'Seviyorum', 'Ilkgenc', '04852579561', '[email protected]', '2012-02-01 11:42:15');INSERT INTO `users` VALUES(11, 'asksong', 'forever', 'Yildizgoz', 'Gunus', '05134798561', '[email protected]', '2012-02-03 13:17:47');INSERT INTO `users` VALUES(12, 'tenderheart', 'poemreader', 'Frost', 'Emily', '05524354189', '[email protected]', '2012-02-03 16:39:52);
![Page 85: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/85.jpg)
85
Lab: harika harran’s
Insert ‘registerdb.txt’ into your database
INSERT INTO `areacodes` VALUES(1, 232);INSERT INTO `areacodes` VALUES(3, 287);INSERT INTO `areacodes` VALUES(2, 532);
INSERT INTO `officecodes` VALUES(1, 1, 254);INSERT INTO `officecodes` VALUES(2, 1, 274);INSERT INTO `officecodes` VALUES(3, 1, 337);INSERT INTO `officecodes` VALUES(4, 2, 508);INSERT INTO `officecodes` VALUES(5, 2, 400);INSERT INTO `officecodes` VALUES(6, 2, 387);INSERT INTO `officecodes` VALUES(7, 3, 841);INSERT INTO `officecodes` VALUES(8, 3, 205);INSERT INTO `officecodes` VALUES(9, 3, 261);
![Page 86: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/86.jpg)
Lab: harika harran’s
86
Open register folder, register.php:
Form built, table started
![Page 87: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/87.jpg)
Lab: harika harran’s
87
Make the form (tab at end of row to make new row)
25 pixels wide
![Page 88: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/88.jpg)
Lab: harika harran’s
88
Use these names
![Page 89: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/89.jpg)
Lab: harika harran’s
89
Add these ids and classes
id=“usernamepix” id=“usererror” class="errortext"
id=“passwordpix” id=“usererror” class="errortext"
id=“verifypix” id=“usererror” class="errortext"
id=“lastnamepix” id=“usererror” class="errortext"
id=“firstnamepix” id=“usererror” class="errortext"
id=“telephonepix” id=“usererror” class="errortext"
id=“emailpix” id=“usererror” class="errortext"
![Page 90: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/90.jpg)
Lab: harika harran’s
90
Use ‘.innerHTML’ to announce errors:
3rd column gets ‘red x’
4th column describes error
When fixed, both error messages turn off
![Page 91: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/91.jpg)
Lab: harika harran’s
91
What and how to validate:
username: validated to table; entry rules
telephone: area code/local must match
all other fields: entry rules
Turn ‘Submit’ on when all fields valid:
check all fields are valid
![Page 92: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/92.jpg)
Lab: harika harran’s
92
Username: 6 to 12 characters (letters/numbers)
Password: 6 to 12 characters (letters/numbers)
Password == Verify password
![Page 93: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/93.jpg)
Lab: harika harran’s
93
Telephone: NAPN
11 digits
1: ==0
2: != 1
5: !=1
Area code in table
Office code must match
![Page 94: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/94.jpg)
Lab: harika harran’s
94
0232 0532 0287254 508 841
274 400 305
337 387 261
![Page 95: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/95.jpg)
Lab: harika harran’s
95
Email prefix:
1st, last chars cannot be “.”
6 to 15 chars
cannot have 2 noktas in a row
@
3-12 char total
1st 3 chars cannot be nokta
ends with: .net, .org, .com, .edu, .tr
![Page 96: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/96.jpg)
Lab: harika harran’s
96
How about the submit button?
for( ) { flag[i] = 0;}
![Page 97: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/97.jpg)
Lab: harika harran’s
97
function validate(value, id) { has value? value is valid: flag = 1; no display if invalid flag = 0 errorentry(text, image, id) function errorentry() { display, focus, select;}
function submit() { submit off loop ‘flag’ values if all ‘1’, submit on}
![Page 98: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/98.jpg)
Lab: harika harran’s
98
General form:function validate(value) { if(value) { //error = value.match(regexp); validate all but Ajax validate Ajax valid flag failed length errorentry() failed content errorentry()}
![Page 99: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/99.jpg)
Lab: harika harran’s
99
“error routine”:
insert red “X” and error text (vary)
reset focus, selection
function errorentry(errortext, pix, box) { document.getElementById(box+"pix").innerHTML = pix; document.getElementById(box+"error").innerHTML = errortext; document.getElementById(box).focus(); document.getElementById(box).select();}
![Page 100: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/100.jpg)
Lab: harika harran’s
100
“submitbutton()”:
function submitbutton() { document.getElementById("Submit").disabled=false; for (i=0; i<7; i++) { if(flag[i]==0) {
document.getElementById("Submit").disabled=true; break;
} } }
![Page 101: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/101.jpg)
Lab: harika harran’s
101
Create .js file: scripts.js
Save files, test
<script src=“validate.js”></script><script type=“text/javascript”> window.onload = initPage;</script>
//scripts for register.phpfunction initPage() { document.getElementById(“username”).focus(); document.getElementById(“Submit”).disabled = true;}
![Page 102: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/102.jpg)
Lab: harika harran’s
102
Create embedded styles<style type="text/css"><!--.mainlayer { position: absolute; top: 25px; margin-left: -260px; width: 520px; left: 50%; background-color: #FFFFFF; border: 1px solid #000000;}body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; background-color: #FFFFF4;}.errortext { color: #FF0000;}--></style>
![Page 103: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/103.jpg)
Lab: harika harran’s
103
Initialize the flags (for validation)
flag=[];flag[0] = 0;flag[1] = 0;flag[2] = 0;flag[3] = 0;flag[4] = 0;flag[5] = 0;flag[6] = 0;
![Page 104: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/104.jpg)
104
Username:
function uservalidate(value, box) { if(value) { data = value.match(/[^A-Za-z0-9]/); if(value.length>5 && value.length<13 && !data) {
ajaxRequest = new XMLHttpRequest(); queryString = "?username=" +value; url = "registerquery.php" +queryString; ajaxRequest.open(“GET", url, true); ajaxRequest.onreadystatechange = callback; ajaxRequest.send(null);
function callback() { //IE only; FF has issues if(ajaxRequest.readyState == 4 && ajaxRequest.status==200) { if(!ajaxRequest.responseText) { document.getElementById("usernamepix").innerHTML = ""; document.getElementById("usernameerror").innerHTML = ""; flag[0] = 1; submitbutton(); } else { errorentry("Duplicate Username", "<img src='images/redx.png'>", box); } } } } if(value.length<6 || value.length>12) errorentry("Username is wrong length", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters", "<img src='images/redx.png'>", box); flag[0]=0; }}
![Page 105: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/105.jpg)
105
Username:
function passvalidate(value, box) { data = value.match(/[^A-Za-z0-9]/); if(value) { if(value.length>5 && value.length<13 && !data) { document.getElementById("passwordpix").innerHTML = ""; document.getElementById("passworderror").innerHTML = ""; flag[1]=1; submitbutton(); } else { if(value.length<6 || value.length>12) errorentry("Password is wrong length", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters", "<img src='images/redx.png'>", box); flag[1]=0; } }}
![Page 106: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/106.jpg)
106
Username:
function verifyvalidate(value, box, pass) { if(value) { if(value == pass) { document.getElementById("verifypix").innerHTML = ""; document.getElementById("verifyerror").innerHTML = ""; flag[2]=1; submitbutton(); } else { errorentry("Passwords do not match", "<img src='images/redx.png'>", box); flag[2]=0; } }}
![Page 107: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/107.jpg)
107
Username:
function lastnamevalidate(value, box) { data = value.match(/[^A-Za-z\-]/); if(value) { if(value.length<50 && !data) { document.getElementById("lastnamepix").innerHTML = ""; document.getElementById("lastnameerror").innerHTML = "";
flag[3]=1;submitbutton();
} else {
if(value>50) errorentry("Last name is too long", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters in last name", "<img src='images/redx.png'>", box);
flag[3]=0; } }}
![Page 108: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/108.jpg)
108
Username:
function firstnamevalidate(value, box) {
data = value.match(/[^A-Za-z\-]/); if(value) { if(value.length<50 && !data) { document.getElementById("firstnamepix").innerHTML = ""; document.getElementById("firstnameerror").innerHTML = ""; flag[4]=1; submitbutton(); } else { if(value>50) errorentry("First name is too long", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters in first name", "<img src='images/redx.png'>", box); flag[4]=0; } }}
![Page 109: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/109.jpg)
109
Username:
function phonevalidate(value, box) { if(value) { value = value.replace(/[^0-9]/g, "");
if (value.length==11 && value.charAt(0)=="0" && value.charAt(1) != "1" && value.charAt(4) != "1") { areacode = value.substr(0,4);
office = value.substr(4,3) ajaxRequest = new XMLHttpRequest();
queryString = "?areacode=" +areacode+ "&office=" +office; url = "registerquery.php" +queryString; ajaxRequest.open("GET", url, true); ajaxRequest.onreadystatechange = callback; ajaxRequest.send(null);
function callback() { if(ajaxRequest.readyState == 4 && ajaxRequest.status==200) {
if(!ajaxRequest.responseText) { document.getElementById("telephonepix").innerHTML = "";
document.getElementById("telephoneerror").innerHTML = ""; flag[5]=1; submitbutton(); } else {
errorentry("Phone number invalid", "<img src='images/redx.png'>", box); } }
} } else { errorentry("Phone number invalid", "<img src='images/redx.png'>", box); flag[5]=0; } }}
![Page 110: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/110.jpg)
110
Username:
<?php include ('connection.php'); ?> //registerquery.php<?php
if ($_GET['username']) { $username = $_GET['username']; $query = mysqli_query($con, "SELECT userId FROM users WHERE username = '$username'") or die("Error number: " . mysql_errno() ."<br / >". mysql_error()); $row = mysqli_num_rows($query); if ($row == 0) { echo ""; } else { echo "Duplicate Username"; //passes null or something }}
if ($_GET['areacode']) { $areacode = $_GET['areacode']; $office = $_GET['office'];
$query = mysqli_query($con, "SELECT officeId FROM areacodes, officecodes WHERE areacodes.codeId=officecodes.codeId AND officecode='$office' AND areaCode='$areacode'") or die("Error number: “.mysql_error()); $row = mysqli_num_rows($query); if ($row == 0) { echo "Invalid"; } else { echo ""; //passes null or something }}?>
![Page 111: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/111.jpg)
111
Username:
<?php //connection.php$host = "127.0.0.1";$username = “username";$password = “password";$database = "registerdb";$con = mysqli_connect($host, $username, $password, $database) or trigger_error(mysqli_error(),E_USER_ERROR);?>
![Page 112: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/112.jpg)
112
Username:
<?php include ('connection.php'); ?> //scripts at top of register.php
<?phpif (isset($_POST['Submit'])) {
$salt = "This is the salt"; $username = $_POST['username']; $password = $_POST['password']; $lastname = $_POST['lastname']; $firstname = $_POST['firstname']; $telephone = $_POST['telephone']; $email = $_POST['email'];
$password = sha1($salt.$password); //crypt() $lastname = strtoupper($lastname); $query = "INSERT INTO users (username, password, lastname, firstname, telephone, email) VALUES ('$username', '$password', '$lastname', '$firstname', '$telephone', '$email')"; mysqli_query($con, $query) or die("Failed Query of " . $query); header("location: thanks.html"); mysqli_close($con);}?>
![Page 113: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/113.jpg)
Break
![Page 114: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/114.jpg)
Lab: folk music
114
Make web page/application
Displays instruments & text ‘onclick’
![Page 115: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/115.jpg)
Lab: folk music
115
Make dynamic application:
No-jax (DHTML)
3 Ajax alternatives:
XML
JSON
MySQL
Use ‘highly-borrowed’ Turkish Folk Music site
![Page 116: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/116.jpg)
Lab: folk music
Our choices. Which is best?
116
page.html XMLHttpRequest
![Page 117: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/117.jpg)
Lab: folk music
117
Process is same regardless of data source
data to access
identify a record
insert values to layers
![Page 118: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/118.jpg)
Lab: folk music
118
Making your data XML
<xml version “1.0” encoding=“utf-8”><instruments> <instrument> <text>ud text</text> <pix>images/ud.png</pix> </instrument> <instrument> <text>tar text</text> <pix>images/tar.png</pix> </instrument > <instrument> <text>kaval text</text> <pix>images/kaval.png</pix> </instrument > </instruments>
Fields
Record
Table
![Page 119: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/119.jpg)
Lab: folk music
119
Making your data JSON
[{ “text”:“ud text” , “pix”:“images/ud.png” }, { “text”:“tar text” , “pix”:“images/tar.png" }, { “text”:“kaval text” , “pix”:“images/kaval.png” }]
FieldName value
Record
Table
![Page 120: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/120.jpg)
Lab: folk music
120
Making your data MySQL
CREATE TABLE `instruments` ( `text` varchar(1000) NOT NULL, `pix` varchar(250) NOT NULL) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
INSERT INTO `turkishfolkinstruments` VALUES('ud text', 'images/ud.png');INSERT INTO `turkishfolkinstruments` VALUES('tar text', 'images/tar.png');INSERT INTO `turkishfolkinstruments` VALUES('kaval text', 'images/kaval.png');
![Page 121: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/121.jpg)
Lab: folk music
121
Build web page
Start with DHTML
Modify for XML
Modify for JSON
Modify for MySQL
![Page 122: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/122.jpg)
Lab: folk music – DHTML
DHTML version
Uses JavaScript functions to hold data
Insert data dynamically
122
page.html
![Page 123: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/123.jpg)
Lab: folk music – DHTML
123
Open ‘folkmusic’ and ‘index.html’
Application made up of 6 layers
click on link
purple: image
blue: text about image
uses ‘innerHTML’
![Page 124: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/124.jpg)
Lab: folk music – DHTML
124
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Turkish Folk Music <<Your_Name>></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="styles.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="data/dhtml.js"></script></head>
![Page 125: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/125.jpg)
Lab: folk music – DHTML
125
.mainlayer { margin-left: -45%; position: absolute; height: 90%; width: 90%; left: 50%; background: -moz-radial-gradient(50% 25%, #FDF2CE, #F9E086); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDF2CE', endColorstr='#F9E086',GradientType=0 ); background-color: #F9E086; border-radius: 10px; border: 5px solid #626A39; min-height: 790px;}.title { position: absolute; left: 1%; top: 1%; right: 1%; min-height: 380px;}body { font-family: Papyrus; font-size: 18px;}p { font-family: Papyrus;}
![Page 126: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/126.jpg)
Lab: folk music – DHTML
126
.ad { position: absolute; height: 40%; width: 18%; left: 1%; bottom: 1%; background-color: #999933; border-radius: 7px; border: 5px solid #000000; min-height: 311px;}.nav{ position: absolute; height: 40%; width: 18%; left: 21%; bottom: 1%; min-height: 311px;}.text { position: absolute; height: 40%; width: 38%; right: 1%; bottom: 1%; overflow: auto; min-height: 311px;}
![Page 127: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/127.jpg)
127
.pix { position: absolute; height: 40%; width: 20%; right: 40%; bottom: 1%; text-align: center; min-height: 311px;}h1 { font-family: Caliph; font-size: 72px; text-align: center; line-height: 52px; color: #653123;}a:link { color: #584424; line-height: 1.5em;}a:hover { color: #B33B12; line-height: 1.5em;}a:visited { color: #2E598F; line-height: 1.5em;}img.right { float: right; margin: 8px 0px 8px 8px;}
![Page 128: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/128.jpg)
128
<body><div id="mainlayer" class="mainlayer" z-index:1"> <div id="title" class="title" z-index:2"> <h1>Turkish Folk Music Instruments</h1> <p><img class="right" src="images/players.png" width="137" height="225" alt="Folk music players" title="Folk music players" />I hope you enjoy my wesite about Turkish folk music instruments. Turkish folk music combines the distinct cultural values of all civilisations that have lived in Anatolia and the past territories in Europe and Asia. The instruments used can be classified as being stringed, wind, or percussion instruments. Lively Turkish folk music, which originated on the steppes of Central Asia, marks a complete contrast to the refined Turkish classical music of the Ottoman court. Until recently folk music was generally not written down, instead the traditions have been kept alive for generations by "asiklar", or troubadours and storyteller poets.</p> <p>Local Turkish folk music is comparatively more upbeat and lively than classical Turkish music. One genre of Turkish music is known as Turku which combines elements from both traditional Turkish music and western music and is quite popular in Turkey today.</p> </div> <div id="advertisement" class="ad" z-index:2">Advertisement here</div> <div id="instrumentnav" class="nav" z-index:2"> Instruments:<br /> <a href="#" onclick="baglamadisplay()">Baglama</a><br /> <a href="#" onclick="darbukadisplay()">Darbuka</a><br /> <a href="#" onclick="kabakkemanedisplay()">Kabak Kemane</a><br /> <a href="#" onclick="kemencedisplay()">Karadeniz Kemence</a><br /> <a href="#" onclick="kavaldisplay()">Kaval</a><br /> <a href="#" onclick="tardisplay()">Tar</a><br /> <a href="#" onclick="uddisplay()">Ud</a><br /> <a href="#" onclick="zurnadisplay()">Zurna</a><br /> </div> <div id="instrumentpix" class="pix" z-index:2"></div> <div id="instrumenttext" class="text" z-index:2"></div></div></body></html>
![Page 129: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/129.jpg)
129
function uddisplay() { document.getElementById(“instrumenttext”).innerHTML = “TEXT STRING” obj = document.getElementById(“instrumentpix”); obj.style.top = document.getElementById("mainlayer").offsetHeight*.59 + obj.offsetHeight/2-125 + “px”; document.getElementById(“instrumentpix”).innerHTML = “IMAGE STRING”}
Open data – dhtml.js
Copy function 8 times
Get string and image text from XML doc
Lab: folk music – DHTML
![Page 130: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/130.jpg)
130
function baglamadisplay() { xxx}function darbukadisplay() { xxx}function kabakkemanedisplay() { xxx}function kemencedisplay() { xxx}function kavaldisplay() { xxx}function tardisplay() { xxx}function uddisplay() { xxx}function zurnadisplay() { xxx}
Lab: folk music – DHTML
![Page 131: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/131.jpg)
131
Done! Open in browser and see how works
Lab: folk music – DHTML
![Page 132: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/132.jpg)
132
Up to this point: separation of concern
structure
presentation
logic
DHTML mixes logic and data; 4th concern
Lab: folk music – DHTML
![Page 133: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/133.jpg)
133
Data
Logic
Presentation
Structure
Lab: folk music – DHTML
![Page 134: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/134.jpg)
Lab: folk music – XML
XML version
134
page.html XMLHttpRequest
<instruments> <name>kaval</name> <image><img src…> <text>A Kaval…</text>
pix = <img src=… text = “A Kaval…
![Page 135: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/135.jpg)
Lab: music store – XML
135
Data store in tag hierarchy; use DOM to find
Browser incompatibilities on ‘childNodes’
<xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> <instrument> <instrumentId>2</instrumentId> <instrument>Ud</instrument> <text><p>The ud is a pear-shaped Baghdad … the instrument.</p></text> <pix><img src="images/ud.png" width="233" height="250" /></pix> </instrument> <instrument> </instruments>
![Page 136: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/136.jpg)
Lab: music store – XML
136
Best solution; work from ‘instrument’
childNodes: id, instrument, text, pix
instrument[value] which instrument
childNodes[3] the picture element
childNodes[0].value get its value
<xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> </instruments>
instrument[value].childNodes[3].childNodes[0].nodeValue;
![Page 137: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/137.jpg)
Lab: music store – XML
137
Define picture and text separately
Short DOM pathway; works in both browsers
<xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> </instruments>
image[value].childNodes[0].nodeValue;text[value].childNodes[0].nodeValue;
![Page 138: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/138.jpg)
Lab: music store – XML
138
Cannot use ‘<‘ or ‘>’; instead use < and >
No need to escape quotes or apostrophes
Easier to prepare data than JSON
Data in data/xmldata.xml<xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument>
…
</instruments>
![Page 139: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/139.jpg)
Lab: music store – XML
139
Use the same style sheet
Open xml.html
Install ‘request object’ script
<script type="text/javascript">function ajaxObject(value) { var requestObject = new XMLHttpRequest(); requestObject.onreadystatechange=function() { if (requestObject.readyState==4 && requestObject.status==200) { XMLObj = requestObject.responseXML; }requestObject.open("GET","data/xmldata.xml",true);requestObject.send(null);}</script>
![Page 140: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/140.jpg)
Lab: music store – XML
140
Add code to extract data from XML
if (requestObject.readyState==4 && requestObject.status==200) { XMLObj = requestObject.responseXML;
/*single object solution; only works in MS; counting on childNodes inst = XMLObj.getElementsByTagName("instrument"); document.getElementById("instrumentpix").innerHTML = inst[value].childNodes[3].childNodes[0].nodeValue; document.getElementById("instrumenttext").innerHTML = inst[value].childNodes[2].childNodes[0].nodeValue; */
image = XMLObj.getElementsByTagName("pix"); txtdesc = XMLObj.getElementsByTagName("text"); document.getElementById("instrumentpix").innerHTML = image[value].childNodes[0].nodeValue; document.getElementById("instrumenttext").innerHTML = txtdesc[value].childNodes[0].nodeValue; } }
![Page 141: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/141.jpg)
Lab: music store – XML
141
Build the links
Index is the order number in XML file
Instruments:<br /> <a href="#" onclick="ajaxObject(2)">Baglama</a><br /> <a href="#" onclick="ajaxObject(0)">Darbuka</a><br /> <a href="#" onclick="ajaxObject(3)">Kabak Kemane</a><br /> <a href="#" onclick="ajaxObject(4)">Karadeniz Kemence</a><br /> <a href="#" onclick="ajaxObject(5)">Kaval</a><br /> <a href="#" onclick="ajaxObject(6)">Tar</a><br /> <a href="#" onclick="ajaxObject(1)">Ud</a><br /> <a href="#" onclick="ajaxObject(7)">Zurna</a><br />
![Page 142: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/142.jpg)
Lab: music store – XML
142
Done! Upload to server and test
![Page 143: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/143.jpg)
Lab: folk music – JSON
JSON version
Can use any file that holds text (.js, .txt, etc)
143
json.html XMLHttpRequest jsondata.json
{xxxxx, yyyyyy}
![Page 144: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/144.jpg)
144
[ {"id":"1", "text":"<p>A darbuka … </p>", "pix":"<img src=“ … title="Darbuka" />" }, {"id":"2", "text":"<p>The ud … </p>", "pix":"<img src … title="Ud" />" }, {"id":"3", "text":"</p>The bağlama … </p>", "pix":"<img src … title="Baglama" />" }, {"id":"4", "text":"<p>The kabak kemane … </p>", "pix":"<img src= … title="Kabak Kemane" />" }, {"id":"5", "text":"<p>The Karadeniz ….</p>”, "pix":"<img src= … title="Karadeniz" />" }, {"id":"6", "text":"<p>The kaval … </p>, pix:”img src= … title="Kaval" />" }, {"id":"7", "text":"<p>The tar … </p>", "pix":"<img src= … title="Tar" />" }, {"id":"8", "text":"<p>The Zurna … </p>”, pix:"<img src … title="Zurna" />" }]
Issue: connect to data; find correct ‘record’
‘Records’ identified by array counter
File modified for use by ‘JSON.parse’ method
Lab: folk music – JSON
![Page 145: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/145.jpg)
145
The jobs:
Check our data source (data/jsondata.json)
Build request object on json.html (main page)
[ {"id":"1", "text":"<p>A darbuka … </p>", "pix":"<img src=“ … title="Darbuka" />" }, {"id":"2", "text":"<p>The ud … </p>", "pix":"<img src … title="Ud" />" }, {"id":"3", "text":"</p>The bağlama … </p>", "pix":"<img src … title="Baglama" />" }, {"id":"4", "text":"<p>The kabak kemane … </p>", "pix":"<img src= … title="Kabak Kemane" />" }, {"id":"5", "text":"<p>The Karadeniz ….</p>”, "pix":"<img src= … title="Karadeniz" />" }, {"id":"6", "text":"<p>The kaval … </p>, pix:”img src= … title="Kaval" />" }, {"id":"7", "text":"<p>The tar … </p>", "pix":"<img src= … title="Tar" />" }, {"id":"8", "text":"<p>The Zurna … </p>”, pix:"<img src … title="Zurna" />" }]
Lab: folk music – JSON
![Page 146: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/146.jpg)
146
Open ‘json.html’
Update title with your name
Style sheet from ‘dhtml’ lab
Mission is same: click on link, open image/text
Lab: folk music – JSON
![Page 147: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/147.jpg)
147
The request object: very compressed
<script type="text/javascript">
function ajaxObject(value) { var requestObject = new XMLHttpRequest(); requestObject.onreadystatechange=function() { if (requestObject.readyState==4 && requestObject.status==200) {
JSONObj = JSON.parse(requestObject.responseText); document.getElementById("instrumentpix").innerHTML = JSONObj[value].pix; document.getElementById("instrumenttext").innerHTML = JSONObj[value].text; } }requestObject.open("GET","data/jsondata.json",true);requestObject.send();
}
</script>
Lab: folk music – JSON
![Page 148: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/148.jpg)
148
Data string turned into object
Object’s row found with ‘value’; data extracted
Data located in ‘jsondata.json’
JSONObj = JSON.parse(requestObject.responseText);
document.getElementById("instrumentpix").innerHTML = JSONObj[value].pix;document.getElementById("instrumenttext").innerHTML = JSONObj[value].text;
requestObject.open("GET","data/jsondata.json",true);requestObject.send();
}
</script>
Lab: folk music – JSON
![Page 149: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/149.jpg)
149
Insert event handlers
Index identifies which row to use in array
<a href="#" onclick="ajaxObject(0)">Baglama</a><br /> <a href="#" onclick="ajaxObject(1)">Darbuka</a><br /> <a href="#" onclick="ajaxObject(2)">Kabak Kemane</a><br /> <a href="#" onclick="ajaxObject(3)">Karadeniz Kemence</a><br /> <a href="#" onclick="ajaxObject(4)">Kaval</a><br /> <a href="#" onclick="ajaxObject(5)">Tar</a><br /> <a href="#" onclick="ajaxObject(6)">Ud</a><br /> <a href="#" onclick="ajaxObject(7)">Zurna</a><br />
Lab: folk music – JSON
![Page 150: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/150.jpg)
150
Done!
Upload and test
Lab: folk music – JSON
![Page 151: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/151.jpg)
MySQL version
PHP page is used as interface
151
page.html XMLHttpRequest
Lab: folk music – MySQL
![Page 152: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/152.jpg)
152
2-minute crash course
Process very similar with ‘hello world’
Lab: folk music – MySQL
mysql.phpquery.php
![Page 153: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/153.jpg)
query.php
153
Our system: use HTML for view
Data comes from database as a block of text
Split and entered into layers
Lab: folk music – MySQL
mysql.html
![Page 154: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/154.jpg)
154
Lab: folk music – MySQL
Add data to database
Turn on web server
Open http://localhost/apanel/phpmyadmin
Create database ‘folkinstruments’
Insert text from ‘mysqldata.txt’
![Page 155: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/155.jpg)
155
Lab: folk music – MySQL
Open mysql.html<script type="text/javascript">function ajaxObject(value) { var requestObject = new XMLHttpRequest(); url = "query.php?id="+value; requestObject.onreadystatechange=function() { if (requestObject.readyState==4 && requestObject.status==200) { var MySQLObj = requestObject.responseText; output = MySQLObj.split("END"); document.getElementById("instrumentpix").innerHTML = output[1]; document.getElementById("instrumenttext").innerHTML = output[0]; } }requestObject.open("GET",url,true);requestObject.send(null);}</script>
![Page 156: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/156.jpg)
156
Lab: folk music – MySQL
Create ‘query.php’<?php
$id = $_GET['id'];
$host = "127.0.0.1";$username = “username";$password = “password";$database = "folkinstruments";$con = mysqli_connect($host, $username, $password, $database) or trigger_error(mysqli_error(),E_USER_ERROR);
$query = mysqli_query($con, "SELECT text, pix FROM instruments WHERE instrumentid = '$id'") or die("A MySQL query error has occurred.<br />Error number: ". mysql_errno() ."<br / >". mysql_error());$row = mysqli_fetch_assoc($query);
echo $row['text']."END".$row['pix'];
mysqli_free_result($query);mysqli_close($con);?>
![Page 157: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/157.jpg)
157
Lab: folk music – MySQL
Update the links Instruments:<br /> <a href="#" onclick="ajaxObject(3)">Baglama</a><br /> <a href="#" onclick="ajaxObject(1)">Darbuka</a><br /> <a href="#" onclick="ajaxObject(4)">Kabak Kemane</a><br /> <a href="#" onclick="ajaxObject(5)">Karadeniz Kemence</a><br /> <a href="#" onclick="ajaxObject(6)">Kaval</a><br /> <a href="#" onclick="ajaxObject(7)">Tar</a><br /> <a href="#" onclick="ajaxObject(2)">Ud</a><br /> <a href="#" onclick="ajaxObject(8)">Zurna</a><br />
![Page 158: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/158.jpg)
158
Lab: folk music – MySQL
Done! Update and view your site
![Page 159: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/159.jpg)
159
Assignment: your hobby
Make an Ajax site
Topic: your choice
One type of data (XML, JSON, MySQL)
At least 4 entries
![Page 160: Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.](https://reader036.fdocuments.net/reader036/viewer/2022062620/551a988d5503466b3a8b52d5/html5/thumbnails/160.jpg)
Web ProgrammingSE 480:
Week 10: Ajax Data SourcesCopyright © Steven W. Johnson
October 1, 2012