Vous êtes sur la page 1sur 17

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