1. Modern JavaScript Develop And Design Instructor’s Notes Chapter 11– Ajax Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

2. Objectives Explain what Ajax is Create a browser-neutral Ajax object Setup an Ajax request Perform an Ajax request Test for a request’s completeness

3. More Objectives Send data to a server-side resource Handle different types of data returned by the server Create a PHP script that returns different types of data Implement several real-world Ajax examples

4. Making Ajax Requests 1.Create an Ajax object 2.Prepare the request 3.Make the request 4.Handle the response

5. Creating the Ajax Object function getXMLHttpRequestObject() { var ajax = null; // Most browsers: if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Older IE. ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } // Return the object: return ajax; } // End of getXMLHttpRequestObject() function.

6. Identifying the Result Handler ajax.onreadystatechange = handleStateChange;

7. Making the Request GET Used to fetch data Common and repeatable POST Intended to cause a server change or reaction Should be unique ajax.open('GET', 'http://www.example.com/page.php', true); ajax.send(null);

8. The Resource Can use absolute or relative path Must be on the same domain Must be over HTTP (or other Internet protocol)

9. The readyState 0, unset 1, opened 2, headers received 3, loading 4, done if (ajax.readyState == 4) { // Handle the response. } else { // Show the 'Loading...' message or do nothing. }

10. The status 2xx, OK 301, Moved Permanently 304, Not Modified 401, Unauthorized if (ajax.readyState == 4) { if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ) { // Handle the response. } else { // Status error! }

11. The Response responseXML responseText document.getElementById('output').innerHTML = ajax.responseText;

12. Sending Data via GET Append to URL Provide to send() ajax.open('GET', 'http://www.example.com/somepage.php?id=' + encodeURIComponent(id), true); var data = 'email=' + encodeURIComponent(email) + '&password=' + encodeURIComponent(password); ajax.open('GET', 'http://www.example.com/somepage.php', true); ajax.send(data);

13. Sending Data via POST var data = 'email=' + encodeURIComponent(email) + '&password=' + encodeURIComponent(password); ajax.open('POST', 'http://www.example.com/somepage.php', true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ajax.send(data);

14. Debugging Steps Test the server-side resource directly Use a network monitor Verify the response data Watch for caching!

15. Data Formats Plain text eXtensible Markup Language (XML) JavaScript Object Notation (JSON)

16. Handling XML (Re-)Introducing JavaScript JavaScript in Action var data = ajax.responseXML; var chapters = data.getElementsByTagName('chapter'); for (var i = 0, count = chapters.length; i < count; i++) { // Use chapters[i].getAttribute('id') // Use chapters[i].firstChild.nodeValue }

17. Handling JSON { "1": {"title": "(Re-)Introducing JavaScript"}, "2": {"title": "JavaScript in Action"} } var data = ajax.responseText; var data = JSON.parse(data); data[2].title; // JavaScript in Action

18. Server-Side Scripts May receive input via GET or POST Returns output –Plain text –XML –JSON Generally does not return HTML (unless the data is HTML)

19. Sending Plain Text <?php // Nothing before this! echo 'This is some text being printed'; ?> <?php if (/* username is available */) { echo 'AVAILABLE'; } else { echo 'UNAVAILABLE'; } ?>

20. Sending XML <?php // Nothing before this! header('Content-Type: text/xml'); echo ' '; $q = 'SELECT comment, email, date_submitted FROM comments ORDER BY date_submitted DESC'; $r = mysqli_query($dbc, $q); while ($row = mysqli_fetch_array($r)) { echo " {$row['comment']} {$row['email']} {$row['date']} {$> \n"; } echo ' ';

21. Sending JSON <?php header('Content-Type: application/json'); $data = array(); $q = 'SELECT comment, email, date_submitted FROM comments ORDER BY date_submitted DESC'; $r = mysqli_query($dbc, $q); while ($row = mysqli_fetch_array($r)) { $data[] = $row; } echo json_encode($data);

22. Showing Progress HTML: CSS: #loader { visibility: hidden; } JavaScript: loader.style.visibility = 'visible'; ajax.open('GET', 'http://www.example.com/somepage.php', true); ajax.send(null); JavaScript, when done: loader.style.visibility = 'hidden';

23. Login Submission if ( (email.value.length > 0) && (password.value.length > 0) ) { // Perform an Ajax request: var ajax = getXMLHttpRequestObject(); ajax.onreadystatechange = function() {} ajax.open('POST', 'resources/login.php', true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); var data = 'email=' + encodeURIComponent(email.value) + '&password=' + encodeURIComponent(password.value); ajax.send(data); // Et cetera.