Javascript and AJAX Willem Visser RW334
Overview Javascript jQuery AngularJS AJAX
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
Javascript Example http://www. w3schools. com/js/tryit. asp <html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html>
jQuery Nothing more than a Javascript library Makes it much simpler to use JS to manipulate web-related information: html, events, animation and AJAX
jQuery Example http://www. w3schools. com/Jquery/tryit. asp <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){$(this).hide();}); }); </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
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
AngularJS Example http://viralpatel <html ng-app> <head> <title>Hello World, AngularJS</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> </head> <body> Write some text: <input type="text" ng-model=”thetext" /> <h1>Hello {{ thetext }}</h1> </body> </html>
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!
JS and AJAX http://html.net/tutorials/javascript/lesson18.php <html> <body> <h1>AJAX Calls - XML Response</h1> <div id="test”> <h2>Click the button to get a list of programming languages</h2> <input type="button" value="Click Me!" onclick="loadXML('text.xml')" /> </div> <script type="text/javascript"> var myRequest; function loadXML(url) { myRequest = new XMLHttpRequest(); myRequest.open("GET", url, true); myRequest.send(null); myRequest.onreadystatechange = getData; } function getData()… </script> </body> </html> <languages> <language>PHP</language> <language>Ruby</language> <language>C#</language> <language>JavaScript</language> </languages>
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
jQuery and AJAX (1) <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> </head> <body> <p><a href="#">Click here to fetch HTML content</a></p> <div id="result”> </div> <script type="text/javascript”> $(document).ready(function() { $('a').click(function() { $('#result').load('content.html #content’); }); </script> </body> </html> <div id ="content"> some content </div> <div id ="content1"> some content 1 </div>
jQuery and AJAX (2) $(document).ready(function() { function processData(data) { var resultStr = "”; var items = $(data).find('language'); $(items).each(function(i) { resultStr += $(this).text() + '<br />’; $('#result').html(resultStr); }); } $('a').click(function() { $.get(“text.xml”, processData); });
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 });
AngularJS and AJAX (1) <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> </head> <body ng-app="myapp”> <div ng-controller="MyController" > <button ng-click="myData.doClick(item, $event)">Send AJAX </button> <br/> <div ng-repeat="item in myData.languages”> {{item.language}} <br> </div> </div> <script> …. </script> </body>
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!"); } );
AngularJS Main Features Directives <div ng-repeat=“actor in movie”> 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