TECHNOLOGIE SIECI WEB Prowadzący: dr inż. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki LABORATORIUM ĆWICZENIE nr 8 Temat: Podstawy technologii AJAX Specyfikacja obiektu XMLHttpRequest: http://www.w3.org/tr/xmlhttprequest/ 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) Tekst pobrany przez AJAX z pliku SimpleAjax.txt!!! Plik SimpleAjax.html <head><title>simple Ajax</title> <script type="text/javascript"> function ajaxfunction() { var xmlhttp; var p = document.getelementbyid("id1"); // Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequest(); catch(e) { // Internet Explorer xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); catch(e) { 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> <div><input type="button" value="zmień tekst" onclick="ajaxfunction()";" /></div> <p id = "id1"> Ten tekst zostanie zmieniony przez AJAX! </p>
Jan Prokop, e-mail: jprokop@prz.edu.pl, Technologie sieci Web, PRz, WEiI 2 2. Aplikacja zwracająca adres IP plik getipajax.html Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/getipajax.html Plik getipajax.html <head><title>get IP AJAX</title> <script src = "getipajax.js" type = "text/javascript"></script></head> <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> Plik 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; Plik getipajax.php $ip = ""; $host = @$_GET["host"]; if ($host!= "") { $ip = gethostbyname($host); echo "$ip"; else { echo "Wpisz adres, np.: 'wp.pl'";
Jan Prokop, e-mail: jprokop@prz.edu.pl, Technologie sieci Web, PRz, WEiI 3 3. Aplikacja kalkulator - plik DivisionAjax.html Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/divisionajax.html Plik DivisionAjax.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-formurlencoded'); 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> <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> Plik DivisionAjax.php $a=$_get["a"]; $b=$_get["b"]; $div=$a/$b; echo $div;
Jan Prokop, e-mail: jprokop@prz.edu.pl, Technologie sieci Web, PRz, WEiI 4 4. Aplikacja wyświetlająca podpowiedzi - plik SuggestAjax.html Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/suggestajax.html Plik SuggestAjax.html <head><script src="suggestajax.js"></script></head> <form>first Name:<input type="text" id="txt1" onkeyup="showhint(this.value)"></form> <p>suggestions: <span id="txthint"></span></p> Plik SuggestAjax.js Plik SuggestAjax.php 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; // Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequest(); catch(e) { // Internet Explorer xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); return xmlhttp; 5. Aplikacja logowania - plik LoginAjax.html header("cache-control: no-cache, mustrevalidate"); header("expires: Mon, 26 Jul 2008 05:00:00 GMT"); $a[]="anna"; $a[]="andrzej"; $a[]="anatol"; $a[]="bogusław"; $a[]="bożena"; $a[]="diana"; $a[]="dariusz"; $a[]="ewa"; $a[]="feliks"; $a[]="grzegorz"; $a[]="hanna"; $a[]="ilona"; $a[]="maria"; $a[]="natalia"; $a[]="piotr"; $a[]="paweł"; $a[]="ryszard"; $a[]="sławomir"; $a[]="wiktor"; $q=$_get["q"]; if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[ $i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; else { $hint=$hint.", ".$a[$i]; if ($hint == "") { $response="no suggestion"; else {$response=$hint; echo $response; Pliki aplikacji zainstalowane na serwerze pod adresem http://java.prz.edu.pl/ajax/loginajax.html Plik LoginAjax.php $username=$_get["username"]; $password=$_get["password"]; if($username=="admin" && $password=="admin"){ echo "yes"; else{ echo "No"; 6. Aplikacja GoogleMap uruchomić lokalnie pliki: google_maps_simple.html, google_maps.html, GoogleMapDemo.html (tutorial: http://www.gmapsapi.com/)
Jan Prokop, e-mail: jprokop@prz.edu.pl, Technologie sieci Web, PRz, WEiI 5 7. Zadanie 7.1. Na serwerze znajduje się skrypt języka PHP: http://java.prz.edu.pl/ajax/responsetabletxt.php generujący dane w postaci tekstu zawierającego kod tabeli HTML o wyglądzie jak na rysunku: Napisać stronę z przyciskiem JS w technologii AJAX na której po każdorazowym naciśnięciu przycisku odświeżą się dane tabeli. 7.2. Na serwerze znajduje się skrypt języka PHP: http://java.prz.edu.pl/ajax/responsetablexml.php generujący plik języka XML o strukturze jak na rysunku: Napisać stronę z przyciskiem JS w technologii AJAX, która wyświetli dane z pliku XML w postaci tabeli HTML: pod którą będzie przycisk, który po każdorazowym kliknięciu będzie odświeżał dane w tabeli.