Download presentation
Presentation is loading. Please wait.
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
<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>
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
<html> <head> <script src=" </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>
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
<html ng-app> <head> <title>Hello World, AngularJS</title> <script type="text/javascript" src=" </head> <body> Write some text: <input type="text" ng-model=”thetext" /> <h1>Hello {{ thetext }}</h1> </body> </html>
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
<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>
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) <html> <head>
<script type="text/javascript" src=" </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>
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() + '<br />’; $('#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) <head>
<script src=" </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>
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!"); } );
![AngularJS and AJAX (1) angular.module( myapp , [])](http://slideplayer.com/slide/13265234/79/images/16/AngularJS+and+AJAX+%281%29+angular.module%28+myapp+%2C+%5B%5D%29.jpg ".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 <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
Similar presentations
