1. SYST 28043 Web Technologies SYST 28043 Web Technologies AJAX

2. Javascript Review Quick review of some Javascript: document.getElementById(string) Retrieves an object corresponding to the element in your html file with the name [string] var divObject = document.getElementById(‘display’); 12/12/2015Wendi Jollymore, ACES2

3. Javascript Review Quick review of some Javascript: object.innerHTML property References the contents of the tag var divObject = document.getElementById(‘display’); divObject.innerHTML = “This is some text.”; 12/12/2015Wendi Jollymore, ACES3

4. Javascript Review Quick review of some Javascript: Accessing other properties using dot notation: var divObject = document.getElementById(‘txtTitle’); if (txtTitle.value == “”) { alert(“Title can’t be empty.”); } Accessing style properties: divObject.style.fontSize = “1.5em”;http://www.w3schools.com/htmldom/default.asp 12/12/2015Wendi Jollymore, ACES4

5. 12/12/2015Wendi Jollymore, ACES5 What is AJAX? AJAX: Asynchronous Javascript And XML Makes a web page act more like an application Normally processing occurs when the web page causes browser to make requests from web server via http Web server sends responses back to browser User waits while request is sent, response received, and page reloads with response data AJAX can work behind the scenes to pages don’t REFRESH

6. 12/12/2015Wendi Jollymore, ACES6 What is AJAX? AJAX technology has actually been around for a long time (1998) Didn’t catch on until 2005: Google Maps, Google Suggest http://www.adaptivepath.com/ideas/essays/archi ves/000385.php

7. 12/12/2015Wendi Jollymore, ACES7 AJAX Example Check out these demos: http://demos.openrico.org/inner_ajax_ HTML http://demos.openrico.org/complex_aj ax

8. 12/12/2015Wendi Jollymore, ACES8 How AJAX Works AJAX uses asynchronous communication Can communicate with server multiple times while other things are going on Some call this “threading” but some say it’s not the same thing AJAX accomplishes this using a few elements: Presentation (XHTML, CSS) Data (XML format, Database, etc) Code (Javascipt) The XMLHttpRequest object

9. 12/12/2015Wendi Jollymore, ACES9 How AJAX Works Using Javascript and the XMLHttpRequest object: Javascript can request data from the server behind the scenes The results from requests can be displayed in the page without refreshing (e.g. using the innerHTML attribute) PHP – How does this fit in? Data is stored on the server Some code might be needed on the server to process the data before it’s passed to the Javascript code E.g. executing a query that selects records from a database

10. 12/12/2015Wendi Jollymore, ACES10 Making an AJAX Example Create a folder for this example Create a plain-text file called example.dat Put any text in it – a sentence, some words, whatever Create an XHTML page Add a form (don’t worry about method/action) Add a button (NOT a Submit button!) Add a with an id value!

11. 12/12/2015Wendi Jollymore, ACES11 Making an AJAX Example Create a new Javascript (.js) file: var xmlHttp= false; Creates a variable called xmlHttp and initializes it to false If we successfully create an XMLHttpRequest object, this variable will hold it If not, it will stay false Javascript thinks anything that isn’t false, is true!

12. 12/12/2015Wendi Jollymore, ACES12 Making an AJAX Example Different browsers support the XMLHttpRequest object in different ways: If the DOM supports it, create it Otherwise, it must be IE so create it using an ActiveX object (This is old!) if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }

13. The XMLHttpRequest Object This object is what handles the requests and responses behind the scenes onreadystatechange property Contains the function that will process the server’s response to a request E.g. display the response in a Most programmers use anonymous functions (yuck!) The function will execute each time the state of the response changes 12/12/2015Wendi Jollymore, ACES13

14. The XMLHttpRequest Object readyState property Contains the ongoing state of the current response Generally you want to perform a task when the response has been received (request complete) 12/12/2015Wendi Jollymore, ACES14StateDescription 0The request is not initialized 1The request has been set up 2The request has been sent 3The request is in process 4The request is complete

15. The XMLHttpRequest Object responseText property Contains the server’s response as text To grab the response as XML data, use responseXML property open(method, URL, asyncFlag) method Used to “open” the object and configure the request 12/12/2015Wendi Jollymore, ACES15 ParameterWhat It Means methodThe HTTP method used to open the connection, such as GET or POST. URLThe requested URL. asyncFlagA Boolean value indicating whether the call is asynchronous. The default is true.

16. The XMLHttpRequest Object send(info) method Sends the request to the server For GET requests, use the argument null For POST requests, you’ll need to send along information about the request E.g. a parameter string 12/12/2015Wendi Jollymore, ACES16

17. 12/12/2015Wendi Jollymore, ACES17 Making an AJAX Example Writing the getData() function: function getData(dataSource, divID) { if(xmlHttp) { var obj = document.getElementById(divID); xmlHttp.open("GET", dataSource); xmlHttp.onreadystatechange = function() { // we’ll fill this in later }; xmlHttp.send(null); }

18. 12/12/2015Wendi Jollymore, ACES18 Making an AJAX Example Writing the anonymous function: If the state of the response is 4 Response completed Then: Grab the response text Plug it into the div tag xmlHttp.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4) { obj.innerHTML = xmlHttp.responseText; } };

19. 12/12/2015Wendi Jollymore, ACES19 Making an AJAX Example Save your Javascript file as ajax.js In your XHTML file, go to the button element in the form tag Add an onClick=“” event: Make sure where I have ‘display’ you put the value of your id attribute Check that your path to the data file is correct

20. Exercise Modify the existing example 3 buttons with different captions 3 different text files Make each button display a different text file from the server 12/12/2015Wendi Jollymore, ACES20

21. 12/12/2015Wendi Jollymore, ACES21 Getting a Response from PHP Create a new folder for a new example Add an index.html file Form tag (no attributes required) Text field Named tag Add display.php Get the value from the text field using isset() (“Error” if no name) Echo some kind of message using the name Copy over your ajax.js file You’ll be changing this a bit

22. 12/12/2015Wendi Jollymore, ACES22 Getting a Response from PHP Modify your ajax.js code: The getData() method should accept an additional parameter for the text field name, and change the data source param to a file string for php file name: function getData(txtField, file, divID) Add a statement to get a reference to that text field object: var txt = document.getElementById(txtField); Create a url string that includes the PHP file name and the delimited parameter for the text field: var url = file + "?txtName=" + txt.value; Update the open statement so that your url is passed in: XMLHttpRequestObject.open("GET", url);

23. 12/12/2015Wendi Jollymore, ACES23 Getting a Response from PHP In the button’s onClick event: Call the getData method, and pass in the name of the text field, the name of the php file, and the name of the div tag:

24. 12/12/2015Wendi Jollymore, ACES24 Sending Data Using Post Post data is encrypted Updating your AJAX script to send via post is not easy! For explanation, see Books24x7: Ajax for Dummies by Steve Holzner ISBN:9780471785972 Chapter 3 – the last section (“Passing Data to the Server with POST”)

25. 12/12/2015Wendi Jollymore, ACES25 Sending Data Using Post Thankfully, Dan has given us a nice class we can use! ajax_queue.js You can use this in the rest of today’s lesson and in your final project! It also has a much nicer way to create the right XMLHttpRequest object for multiple browser versions!

26. 12/12/2015Wendi Jollymore, ACES26 Using ajax_queue.js SimpleAJAXCall(url, callback, method, param) url: The URL/file that should will handle the request (e.g. process a form) callback: The name of the function that should execute upon completion of the request E.g. your onreadystatechange function method: GET or POST (as a string) param: Optional – any data that needs to be passed into your callback function

27. 12/12/2015Wendi Jollymore, ACES27 Using ajax_queue.js Create an index.php page: Add echo statements to include two javascript files: A new version of ajax.js The ajax_queue.js library Add statements to include your info.php file (or use variables to set up host, user, password) and database name (Media) Code to body to connect to database and select all records from Cds table, ordered by title Add a header for the page, and a form tag In the form, code a list box that lists each title, but each option’s value is the id field value (next slide) Add a button “View” to the form Add a named tag under the form tag

28. 12/12/2015Wendi Jollymore, ACES28 Using ajax_queue.js $numRows = mysql_num_rows($result); echo " \n"; for($i=1; $i<=$numRows; $i++) { $record = mysql_fetch_array($result); echo " ".$record["title"]." \n"; } echo " \n";

29. 12/12/2015Wendi Jollymore, ACES29 Using ajax_queue.js The View button’s onClick event will work like before It will call a method called getCdData() This will be defined in your brand new ajax.js file Parameters for getCdData: The name of the list box object The name of the php file that will look up the CD information (viewCd.php) The name of the div tag

30. 12/12/2015Wendi Jollymore, ACES30 Using ajax_queue.js Create a new ajax.js file from scratch Add the getCdData function with three string params: Name of list box Name of php file that will perform processing on server Name of div tag Add the two statements that grab objects for the list box and div tag

31. 12/12/2015Wendi Jollymore, ACES31 Using ajax_queue.js ajax.js file, continued: In the getCdData() method, continued: Define a callback function that displays the result in the div tag: var callbackFunction = function(result) { divObj.innerHTML = result; }; Note the parameter, and the use of it in the function!

32. 12/12/2015Wendi Jollymore, ACES32 Using ajax_queue.js ajax.js file, continued: In the getCdData() method, continued: Build the url with the parameters: var url = file + "?cdId=" + listObj.value; Note that even though this looks like a GET way of doing things, we aren’t The functions in side ajax_queue.js will strip off the name=value pairs and send the request using POST This was the hard part we don’t have to worry about!

33. 12/12/2015Wendi Jollymore, ACES33 Using ajax_queue.js ajax.js file, continued: In the getCdData() method, continued: Invoke the SimpleAJAXCall() method: SimpleAJAXCall(url, callbackFunction, "POST");

34. 12/12/2015Wendi Jollymore, ACES34 Using ajax_queue.js Lastly, create the viewCd.php file: Strip out all the XHTML structure Add the following code: Require any info you need for database connection Grab the cd id value using $_POST and isset() If the ID is 0 or less, display an error message, otherwise: Connect to CDs table on Media database Select * from Cds where id = the id value you grabbed from $_POST Echo a formatted string of all the fields in the found record Remember this will go in a so you don’t need structure tags here

35. 12/12/2015Wendi Jollymore, ACES35 Next Week Quiz on PHP, MySql, Ajax! 10% of final grade Quiz starts promptly at 2pm 30 minutes long BE ON TIME!! Will be graded during class, so no late/missed quizzes allowed Rest of class is for final project work