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