Javascript and AJAX

Javascript and AJAX Willem VisserRW334

Overview • Javascript • jQuery • AngularJS • AJAX

Javascript • Scripting language with dynamic typing • Most commonly used for executing inside the browser to interact with the Domain 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 Examplehttp://www.w3schools.com/js/tryit.asp?filename=tryjs_events <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 Examplehttp://www.w3schools.com/Jquery/tryit.asp?filename=tryjquery_hide <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();}); }); </script> </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 Examplehttp://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/ <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 AJAXhttp://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 AJAXhttp://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 SimpleHTTPServerin 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

Javascript and AJAX