Web Architectures - Stellenbosch University

Transcript Web Architectures - Stellenbosch University

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?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 Example
http://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 Example
http://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 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>
<languages>
<script type="text/javascript">
<language>PHP</language>
var myRequest;
<language>Ruby</language>
function loadXML(url) {
<language>C#</language>
myRequest = new XMLHttpRequest();
<language>JavaScript</language>
myRequest.open("GET", url, true);
</languages>
myRequest.send(null);
myRequest.onreadystatechange = getData;
}
function getData()…
</script>
</body>
</html>
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>
<div id ="content"> some content </div>
</body>
<div id ="content1"> some content 1 </div>
</html>
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.mi
n.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>
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

Web Architectures - Stellenbosch University

Transcript Web Architectures - Stellenbosch University

Directory