Understanding Ajax and JavaScript in Web Applications

1. Internet Applications Spring 2008

2. Review • Last week • MySQL • Questions?

3. This week • Ajax • Wrap-up coverage for exercises • Class time to work on projects / exercises

4. Ajax • Application model diagram • Design considerations • Graceful degradation • Application fragmentation • Usability • Components • JavaScript • HTTP request object

5. 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’);

6. 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

7. 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

8. 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

9. 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

10. 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;

11. Ajax Function Framework

12. getHttpObject() • Responsible for creating XMLHttpRequest function getHTTPObject() { varxhr = false; if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr= new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; }

13. 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); } }

14. getSomething() Responsible for monitoring connection function displayResponse(request) { if (request.readyState == 4) { if(request.status== 200 || request.status == 304) { vardetails = document.getElementById("bodymain"); details.innerHTML= request.responseText; } else { alert(request.status); } } }

15. 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); } }

16. Element manipulation with DOM • //Delete Elements elementToDelete= document.getElementById("bodymain"); parentElement = elementToDelete.parentNode; parentElement.removeChild(elementToDelete); • //Create a new body element bodyElement = document.createElement("body"); bodyElement.setAttribute("id", "bodymain"); parentElement.appendChild(bodyElement); • //Create a Text Node newLink = document.createElement("a"); newLink.setAttribute("href", "#"); newLink.setAttribute("onclick", "getSomething('./htmlfragment.html')"); linkText = document.createTextNode("Get some content"); newLink.appendChild(linkText); newBody.appendChild(newLink);

17. 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

18. 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

19. 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

20. Next week • Final Projects due • Quick presentation of class projects (1-2 min per person) • Class wrap-up & evaluation

21. MySQL • Open Source Relational Database • http://mysql.com • At SILS • pearl.ils.unc.edu • Relational database features • Tables, Indexes, Queries • SQL (Structured Query Language)

22. 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

23. 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']

24. 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);

25. MySQL Example function 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]; } }