add solutions for webtech excercises day 3

This commit is contained in:
Andreas Zweili 2017-11-18 11:33:39 +01:00
parent 3947643b4d
commit 546ad0e7ea
7 changed files with 126 additions and 0 deletions

24
web/3_sem/html/ajax.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "schottland.txt", true);
xhttp.send();
}
</script>
</body>
</html>

View File

@ -0,0 +1,5 @@
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>

29
web/3_sem/html/json.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<body>
<h2>Employee Index</h2>
<button type="button" onclick="ReturnEmployees()">Click to show workers.</button>
</body>
<ul id="demo"></ul>
<script>
function ReturnEmployees(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var text = document.getElementById("demo");
var employees = JSON.parse(this.responseText);
for (i = 0; i < employees.id.length; i++) {
var id = employees.id[i];
text.innerHTML += "<li>" + id.name + ", " + id.vorname + "</li>"
}
}
};
xhttp.open("GET", "namen.json", true);
xhttp.send();
}
</script>
</html>

View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>I know where you live.</h2>
<button type="button" onclick="navigator.geolocation.getCurrentPosition(successCallback)">Really? Show me!</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
// $(document).ready(function(){
function displayLocation(latitude,longitude){
var request = new XMLHttpRequest();
var method = 'GET';
var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true';
var async = true;
request.open(method, url, async);
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
var data = JSON.parse(request.responseText);
//alert(request.responseText); // check under which type your city is stored, later comment this line
var addressComponents = data.results[0].address_components;
for(i=0;i<addressComponents.length;i++){
var types = addressComponents[i].types
//alert(types);
if(types=="locality,political"){
//alert(addressComponents[i].long_name); // this should be your city, depending on where you are
document.getElementById("demo").innerHTML = addressComponents[i].long_name
}
}
//alert(address.city.short_name);
}
};
request.send();
};
var successCallback = function(position){
var x = position.coords.latitude;
var y = position.coords.longitude;
displayLocation(x,y);
};
//navigator.geolocation.getCurrentPosition(successCallback);
// });
</script>
</html>

16
web/3_sem/html/namen.json Normal file
View File

@ -0,0 +1,16 @@
{
"id":[
{
"name": "muster",
"vorname": "max"
},
{
"name": "vögeli",
"vorname": "christian"
},
{
"name": "hörler",
"vorname": "ivan"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

@ -0,0 +1 @@
<img src="schottland.jpg" alt="Schottland" style="width:500px;height:600px;">