Professional Documents
Culture Documents
Javascript and AJAX: Willem Visser RW334
Javascript and AJAX: Willem Visser RW334
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
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
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
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
Filtering
Very powerful
Useful for Search features