add solutions for webtech excercises day 3
This commit is contained in:
parent
3947643b4d
commit
546ad0e7ea
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 |
|
@ -0,0 +1 @@
|
||||||
|
<img src="schottland.jpg" alt="Schottland" style="width:500px;height:600px;">
|
Reference in New Issue