1. Javascript and AJAX Willem Visser RW334

2. Overview Javascript jQuery AngularJS AJAX

3. Javascript Scripting language with dynamic typing Most commonly used for executing inside the browser to interact with the Document Object Model (DOM) – Can dynamically update static old HTML – Client side validation Popularity faded until AJAX came along now it is the basis of many web development frameworks and even server side (NodeJS) Libraries such as jQuery and AnagularJS

4. Javascript Example http://www.w3schools.com/js/tryit.asp?filename=tryjs_events http://www.w3schools.com/js/tryit.asp?filename=tryjs_events function displayDate() { document.getElementById("demo").innerHTML=Date(); } My First Web Page This is a paragraph. Display Date

5. jQuery Nothing more than a Javascript library Makes it much simpler to use JS to manipulate web-related information: html, events, animation and AJAX

6. jQuery Example http://www.w3schools.com/Jquery/tryit.asp?filename=tryjquery_hide $(document).ready(function(){ $("p").click(function(){$(this).hide();}); }); If you click on me, I will disappear. Click me away! Click me too!

7. AngularJS Open Source Javascript framework – Maintained by Google and community Model-View-Controller philosophy that tries to improve decoupling and ease of testing Two-way data binding – View and Model – Changes to either triggers the other to change Includes templates as well JS <<< jQuery <<< AngularJS

8. AngularJS Example http://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/ Hello World, AngularJS <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"> Write some text: Hello {{ thetext }}

9. AJAX Asynchronous Javascript and XML Client sends asynchronous request to server – Client can continue Server responds with data or error Client handles success by displaying data Client handles failure Only part of the page gets refreshed!

10. JS and AJAX http://html.net/tutorials/javascript/lesson18.php AJAX Calls - XML Response Click the button to get a list of programming languages var myRequest; function loadXML(url) { myRequest = new XMLHttpRequest(); myRequest.open("GET", url, true); myRequest.send(null); myRequest.onreadystatechange = getData; } function getData()… PHP Ruby C# JavaScript

11. JS and AJAX http://html.net/tutorials/javascript/lesson18.php function getData() { var myDiv = document.getElementById("test"); if (myRequest.readyState ===4 && myRequest.status === 200) { var languages = myRequest.responseXML.getElementsByTagName("language"); for (var i = 0; i < languages.length; i++) { var paragraph = document.createElement("p"); myDiv.appendChild(paragraph); paragraph.appendChild(document.createTextNode( languages[i].firstChild.data)); } To get this example to run: Start a webserver with python -m SimpleHTTPServer in the directory where the html and xml file is, open a browser to the IP indicated and click on the html file in the listing

12. jQuery and AJAX (1) Click here to fetch HTML content $(document).ready(function() { $('a').click(function() { $('#result').load('content.html #content’); }); some content some content 1

13. jQuery and AJAX (2) $(document).ready(function() { function processData(data) { var resultStr = "”; var items = $(data).find('language'); $(items).each(function(i) { resultStr += $(this).text() + ' ’; $('#result').html(resultStr); }); } $('a').click(function() { $.get(“text.xml”, processData); }); });

14. jQuery and AJAX (3) $(document).ready(function() { function processData(data) { … } function errorAlert(e, jqxhr) { alert("Your request was not successful: " + jqxhr); } $('a').click(function() { $.ajax({type: "GET”, cache: false, url: “text.xml”, dataType: "xml”, contentType: "text/html”, success: processData, error: errorAlert });

15. AngularJS and AJAX (1) Send AJAX {{item.language}} ….

16. AngularJS and AJAX (1) angular.module("myapp", []).controller("MyController", function($scope, $http) { $scope.myData = {}; $scope.myData.doClick = function(item, event) { var responsePromise = $http.get("text.json"); responsePromise.success(function(data, status, headers, config) { $scope.myData.languages = data; }); responsePromise.error(function(data, status, headers, config) { alert("AJAX failed!"); }); } );

17. AngularJS Main Features Directives – 2- way Data binding – View and Model via $scope – Note all still client side though, the server doesn’t get updated until you POST something – View will get updated the moment an AJAX call returns and is handled correctly Filtering – Very powerful – Useful for Search features Single Page Web Applications – Just one HTML page but everything changes on it – ng-view – routes