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_ev
ents
<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-worldtutorial/
<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!"
<languages>
onclick="loadXML('text.xml')" />
<language>PHP</language>
</div>
<language>Ruby</language>
<script type="text/javascript">
<language>C#</language>
var myRequest;
<language>JavaScript</language>
function loadXML(url) {
</languages>
myRequest = new XMLHttpRequest();
myRequest.open("GET", url, true);
myRequest.send(null);
myRequest.onreadystatechange = getData;
}
function getData()
</script>
</body>
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/jquery1.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);
});
});
<div id ="content"> some content </div>
</script>
<div id ="content1"> some content 1 </div>
</body>
</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.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>
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 doesnt 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
