Post on 11-Jan-2016
Internet Applications
Spring 2008
Review
• Last week– MySQL– Questions?
This week
• Ajax• Wrap-up coverage for exercises• Class time to work on projects /
exercises
Ajax
• Application model diagram• Design considerations
– Graceful degradation– Application fragmentation– Usability
• Components– JavaScript– HTTP request object
JavaScript • Syntax
– Function() {};– /* comment */
• Variable and function declarations– var newvariable = value;– function functionName() {content;}
• Control Structures– If (variable == value) { do stuff; }– For (var i=0; i<10; i++) { do stuff;}
• object.method.value– document.write– document.getElementById(‘navigation’);
DOM JavaScript
• An approach to writing JavaScript that appends functions to elements of the HTML document
• Reference• http://www.w3schools.com/htmldom/default.asp
• getElementById• getElementsByTagName• parentNode• childNodes• nodeValue• firstChild• previousSibling
Ajax Basics
• Combination of JavaScript, browser functions, and data– Asynchronous JavaScript and XML
• Reproduces the GET/POST functionality of our forms
• Works with any data stream• Can only request data from originating
server
Ajax GET/POST
• GET– Retrieves a document from the server and
allows client side document processing• POST
– Sends a querystring to server and enables complex data retrieval
responseText, responseXML
• Two forms of from xmlHTTPRequest • responseText
– Returns any text (HTML, JSON, etc) which can be manipulated by JavaScript after processing
• responseXML– Returns XML data that can be manipulated
directly
Ajax Exercise
• Create a simple HTML page that contains no real content.
• Use a link to retrieve a document from the server and display it in our browser
• Skills– Utilizes Ajax GET method– Utilizes some DOM elements
• document.getElementById("bodymain");• details.innerHTML = request.responseText;
Ajax Function Framework
getSomething()
Initiate Connection
getHttpObject()
• Responsible for creating XMLHttpRequest
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
getSomething()
• Responsible for initiating a connection
function getSomething(file) {
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
displayResponse(request);
};
request.open("GET", file, true)
request.send(null);
}
}
getSomething()
Responsible for monitoring connectionfunction displayResponse(request) {
if (request.readyState == 4) {
if(request.status == 200 || request.status == 304) {
var details = document.getElementById("bodymain");
details.innerHTML = request.responseText;
} else {
alert(request.status);
}
}
}
A quick POST example
function updateFeed(file, query) {
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
displayResponse(request);
};
request.open ("POST", file, true);
request.setRequestHeader ("Content-Type",
"application/x-www-form-urlencoded");
request.send(query);
}
}
Element manipulation with DOM
• //Delete ElementselementToDelete = document.getElementById("bodymain");
parentElement = elementToDelete.parentNode;
parentElement.removeChild(elementToDelete);
• //Create a new body elementbodyElement = document.createElement("body");
bodyElement.setAttribute("id", "bodymain");
parentElement.appendChild(bodyElement);
• //Create a Text NodenewLink = document.createElement("a");
newLink.setAttribute("href", "#");
newLink.setAttribute("onclick", "getSomething('./htmlfragment.html')");
linkText = document.createTextNode("Get some content");
newLink.appendChild(linkText);
newBody.appendChild(newLink);
Putting it all together
• Part I– Create a basic HTML page– Download the HTML fragment– Create your JavaScript functions– Insert a link to initiate the Ajax Request
• Part II– Create a new JavaScript function that will
use the DOM– Modify the Ajax Request to include a ‘delete
content’ link
Skills needed for exercises 8 & 9
• Ex 8 – External PHP functions file• PHP require() function• File management
• Ex 9 – Javascript• Basics of JavaScript functions• DOM scripting
Skills needed for exercises 10 & 11
• Ex 10 – Login / Logoff functions• More on HTML forms & PHP• Writing and using Cookies
• Ex 11 - Ajax• Ajax components• Advanced JavaScript functions
Next week
• Final Projects due• Quick presentation of class projects (1-2
min per person)• Class wrap-up & evaluation
MySQL
• Open Source Relational Database• http://mysql.com• At SILS
– pearl.ils.unc.edu• Relational database features
• Tables, Indexes, Queries• SQL (Structured Query Language)
SQL Skills
• SQL – Structured query language– Uses a syntax with words like (select,
where, insert, delete, from) to create logical statements• Select column from tablename where limit =
‘value’;• Insert into table (column, column) values (value
1, value 2);
– A good reference• http://www.w3schools.com/sql/sql_quickref.asp
SQL Examples
• SELECT statements• SELECT * from feeds where username = 'mitcheet'", • SELECT * from feeds where id = ".$_REQUEST['feed']
• INSERT statements• INSERT INTO feeds (username, feedname, feedURL)
values ('".$_REQUEST['username']."', '".$_REQUEST['feedName']."', '".$_REQUEST['feedUrl']."')";
• DELETE statements• DELETE from feeds where id = ".$_REQUEST['feedId']
MySQL functions in PHP• Create a connection to the database
• $connection = mysql_connect($dbserver, $username, $pass);
• Select a database• mysql_select_db($database, $connection);
• Run a query• $result = mysql_query("SELECT * from feeds where username =
'mitcheet'", $connection);
• Get the results of the query as an array• while ($row = mysql_fetch_array($result, MYSQL_NUM)) {}
• Close the connection• mysql_close($connection);
MySQL Examplefunction showFeed () {
$connection = mysql_connect ("pearl.ils.unc.edu", "inls572_spring08",
"yreuq572");
mysql_select_db("inls572_spring08", $connection);
$result = mysql_query("SELECT * from feeds where id = ".$_REQUEST['feed'], $connection);
while ($row = mysql_fetch_array($result, MYSQL_NUM)){
echo $row[3];}
}