Download presentation
Presentation is loading. Please wait.
1
SE 480: Client Side Scripting Languages Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2014
2
2 Ajax using XML, JSON, MySQL Overcoming Ajax weaknesses Introduction to JSON Week 10
3
3 Web 1.0 logic structure: HTML presentation locations Web 1.0: HTML is “star of the show” Web 1.0: uses ‘pages in a book’ paradigm All about page transmission using HTTP What is Ajax?
4
4 Web 2.0 Web 1.0 What is Ajax? Web 2.0: applications and ‘web-as-a-movie’ download an interface transmit data to update the page
5
5 What is Ajax? A new Separation of Concerns? Structure Presentation Logic Data
6
6 Many problems: any page-based idea no longer applies page navigation bookmarks ‘send me your URL’ search engines: dynamic content is ‘deep web’ security concerns (injecting content) JavaScript issues no graceful degradation What is Ajax?
7
7 Douglas Crockford, a big name in JavaScript Described JSON (2002) Part of ECMAScript, RFC 4627 (2006) JavaScript Object Notation (JSON)
8
8 Does have a logo Has a web site (json.org) Incorporated into ISO; standardized JavaScript Object Notation (JSON)
9
9 Data interchange (kavşak) format Serializes (sıralı) objects into strings, to be sent from server to client, keeps them in ‘objectness’ Serial: one bit or digit per cycle; one event Parallel: several bits per cycle; many events JavaScript Object Notation (JSON)
10
10 Basic form: uses name/value pairs Similar to XML, but no closing tags Easy access to data, human-readable JavaScript Object Notation (JSON) {“firstname”: “Canan”} firstname = “Canan”;
11
11 array = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]; 0123 00123 14567 2891011 0123 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];//9 array[1][3];//7 All data sources are like 2-dimensional arrays Table: records (rows) and fields columns JavaScript Object Notation (JSON)
![11 array = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]; [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];//9 array[1][3];//7 All data sources are like 2-dimensional arrays Table: records (rows) and fields columns JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_11.jpg "11 array = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]; [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];//9 array[1][3];//7 All data sources are like 2-dimensional arrays Table: records (rows) and fields columns JavaScript Object Notation (JSON)")
12
{“name”: “Ali”, “age”: 20, “bolum”: “MBBF” } 12 Many string values identified in same “record” Information defining one person/entity Strings in quotes; numbers not JavaScript Object Notation (JSON)
13
array = [[“Cem”, “Ali”, “Eda”],[18, 22, 24]]; { students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” } ] } 13 Arrays used to represent objects Curly brackets define entities Square brackets define entire source Quotes on text, numbers left alone JavaScript Object Notation (JSON)
![array = [[ Cem , Ali , Eda ],[18, 22, 24]]; { students = [ { name : Ali , age :20, bolum : MBBF }, { name : Bahar , age :21, bolum : ITF } ] } 13 Arrays used to represent objects Curly brackets define entities Square brackets define entire source Quotes on text, numbers left alone JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_13.jpg "array = [[ Cem , Ali , Eda ],[18, 22, 24]]; { students = [ { name : Ali , age :20, bolum : MBBF }, { name : Bahar , age :21, bolum : ITF } ] } 13 Arrays used to represent objects Curly brackets define entities Square brackets define entire source Quotes on text, numbers left alone JavaScript Object Notation (JSON)")
14
students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” } ]; 14 students = [ {“name”: “Ali”, “age”: 20, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: 21, “bolum”: “ITF” } ]; Students NameAgeBolumGender Ali20MBBFErkek Bahar21ITFHanim students[1].age //21 All three represent the same data; “records” Effectively a database table JavaScript Object Notation (JSON)
![students = [ { name : Ali , age :20, bolum : MBBF }, { name : Bahar , age :21, bolum : ITF } ]; 14 students = [ { name : Ali , age : 20, bolum : MBBF }, { name : Bahar , age : 21, bolum : ITF } ]; Students NameAgeBolumGender Ali20MBBFErkek Bahar21ITFHanim students[1].age //21 All three represent the same data; records Effectively a database table JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_14.jpg "students = [ { name : Ali , age :20, bolum : MBBF }, { name : Bahar , age :21, bolum : ITF } ]; 14 students = [ { name : Ali , age : 20, bolum : MBBF }, { name : Bahar , age : 21, bolum : ITF } ]; Students NameAgeBolumGender Ali20MBBFErkek Bahar21ITFHanim students[1].age //21 All three represent the same data; records Effectively a database table JavaScript Object Notation (JSON)")
15
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);//Peter document.write(company.managers[1].age);//23 An array of arrays or a database with 2 tables ‘Company’ is DB, tables ‘employees’, ‘managers’ JavaScript Object Notation (JSON)
![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);//Peter document.write(company.managers[1].age);//23 An array of arrays or a database with 2 tables ‘Company’ is DB, tables ‘employees’, ‘managers’ JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_15.jpg "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);//Peter document.write(company.managers[1].age);//23 An array of arrays or a database with 2 tables ‘Company’ is DB, tables ‘employees’, ‘managers’ JavaScript Object Notation (JSON)")
16
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”; Updating table values JavaScript Object Notation (JSON)
![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 ; Updating table values JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_16.jpg "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 ; Updating table values JavaScript Object Notation (JSON)")
17
17 indx = 1; JSONObj = JSON.parse(xmlhttp.responseText); document.getElementById(“a”).innerHTML = JSONObj[indx].first;//Anna document.getElementById(“b”).innerHTML = JSONObj[indx].last;//Smith [ {"first":"John", "last":"Doe", "age":18}, {"first":"Anna", "last":"Smith", "age":20}, {"first":"Peter", "last":"Jones“, "age":21} ] JSON.parse converts objects into strings Native (dahil) in browsers since IE 8 JavaScript Object Notation (JSON)
![17 indx = 1; JSONObj = JSON.parse(xmlhttp.responseText); document.getElementById( a ).innerHTML = JSONObj[indx].first;//Anna document.getElementById( b ).innerHTML = JSONObj[indx].last;//Smith [ { first : John , last : Doe , age :18}, { first : Anna , last : Smith , age :20}, { first : Peter , last : Jones , age :21} ] JSON.parse converts objects into strings Native (dahil) in browsers since IE 8 JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_17.jpg "17 indx = 1; JSONObj = JSON.parse(xmlhttp.responseText); document.getElementById( a ).innerHTML = JSONObj[indx].first;//Anna document.getElementById( b ).innerHTML = JSONObj[indx].last;//Smith [ { first : John , last : Doe , age :18}, { first : Anna , last : Smith , age :20}, { first : Peter , last : Jones , age :21} ] JSON.parse converts objects into strings Native (dahil) in browsers since IE 8 JavaScript Object Notation (JSON)")
18
XML: XMLObj = xmlhttp.responseXML; JSON: JSONObj = JSON.parse(xmlhttp.responseText); 18 Similar to XML except: Both are read from ‘inside’ Ajax Different in: XML uses ‘getElementsByTagName’ JSON uses JSON.parse() JavaScript Object Notation (JSON)
19
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; 19 ‘JSON.parse’ method exposes data to Ajax JavaScript Object Notation (JSON)
![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; 19 ‘JSON.parse’ method exposes data to Ajax JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_19.jpg "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; 19 ‘JSON.parse’ method exposes data to Ajax JavaScript Object Notation (JSON)")
20
20 data.txt data.json.json and.txt are both text file formats File holds an object/array (data source) Ajax calls object and extracts data JavaScript Object Notation (JSON)
21
21 page.html array = [] json.txt data.json Concept: JSON data source on server Call server with address in array/database Update page without refreshing entire page JavaScript Object Notation (JSON)
![21 page.html array = [] json.txt data.json Concept: JSON data source on server Call server with address in array/database Update page without refreshing entire page JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_21.jpg "21 page.html array = [] json.txt data.json Concept: JSON data source on server Call server with address in array/database Update page without refreshing entire page JavaScript Object Notation (JSON)")
22
22 “students”= [ {“name”: “Ali”, “age”: “20”, “bolum”: “MBBF”, “gender”: “Erkek” }, {“name”: “Bahar”, “age”: “21”, “bolum”: “ITF”, “gender”: “Hanim” } ] Ali 20 MBBF Erkek Bahar 21 ITF Hanim JSON vs. XML: JavaScript Object Notation (JSON)
![22 students = [ { name : Ali , age : 20 , bolum : MBBF , gender : Erkek }, { name : Bahar , age : 21 , bolum : ITF , gender : Hanim } ] Ali 20 MBBF Erkek Bahar 21 ITF Hanim JSON vs.](http://images.slideplayer.com/10/2805824/slides/slide_22.jpg "XML: JavaScript Object Notation (JSON).")
23
23 Steve “name”: “Steve”, JSON vs. 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 JavaScript Object Notation (JSON)
24
24 Advantages to JSON: 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) JavaScript Object Notation (JSON)
25
25 Disadvantages to JSON: 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 XML is more precise tool (has its own DTD) XML has better support (libraries, etc) JavaScript Object Notation (JSON)
26
26 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 x-dimensional array saved as ‘employees’ objname[i].fieldname JavaScript Object Notation (JSON)
![26 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 x-dimensional array saved as ‘employees’ objname[i].fieldname JavaScript Object Notation (JSON)](http://images.slideplayer.com/10/2805824/slides/slide_26.jpg "26 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 x-dimensional array saved as ‘employees’ objname[i].fieldname JavaScript Object Notation (JSON)")
27
27 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 x-dimensional array saved as ‘employees’ Create JSON data source TV stars or singers Use JavaScript to ‘document.write’ out data Lab: JSON
![27 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 x-dimensional array saved as ‘employees’ Create JSON data source TV stars or singers Use JavaScript to ‘document.write’ out data Lab: JSON](http://images.slideplayer.com/10/2805824/slides/slide_27.jpg "27 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 x-dimensional array saved as ‘employees’ Create JSON data source TV stars or singers Use JavaScript to ‘document.write’ out data Lab: JSON")
28
Break
29
29 Ali {“name”:“Ali”} Name Ali Arguably hardest part of labs/assignment Data formats have same idea: ‘field name’ ‘data’ Lab: JSON
30
30 Ali {“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+ ‘”}’ Utilities do exist to transfer data Can manually convert using a language Data formats
31
31 Ali {“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+ ‘”}’ Utilities do exist to transfer data Can manually convert using a language Lab: conversion
32
32 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’ Lab: harika harran’s
33
33 Beginning interface: Lab: harika harran’s
34
34 Move to 12 and do with jQuery? Lab: harika harran’s
35
35 Make the database: registerdb 3 tables: register data (mix user and pass) area code city code Lab: harika harran’s
36
36 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) Lab: harika harran’s
37
37 Make the database: registerdb Create table ‘areacodes’ with 2 fields: codeId (int, 5, primary, auto-increment) areacode (varchar, 4, unique) Lab: harika harran’s
38
38 Make the database: registerdb Create table ‘officecodes’ with 3 fields: officeId (int, 5, primary, auto-increment) codeId (int, 5) officecode (int, 3, unique) Lab: harika harran’s
39
39 Insert data into your database INSERT INTO `users` VALUES(1, 'alib', 'denizyuz', 'Balikcioglu', 'Ali', '02325551234', 'alib@gmail.com', '2012-01-16 09:14:32'); INSERT INTO `users` VALUES(2, 'selmac', 'jogger', 'Canli', 'Selma', '05324029876', 'fastrunner@ttt.net', '2012-01-17 21:32:12'); INSERT INTO `users` VALUES(3, 'Painterbey', 'pigments', 'VanGogh', 'Ernest', '05324558525', 'acrylics@ttnet.com', '2012-01-19 14:42:05'); INSERT INTO `users` VALUES(4, 'Musichanim', 'cmajor', 'Kocakeskin', 'Erdinc', '08756512785', 'fugue@ttonline.net', '2012-01-23 17:51:47'); INSERT INTO `users` VALUES(5, 'futbol4ever', 'futbolpitch', 'Sehirbey', 'Pele', '04954286751', 'Futbol77@izmirekonomi.tr', '2012-01-24 08:06:19'); INSERT INTO `users` VALUES(6, 'fenerrules', 'roberto', 'Buyukbey', 'Bahar', '09452331425', 'Baharfutbol@ttnet.com', '2012-01-24 09:37:12'); INSERT INTO `users` VALUES(7, 'knitter', 'needleyarn', 'Ross', 'Benjamin', '09427254392', 'flagmaker@izmirnet.com', '2012-01-26 09:14:37'); INSERT INTO `users` VALUES(8, 'ieustudent', 'balcova', 'Einstein', 'Robert', '06427356284', 'smartrobert@ttonline.net', '2012-01-27 22:12:12'); INSERT INTO `users` VALUES(9, 'kskrules', 'johann', 'Rooney', 'Mehmet', '08436184287', 'mehmetgol@ttnet.com', '2012-01-27 23:06:41'); INSERT INTO `users` VALUES(10, 'sedasinger', 'mavigoz', 'Seviyorum', 'Ilkgenc', '04852579561', 'ilkgenc44@yahoo.com', '2012-02-01 11:42:15'); INSERT INTO `users` VALUES(11, 'asksong', 'forever', 'Yildizgoz', 'Gunus', '05134798561', 'yildiz444@hotmail.com', '2012-02-03 13:17:47'); INSERT INTO `users` VALUES(12, 'tenderheart', 'poemreader', 'Frost', 'Emily', '05524354189', 'poetcorner@ttonline.com', '2012-02-03 16:39:52); Lab: harika harran’s
40
40 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); Drags on performance: Lab: harika harran’s
41
41 Open register folder, register.php: Form built, table started Lab: harika harran’s
42
42 25 pixels wide Make the form (tab at end of row to make new row) Lab: harika harran’s
43
43 Use these ids, give each the same name: box Lab: harika harran’s
44
44 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" Add these ids, classes Lab: harika harran’s
45
45 Use ‘.innerHTML’ to announce errors: 3 rd column gets ‘red x’ 4 th column describes error When fixed, both error messages turn off Lab: harika harran’s
46
46 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 Lab: harika harran’s
47
47 Username: 6 to 12 characters (letters/numbers) Password: 6 to 12 characters (letters/numbers) Password == Verify password Lab: harika harran’s
48
48 Telephone: NAPN 11 digits 1: ==0 2: != 1 5: !=1 Area code in table Office code must match Disadvantages of Ajax
49
49 023205320287 254508841 274400305 337387261 City code and area code must ‘match’ Disadvantages of Ajax
50
50 Email prefix: 1 st, last chars cannot be “.” 6 to 15 chars cannot have 2 noktas in a row @ 3-12 char total 1 st 3 chars cannot be nokta ends with:.net,.org,.com,.edu,.tr Disadvantages of Ajax
51
51 for( ) { flag[i] = 0; } How about the ‘submit’ button? Lab: harika harran’s
![51 for( ) { flag[i] = 0; } How about the ‘submit’ button Lab: harika harran’s](http://images.slideplayer.com/10/2805824/slides/slide_51.jpg "51 for( ) { flag[i] = 0; } How about the ‘submit’ button Lab: harika harran’s")
52
52 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 } Lab: harika harran’s
53
53 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() } Lab: harika harran’s
54
54 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(); } “error routine”: insert red “X” and error text (vary) reset focus, selection Lab: harika harran’s
55
55 function submitbutton() { document.getElementById("Submit").disabled=false; for (i=0; i<7; i++) { if(flag[i]==0) { document.getElementById("Submit").disabled=true; break; } Setting the submit button Lab: harika harran’s
![55 function submitbutton() { document.getElementById( Submit ).disabled=false; for (i=0; i<7; i++) { if(flag[i]==0) { document.getElementById( Submit ).disabled=true; break; } Setting the submit button Lab: harika harran’s](http://images.slideplayer.com/10/2805824/slides/slide_55.jpg "55 function submitbutton() { document.getElementById( Submit ).disabled=false; for (i=0; i<7; i++) { if(flag[i]==0) { document.getElementById( Submit ).disabled=true; break; } Setting the submit button Lab: harika harran’s")
56
56 window.onload = initPage; //scripts for register.php function initPage() { document.getElementById(“username”).focus(); document.getElementById(“Submit”).disabled = true; } Create.js file: scripts.js Save files, test Lab: harika harran’s
57
57 <!--.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; } --> Create embedded styles: Lab: harika harran’s
58
58 flag=[]; flag[0] = 0; flag[1] = 0; flag[2] = 0; flag[3] = 0; flag[4] = 0; flag[5] = 0; flag[6] = 0; Initialize the flags (for validation): Lab: harika harran’s
![58 flag=[]; flag[0] = 0; flag[1] = 0; flag[2] = 0; flag[3] = 0; flag[4] = 0; flag[5] = 0; flag[6] = 0; Initialize the flags (for validation): Lab: harika harran’s](http://images.slideplayer.com/10/2805824/slides/slide_58.jpg "58 flag=[]; flag[0] = 0; flag[1] = 0; flag[2] = 0; flag[3] = 0; flag[4] = 0; flag[5] = 0; flag[6] = 0; Initialize the flags (for validation): Lab: harika harran’s")
59
59 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", " ", box); } if(value.length 12) errorentry("Username is wrong length", " ", box); if(data) errorentry("Illegal characters", " ", box); flag[0]=0; } Drags on performance: Disadvantages of Ajax
![59 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 , , box); } if(value.length 12) errorentry( Username is wrong length , , box); if(data) errorentry( Illegal characters , , box); flag[0]=0; } Drags on performance: Disadvantages of Ajax](http://images.slideplayer.com/10/2805824/slides/slide_59.jpg "59 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 , , box); } if(value.length 12) errorentry( Username is wrong length , , box); if(data) errorentry( Illegal characters , , box); flag[0]=0; } Drags on performance: Disadvantages of Ajax")
60
60 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 12) errorentry("Password is wrong length", " ", box); if(data) errorentry("Illegal characters", " ", box); flag[1]=0; } Drags on performance: Disadvantages of Ajax
![60 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 12) errorentry( Password is wrong length , , box); if(data) errorentry( Illegal characters , , box); flag[1]=0; } Drags on performance: Disadvantages of Ajax](http://images.slideplayer.com/10/2805824/slides/slide_60.jpg "60 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 12) errorentry( Password is wrong length , , box); if(data) errorentry( Illegal characters , , box); flag[1]=0; } Drags on performance: Disadvantages of Ajax")
61
61 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", " ", box); flag[2]=0; }
![61 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 , , box); flag[2]=0; }](http://images.slideplayer.com/10/2805824/slides/slide_61.jpg "61 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 , , box); flag[2]=0; }")
62
62 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", " ", box); if(data) errorentry("Illegal characters in last name", " ", box); flag[3]=0; }
![62 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 , , box); if(data) errorentry( Illegal characters in last name , , box); flag[3]=0; }](http://images.slideplayer.com/10/2805824/slides/slide_62.jpg "62 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 , , box); if(data) errorentry( Illegal characters in last name , , box); flag[3]=0; }")
63
63 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", " ", box); if(data) errorentry("Illegal characters in first name", " ", box); flag[4]=0; }
![63 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 , , box); if(data) errorentry( Illegal characters in first name , , box); flag[4]=0; }](http://images.slideplayer.com/10/2805824/slides/slide_63.jpg "63 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 , , box); if(data) errorentry( Illegal characters in first name , , box); flag[4]=0; }")
64
64 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", " ", box); } else { errorentry("Phone number invalid", " ", box); flag[5]=0; }
![64 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 , , box); } else { errorentry( Phone number invalid , , box); flag[5]=0; }](http://images.slideplayer.com/10/2805824/slides/slide_64.jpg "64 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 , , box); } else { errorentry( Phone number invalid , , box); flag[5]=0; }")
65
65 Username: //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()." ". 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 } ?>
![65 Username: //registerquery.php < php if ($_GET[ username ]) { $username = $_GET[ username ]; $query = mysqli_query($con, SELECT userId FROM users WHERE username = $username ) or die( Error number: .](http://images.slideplayer.com/10/2805824/slides/slide_65.jpg "mysql_errno(). . 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 } >.")
66
66 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); ?>
67
67 Username: //scripts at top of register.php <?php if (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); } ?>
![67 Username: //scripts at top of register.php < php if (isset($_POST[ Submit ])) { $salt = This is the salt ; $username = $_POST[ username ]; $password = $_POST[ password ]; $lastname = $_POST[ lastname ]; $firstname = $_POST[ firstname ]; $telephone = $_POST[ telephone ]; $ = $_POST[ ]; $password = sha1($salt.$password);//crypt() $lastname = strtoupper($lastname); $query = INSERT INTO users (username, password, lastname, firstname, telephone, ) VALUES ( $username , $password , $lastname , $firstname , $telephone , $ ) ; mysqli_query($con, $query) or die( Failed Query of .](http://images.slideplayer.com/10/2805824/slides/slide_67.jpg "$query); header( location: thanks.html ); mysqli_close($con); } >.")
68
Quiz: 1. What is the address of the value 24? 68 121617 5812 3246 [2, 1]
![Quiz: 1. What is the address of the value [2, 1]](http://images.slideplayer.com/10/2805824/slides/slide_68.jpg "Quiz: 1. What is the address of the value [2, 1]")
69
Quiz: 2. Place this array in the table: 69 1 23 456 789 [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
![Quiz: 2. Place this array in the table: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]](http://images.slideplayer.com/10/2805824/slides/slide_69.jpg "Quiz: 2. Place this array in the table: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]")
70
Quiz: 3. What XML tag is most like a record? 70 data data data
71
Quiz: 4. From, the address of ? 5. Child nodes of 6. What is the root node? 71 [0].childNodes[0] 11 22 33 0
72
Quiz: 7. Children of ? 8. Value of [0].childNodes[1].childNodes[0].nodeValue 72 1 11 22 33 22
![Quiz: 7. Children of 8. Value of [0].childNodes[1].childNodes[0].nodeValue](http://images.slideplayer.com/10/2805824/slides/slide_72.jpg "Quiz: 7. Children of 8. Value of [0].childNodes[1].childNodes[0].nodeValue")
73
Quiz: 9. JSON array of 3 names: 73 friends = [ {“name”:”Ali”, “name”:”Bahar”, “name”:”Canan”} ];
![Quiz: 9. JSON array of 3 names: 73 friends = [ { name : Ali , name : Bahar , name : Canan } ];](http://images.slideplayer.com/10/2805824/slides/slide_73.jpg "Quiz: 9. JSON array of 3 names: 73 friends = [ { name : Ali , name : Bahar , name : Canan } ];")
74
Quiz: 10. What is the value of company.employees[1].age? 74 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
![Quiz: 10. What is the value of company.employees[1].age.](http://images.slideplayer.com/10/2805824/slides/slide_74.jpg "74 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.")
75
SE 480: Client Side Scripting Languages Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2014
76
76 Labs: Register (validate, check user table) Folk music: DHTML XML JSON Assignment: Your hobby Lab: folk music
77
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 Drags on performance: Disadvantages of Ajax
78
78 Make Web 2.0 application using Ajax Labs: folk music
79
79 Make Web 2.0 application using: No-jax (DHTML) 3 Ajax alternatives: XML JSON MySQL Use ‘highly-borrowed’ Turkish Folk Music site Labs: folk music
80
80 page.html Our choices. Which is best? Labs: folk music
81
81 Process is same regardless of data source store and maintain the data* build and maintain the site* access the data identify the required record insert values to layers Lab: folk music
82
82 DHTML data: Lab: folk music function kemanedisplay() { document.getElementById("text").innerHTML = " The kabak kemane (gourd fiddle) is commonly used in the Aegean region of Turkey. It is the present evolution of the old iklig. Traditionally made from a water gourd, the body can be constructed of wood as well. The bow is strung with either horsehair or monofilament. "; document.getElementById("pix").innerHTML = "<img src='images/kemane.png' width='185' height='250' alt='Kemane' title='Kemane'>"; }
83
83 ud text images/ud.png tar text images/tar.png kaval text images/kaval.png Fields Record Table XML data: Lab: folk music
84
84 [ { “text”:“ud text”, “pix”:“images/ud.png” }, { “text”:“tar text”, “pix”:“images/tar.png" }, { “text”:“kaval text”, “pix”:“images/kaval.png” } ] Field name value Record Table JSON data: Lab: folk music
![84 [ { text : ud text , pix : images/ud.png }, { text : tar text , pix : images/tar.png }, { text : kaval text , pix : images/kaval.png } ] Field name value Record Table JSON data: Lab: folk music](http://images.slideplayer.com/10/2805824/slides/slide_84.jpg "84 [ { text : ud text , pix : images/ud.png }, { text : tar text , pix : images/tar.png }, { text : kaval text , pix : images/kaval.png } ] Field name value Record Table JSON data: Lab: folk music")
85
85 MySQL data: Lab: folk music
86
86 page.html Ways to do DHTML: ‘show/hide’ layers based on ‘click’ event ‘.innerHTML’ values based on ‘click’ Hardest to update/modify? Lab: folk music - DHTML
87
87 Difference: seven sections with content for layers seven functions with content for one-section Lab: folk music – DHTML layers
88
88 Start with ‘insert data from functions’ option Pix of process: 3 layers across bottom Lab: folk music - DHTML picturetext
89
89 Each link inserts unique data to same place Use event listeners to select function used ID the links: Lab: folk music - DHTML Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna
90
ud.addEventListener(‘click’, uddisplay, false); baglama.addEventListener(‘click’, baglamadisplay, false); darbaka.addEventListener(‘click’, darbakadisplay, false); kemane.addEventListener(‘click’, kemanedisplay, false); kemence.addEventListener(‘click’, kemencedisplay, false); kaval.addEventListener(‘click’, kavaldisplay, false); tar.addEventListener(‘click’, tardisplay, false); zurna.addEventListener(‘click’, zurnadisplay, false); 90 Functions are written in ‘dhtml.js’ You need to add event listeners Lab: folk music - DHTML function kemanedisplay() { document.getElementById("text").innerHTML = " The kabak kemane (gourd fiddle) is commonly used in the Aegean region of Turkey. It is the present evolution of the old iklig. Traditionally made from a water gourd, the body can be constructed of wood as well. The bow is strung with either horsehair or monofilament. "; document.getElementById("pix").innerHTML = "<img src='images/kemane.png' width='185' height='250' alt='Kemane' title='Kemane'>"; }
91
91 Done. Save your work and view in browser Lab: folk music - DHTML
92
92 Open ‘folk’ and ‘dhtmllayers.html’ Application made up of 6 sections (layers) image and text in same layer uses ‘innerHTML’ Lab: folk music - DHTML
93
93 One section for each instrument instead of a general ‘pix’ and ‘text’ section Use listeners to select the section Basic page code/style sheet the same Lab: folk music – DHTML layers
94
94 Each section needs: Individual identification (id) Group identification (class) Links needs to have: id (for event listener: layer0-7) name (unique identifier for instrument: 0-7) “inst”+name = id for section Lab: folk music - DHTML “inst0-7” “instrument”
95
95 Stylesheet is ready to go Instead of #text and #pic; use.instrument Lab: folk music - DHTML
96
96 Fix ‘dhtmllayers.html’: Add id, name to the links (identify instrument) Lab: folk music - DHTML Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna
97
97 Fix ‘dhtmllayers.html’: Add id, class to each section with instrument Lab: folk music - DHTML //baglama //darbaku //kemane //kemence //kaval //tar //ud //zurna
98
98 Fix ‘dhtmllayers.html’: create include at bottom of page for listeners Lab: folk music - DHTML
99
99 Create ‘dhtmllisteners.js’ Add the event listeners at top Lab: folk music - DHTML layer0.addEventListener(‘click’, instdisplay, false); layer1.addEventListener(‘click’, instdisplay, false); layer2.addEventListener(‘click’, instdisplay, false); layer3.addEventListener(‘click’, instdisplay, false); layer4.addEventListener(‘click’, instdisplay, false); layer5.addEventListener(‘click', instdisplay, false); layer6.addEventListener(‘click’, instdisplay, false); layer7.addEventListener(‘click’, instdisplay, false);
100
100 Add ‘instdisplay’ function: pass in name (0-7); count the sections close all sections first open the desired section last Lab: folk music - DHTML function instdisplay() { number = this.name; quantity = document.getElementsByClassName("instrument"); long = quantity.length; for (i=0; i<long; i++) { document.getElementById(“inst”+i).style.display = "none"; } document.getElementById(“inst”+number).style.display = "block"; }
101
101 Done! Save your work and view Lab: folk music - DHTML
102
102 page.html XMLHttpRequest kaval <img src…> A Kaval… pix = <img src=… text = “A Kaval… Pull in XML file Find record we want to see Display it Lab: folk music - XML
103
103 Data store in tag hierarchy; use DOM to find Call in ‘text’ and ‘pix’ for display (collection of 8) Lab: folk music - XML 1 Darbuka <p>A darbuka is … basic rhythm. </p> <img src=“images/darbuka.png” width=“233”>
104
104 Cannot use ‘ ’; instead use < and > No need to escape quotes or apostrophes Easier to prepare data than JSON Lab: folk music - XML 1 Darbuka <p>A darbuka is … basic rhythm. </p> <img src=“images/darbuka.png” width=“233”>
105
105 Open xml.html (exactly like DHTML version) Use the same style sheet Add include for request object (test connection??) Create ‘xmldata.js’ in ‘data’ folder Add include for ‘xmldata.js’ file (text connection??) Lab: folk music - XML
106
106 Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna Place ‘id’ on links to identify instrument Pass index value; use ‘name’ for that Save the page Lab: folk music - XML
107
107 baglama.addEventListener('click', ajax, false); darbuka.addEventListener('click', ajax, false); kemane.addEventListener('click', ajax, false); kemence.addEventListener('click', ajax, false); kaval.addEventListener('click', ajax, false); tar.addEventListener('click', ajax, false); ud.addEventListener('click', ajax, false); zurna.addEventListener('click', ajax, false); Open ‘xmldata.js’. To do: add event listeners write your function call in the XML object and save to a variable parse it into little pieces Lab: folk music - XML
108
108 function ajax() { document.getElementById("text").innerHTML = ""; document.getElementById("pix").innerHTML = ""; inst = this.name; The function: clear out old data (not absolutely required…) get the name (determine the XML index) test readyState and status read in the XML object and parse Lab: folk music - XML
109
109 function ajax() { xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { … } xmlhttp.open("GET", "data/xmldata.xml", true); xmlhttp.send(null); } The function: test readyState and status read in the XML object and parse Lab: folk music - XML
110
110 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { XMLObj = xmlhttp.responseXML; replytext = XMLObj.getElementsByTagName("text"); replypix = XMLObj.getElementsByTagName("pix"); document.getElementById("text").innerHTML = replytext[inst].childNodes[0].nodeValue; document.getElementById("pix").innerHTML = replypix[inst].childNodes[0].nodeValue; } xmlhttp.open("GET", "data/xmldata.xml", true); xmlhttp.send(null); } The function: read in the XML object and parse Lab: folk music - XML
![110 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { XMLObj = xmlhttp.responseXML; replytext = XMLObj.getElementsByTagName( text ); replypix = XMLObj.getElementsByTagName( pix ); document.getElementById( text ).innerHTML = replytext[inst].childNodes[0].nodeValue; document.getElementById( pix ).innerHTML = replypix[inst].childNodes[0].nodeValue; } xmlhttp.open( GET , data/xmldata.xml , true); xmlhttp.send(null); } The function: read in the XML object and parse Lab: folk music - XML](http://images.slideplayer.com/10/2805824/slides/slide_110.jpg "110 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { XMLObj = xmlhttp.responseXML; replytext = XMLObj.getElementsByTagName( text ); replypix = XMLObj.getElementsByTagName( pix ); document.getElementById( text ).innerHTML = replytext[inst].childNodes[0].nodeValue; document.getElementById( pix ).innerHTML = replypix[inst].childNodes[0].nodeValue; } xmlhttp.open( GET , data/xmldata.xml , true); xmlhttp.send(null); } The function: read in the XML object and parse Lab: folk music - XML")
111
111 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { XMLObj = xmlhttp.responseXML; replytext = XMLObj.getElementsByTagName("text"); replypix = XMLObj.getElementsByTagName("pix"); document.getElementById("text").innerHTML = replytext[inst].childNodes[0].nodeValue; document.getElementById("pix").innerHTML = replypix[inst].childNodes[0].nodeValue; } xmlhttp.open("GET", "data/xmldata.xml", true); xmlhttp.send(null); } Done! Save page and view in browser: http://localhost/folk/xml.html Lab: folk music - XML
![111 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { XMLObj = xmlhttp.responseXML; replytext = XMLObj.getElementsByTagName( text ); replypix = XMLObj.getElementsByTagName( pix ); document.getElementById( text ).innerHTML = replytext[inst].childNodes[0].nodeValue; document.getElementById( pix ).innerHTML = replypix[inst].childNodes[0].nodeValue; } xmlhttp.open( GET , data/xmldata.xml , true); xmlhttp.send(null); } Done.](http://images.slideplayer.com/10/2805824/slides/slide_111.jpg "Save page and view in browser: Lab: folk music - XML.")
112
112 {xxxxx, yyyyyy} JSON uses any file that holds text (.js,.txt,.json, etc.) Process is very similar to XML system Lab: folk music - JSON page.html XMLHttpRequest
113
113 [ {"id":“0", "text":" The bağlama … ", "pix":" " }, {"id":"1", "text":" A darbuka … ", "pix":" " }, {"id":“2", "text":" The kabak kemane … ", "pix":" " }, {"id":“3", "text":" The Karadeniz …. ”, "pix":" " }, {"id":“4", "text":" The kaval …, pix:”img src= … title="Kaval" />" }, {"id":“5", "text":" The tar … ", "pix":" " }, {"id":“6", "text":" The ud … ", "pix":" " }, {"id":“7", "text":" The Zurna … ”, pix:" " } ] Issue: connect to data; find correct ‘record’ ‘Records’ identified by array counter File modified for use by ‘JSON.parse’ method Lab: folk music - JSON
114
114 To do on json.html: include request object include.js file for script build id and name for links Lab: folk music - JSON
115
115 Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna To do on json.html: include request object include.js file for script build id and name for links Lab: folk music - JSON
116
116 Create ‘jsondata.js’ and save to ‘data’ folder: add event listeners write our json function: clear the page get the name (instrument index) call in the json data parse the data display the data Lab: folk music - JSON
117
117 Create ‘jsondata.js’ and save to ‘data’ folder: add event listeners Lab: folk music - JSON baglama.addEventListener('click', json, false); darbuka.addEventListener('click', json, false); kemane.addEventListener('click', json, false); kemence.addEventListener('click', json, false); kaval.addEventListener('click', json, false); tar.addEventListener('click', json, false); ud.addEventListener('click', json, false); zurna.addEventListener('click', json, false);
118
118 JSON function: Lab: folk music - JSON function json() { document.getElementById(“text”).innerHTML = ""; document.getElementById(“pix”).innerHTML = ""; inst = this.name; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { JSONObj = JSON.parse(xmlhttp.responseText); document.getElementById(“text”).innerHTML = JSONObj[inst].text; document.getElementById(“pix”).innerHTML = JSONObj[inst].pix; } xmlhttp.open(“GET”, “data/jsondata.json”, true); xmlhttp.send(null); }
![118 JSON function: Lab: folk music - JSON function json() { document.getElementById( text ).innerHTML = ; document.getElementById( pix ).innerHTML = ; inst = this.name; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { JSONObj = JSON.parse(xmlhttp.responseText); document.getElementById( text ).innerHTML = JSONObj[inst].text; document.getElementById( pix ).innerHTML = JSONObj[inst].pix; } xmlhttp.open( GET , data/jsondata.json , true); xmlhttp.send(null); }](http://images.slideplayer.com/10/2805824/slides/slide_118.jpg "118 JSON function: Lab: folk music - JSON function json() { document.getElementById( text ).innerHTML = ; document.getElementById( pix ).innerHTML = ; inst = this.name; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { JSONObj = JSON.parse(xmlhttp.responseText); document.getElementById( text ).innerHTML = JSONObj[inst].text; document.getElementById( pix ).innerHTML = JSONObj[inst].pix; } xmlhttp.open( GET , data/jsondata.json , true); xmlhttp.send(null); }")
119
119 Done! Save page and view in browser: Lab: folk music - JSON
120
120 MySQL: PHP used as interface Query written in PHP to get data from table Query is recordset for one record: our index Lab: folk music - MySQL page.html XMLHttpRequest access.html
121
Pass parameter (based on link) from Ajax to PHP PHP uses parameter to define recordset Recordset sent to HTML, split into “pix”, “text” Data entered into sections Lab: folk music - MySQL mysql.php
122
122 Turn on web server Open http://localhost/apanel/phpmyadmin Click on ‘Databases’ tab Create database (in textbox) ‘folk’ (“Create”) Select ‘folk’ database (left window) Click on “SQL” tab Insert text ‘mysqldata.txt’ into window (“Go”) Lab: folk music - MySQL
123
123 To do on json.html: include request object include.js file for script Lab: folk music - MySQL
124
124 Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna To do on json.html: build id and name for links: id is used for the event listener ‘name’ matches instrument ID in database Lab: folk music - MySQL
125
125 Create ‘mysqldata.js’ and save to ‘data’ folder: add event listeners write our mysql function: clear the page get the name (instrument index) send the index to the database on return, split data display data in sections Lab: folk music - MySQL
126
126 Create ‘jsondata.js’ and save to ‘data’ folder: add event listeners Lab: folk music - MySQL baglama.addEventListener(‘click’, mysql, false); darbuka.addEventListener(‘click’, mysql, false); kemane.addEventListener(‘click’, mysql, false); kemence.addEventListener(‘click’, mysql, false); kaval.addEventListener(‘click’, mysql, false); tar.addEventListener(‘click’, mysql, false); ud.addEventListener(‘click’, mysql, false); zurna.addEventListener(‘click’, mysql, false);
127
127 mysql function: Lab: folk music - MySQL function mysql() { document.getElementById(‘text”).innerHTML = ""; document.getElementById(“pix”).innerHTML = ""; inst = this.name; url = “query.php?inst=” +inst; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var MySQLObj = xmlhttp.responseText; output = MySQLObj.split(“END”); document.getElementById(“pix”).innerHTML = output[1]; document.getElementById(“text”).innerHTML = output[0]; } } xmlhttp.open(“GET”, url, true); xmlhttp.send(null); }
![127 mysql function: Lab: folk music - MySQL function mysql() { document.getElementById(‘text ).innerHTML = ; document.getElementById( pix ).innerHTML = ; inst = this.name; url = query.php inst= +inst; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var MySQLObj = xmlhttp.responseText; output = MySQLObj.split( END ); document.getElementById( pix ).innerHTML = output[1]; document.getElementById( text ).innerHTML = output[0]; } } xmlhttp.open( GET , url, true); xmlhttp.send(null); }](http://images.slideplayer.com/10/2805824/slides/slide_127.jpg "127 mysql function: Lab: folk music - MySQL function mysql() { document.getElementById(‘text ).innerHTML = ; document.getElementById( pix ).innerHTML = ; inst = this.name; url = query.php inst= +inst; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var MySQLObj = xmlhttp.responseText; output = MySQLObj.split( END ); document.getElementById( pix ).innerHTML = output[1]; document.getElementById( text ).innerHTML = output[0]; } } xmlhttp.open( GET , url, true); xmlhttp.send(null); }")
128
128 Query steps on ‘query.php’: find the correct recordset put ‘text’ and ‘pix’ strings into single string such that: ‘text’END‘pix’ return that string to ‘mysql.html’ Lab: folk music - MySQL
129
129 <?php $id = $_GET['inst']; $host = "127.0.0.1"; $username = "username";//fix this $password = "password";//fix this $database = "folk"; $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. Error number: ". mysql_errno()." ". mysql_error()); $row = mysqli_fetch_assoc($query); echo $row['text']."END".$row['pix']; mysqli_free_result($query); mysqli_close($con); ?> Open ‘query.php’ in ‘folk’ folder (ready) Lab: folk music - MySQL
![129 < php $id = $_GET[ inst ]; $host = ; $username = username ;//fix this $password = password ;//fix this $database = folk ; $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.](http://images.slideplayer.com/10/2805824/slides/slide_129.jpg "Error number: . mysql_errno(). . mysql_error()); $row = mysqli_fetch_assoc($query); echo $row[ text ]. END .$row[ pix ]; mysqli_free_result($query); mysqli_close($con); > Open ‘query.php’ in ‘folk’ folder (ready) Lab: folk music - MySQL.")
130
130 Done! Save files to web server and test: http://localhost/folk/mysql.html Lab: folk music - MySQL
131
Break
132
132 Make an Ajax site, may NOT use DHTML Topic: your choice One type of data (XML, JSON, MySQL) At least 4 entries Make your own web page (NOT mine) Assignment: your hobby
133
SE 480: Client Side Scripting Languages Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2014
Similar presentations
