Laboratorium 6
Podstawy technologii AJAX

1. Dodanie do strony HTML tekstu z pliku *.txt umieszczonego na serwerze

Plik SimpleAjax.txt (Plik umieszczony jest na serwerze WWW pod adresem http://java.prz.rzeszow.pl/ajax/SimpleAjax.txt)

simpleAjax.txt

Tekst pobrany przez AJAX z pliku SimpleAjax.txt !!!

simpleAjax.html

<html>
<head><title>Simple Ajax</title>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
var p = document.getElementById("id1");
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e) { // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
p.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", "http://java.prz.rzeszow.pl/ajax/SimpleAjax.txt", true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div><input type="button" value="Zmień tekst" onclick="ajaxFunction();" /></div>
<p id = "id1">
Ten tekst zostanie zmieniony przez AJAX !
</p>
<!-- Footer //]]>'"</script></style></iframe></noembed></embed></object></noscript>--><div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hosting2.keep.pl/prv_hosting_footer.js"></script></body>
</html>

2. Aplikacja zwracająca adres IP

Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/getIPAjax.html

getIpAjax.html

<html>
<head><title>get IP AJAX</title>
<script src = "getIPAjax.js" type = "text/javascript"></script></head>
<body>
<form name = "formularz">
<table align="center" width="400" bgcolor="#CCCC99" cellspacing="10">
<tr><td align="center"><b>Host Name</b></td></tr>
<tr><td align="center"><input type = "text" name = "host" /></td></tr>
<tr><td align="center">
<input type = "button" value = "Send" onclick="MyRequestAjax(value)"></td>
</tr>
<tr><td align="center">Adress IP:</td></tr>
<tr><td align="center">
<span id = "myDiv" style="color:#FF0000; font-weight:bold;"></span></td>
</tr></table>
</form>
</body>
</html>

getIpAjax.js

var xmlHttp
function MyRequestAjax() {
xmlHttp = GetXmlHttpObject();
var urll = document.formularz.host.value;
var url = "getIPAjax.php?&host=" + urll;
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject() {
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request=new ActiveXObject("Microsoft.XMLHTTP");
}
return request;
}

getIpAjax.php

Wpisz adres, np.: 'wp.pl'

3. Aplikacja kalkulator

Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/DivisionAjax.html

DivisionAjax.html

<html>
<head>
<title>Ajax Multiply Example</title>
<script language="Javascript">
function postRequest(strURL){
var request;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var request = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('POST', strURL, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
request.onreadystatechange = function(){
if (request.readyState == 4){
updatePage(request.responseText);
}
}
request.send(strURL);
}
function updatePage(str){
document.getElementById('result').value = str;
}
function callDivision(){
var a = parseFloat(document.form.a.value);
var b = parseFloat(document.form.b.value);
var url = "DivisionAjax.php?a=" + a + "&b=" + b;
postRequest(url);
}
</script>
</head>
<body>
<div style="color:#FF0000; text-align:center; font-weight:bold;">
<h1>Ajax Division</h1>
<form name="form">
<input type="text" id="a" />
/
<input type="text" id="b" />
<input type="button" value=" = " onclick="callDivision()" />
<input type="text" id="result" readonly="readonly" />
</form>
</div>
</body>
</html>

DivisionAjax.php

4. Aplikacja wyświetlająca podpowiedzi

Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/SuggestAjax.html

SuggestAjax.html

<html>
<head><script src="SuggestAjax.js"></script></head>
<body>
<form>First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)"></form>
<p>Suggestions: <span id="txtHint"></span></p></body>
</html>

SuggestAjax.js

var xmlHttp
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML=""; return; }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Your browser does not support
AJAX!"); return; }
var url="SuggestAjax.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);}
function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHint").innerHTML=xmlHttp.responseText; }
}
function GetXmlHttpObject() {
var xmlHttp=null;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest(); }
catch(e) { // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlHttp;
}

SuggestAjax.php

no suggestion

5. Aplikacja logowania

Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/LoginAjax.html

LoginAjax.php

No

6. GoogleMap

Przykład mapy google_maps_simple.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Maps Example</title> 
<script src="http://maps.google.com/maps?file=api&v=2&key=(key)" type="text/javascript"></script> 
<script type="text/javascript"> 
function load() { 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("myMap")); 
map.setCenter(new GLatLng(50.026876424823435, 21.98439359664917), 16); 
} 
} 
</script>
</head> 
<body onload="load()" onunload="GUnload()"> 
<div id="myMap" style="width: 500px; height: 300px"></div> 
</body> 
</html>

7. Google Maps – przykład funkcji definiującej mapę

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Google Maps Example</title> 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=KLUCZ GOOGLE MAPS API"> </script> <script type="text/javascript"> 
//<![CDATA[ 
function loadMap() { 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map"));
 map.addControl(new GLargeMapControl()); 
 var MapTypes = map.getMapTypes();
  MapTypes[0].getName= function() { return "Mapa";} 
  MapTypes[1].getName = function() { return "Satelitarna";}
  MapTypes[2].getName = function() { return "Hybrydowa";}
   map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
     map.addControl(new GScaleControl()); 
     map.enableContinuousZoom();
     map.enableDoubleClickZoom(); 
     map.setCenter(new GLatLng(50.027306, 21.98531), 13); 
     var info='<div style="background-color: #fff; width: 200px; font-size: 11px; FONT-FAMILY: Verdana, Tahoma, Arial, Sans-Serif;"><b>Politechnika Rzeszowska</b><hr/>Wydział Elektrotechniki i Informatyki<br/>ul. W. Pola 2<br/>35-959 Rzeszów <hr/><B>GPS</b> N: 50° 1' 38"  E: 21° 59' 7" </div>'; 
     var point = new GLatLng(50.027306, 21.98531); 
     var marker = new GMarker(point); 
     GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(info); });
      map.addOverlay(marker); marker.openInfoWindowHtml(info); 
      } 
      }
//]]> 
</script> 
</head> 
<body onload="loadMap()" onunload="GUnload()"> 
<div id="map" style="width: 640px; height: 480px; border: 2px solid black; background: gray;"></div> 
</body> 
</html>

8. Sterowanie mapą z poziomu kodu JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
 <title>Tytuł</title> 
 <script src="http://maps.google.com/maps?file=api&v=2&key=xxx" type="text/javascript" charset="utf-8"> </script> <script src="google_maps.js" type="text/javascript" > </script> 
 </head> <body onload="loadMap()" onunload="GUnload()"> 
 <div id="map" style="width: 400px; height: 400px"></div> 
 <form> 
 <input type="button" id="button1" value="Budynek A" onclick="moveMap(1)" /> 
 <input type="button" id="button2" value="Budynek B" onclick="moveMap(2)" /> 
 <input type="button" id="button3" value="Budynek C" onclick="moveMap(3)" /> 
 </form> 
 </body> 
 </html>

google_maps.js

 <html>
//<![CDATA[
var map;
function loadMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(50.027306, 21.98531), 14);
}
}
function moveMap(id){
switch(id){
case 1:
map.panTo(new GLatLng(50.01, 22.01));
break;
case 2:
map.panTo(new GLatLng(50.05, 22.04));
break;
case 3:
map.panTo(new GLatLng(50.08, 22.7));
break;
}
}
//]]>

Strona Labolatorium

Technologie WEB i JAVA

WYBIERZ NUMER LABOLATORIUM:

Laboratorium 6
Podstawy technologii AJAX

1. Dodanie do strony HTML tekstu z pliku *.txt umieszczonego na serwerze

2. Aplikacja zwracająca adres IP

3. Aplikacja kalkulator

4. Aplikacja wyświetlająca podpowiedzi

5. Aplikacja logowania

6. GoogleMap

7. Google Maps – przykład funkcji definiującej mapę

8. Sterowanie mapą z poziomu kodu JS

Strona Labolatorium

Technologie WEB i JAVA

WYBIERZ NUMER LABOLATORIUM:

Laboratorium 6 Podstawy technologii AJAX

1. Dodanie do strony HTML tekstu z pliku *.txt umieszczonego na serwerze

2. Aplikacja zwracająca adres IP

3. Aplikacja kalkulator

4. Aplikacja wyświetlająca podpowiedzi

5. Aplikacja logowania

6. GoogleMap

7. Google Maps – przykład funkcji definiującej mapę

8. Sterowanie mapą z poziomu kodu JS

Laboratorium 6
Podstawy technologii AJAX