TI - Labs

Plan zajęć

AJAX - wprowadzenie
Hello Ajax - pierwszy skrypt
Status realizacji żądania AJAX
Wysyłanie danych metodą GET
Wysyłanie danych metodą POST
Odbiór danych XML
Odbiór danych JSON

Środowisko testowe dla aplikacji AJAX

W ramach zajęć zostaną opracowane skrypty w języku JavaScript, odpowiednie skrypty w języku HTML5 oraz skrypty działające po stronie serwera w języku Python. Skrypty po stronie serwera zostaną uruchomione w technologii CGI. Każde realizowane zadanie będzie wymagało trzech plików: pliku z kodem HTML5, pliku z kodem JavaScript i skryptu po stronie serwera w języku Python.`

Na rys.1 przedstwiono zasadę działania rozwiązań wykorzystujących obiekty XHR (technologia AJAX).

Pierwszy skrypt AJAX

Na początek opracujemy prostą aplikację, która wyświetli tekst "Hello AJAX" z serwera.

Do realizacji zadania potrzebujemy nastęujących plików:

ajax_hello.py - plik po stronie serwera w katalogu CGI-BIN z uprawnieniami r_x ALL
ajax1.html - plik z kodem HTML5
ajax1.js - plik z kodem obsługującym AJAX'a i pobierający przesłaną informację z serwera.

Na początek przedstawiony zostanie skrypt CGI "ajax_hello.py" tworzący odpowiedź dla naszej aplikacji. Kod można przetestować uruchamiając w oknie systemu Linux.

#!/usr/bin/python3
print ("Content-Type: text/plain")
print ()
print ("""\
Hello, AJAX
""")

Kolejny skrypt zawiera kod html - ajax1.html.

Plik ajax1.html - ( [listing dokumentu] [link do dokumentu]

   <!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 1</title>
      <script src="ajax1c.js" type="text/javascript" ></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Pierwszy skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
     </div>
    </body>
</html>

Skrypt JavaScript zawierający funkcjonalność XHR w wersji 1.

Plik ajax1a.js - ( [listing dokumentu] [link do dokumentu]

var request;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       request = getRequestObject() ;
       request.onreadystatechange = handleResponse ;
       request.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_hello.py", true);
       request.send(null);
  }
function handleResponse()      {
       if (request.readyState == 4)    {
           alert(request.responseText) ;
       }
}

Skrypt JavaScript zawierający funkcjonalność XHR w wersji 2.

Plik ajax1b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();

  xhr.addEventListener("load", e => {
    if (xhr.status === 200) {
        console.log("Wynik połączenia:");
        console.log(xhr.response);
	alert(xhr.response) ;    
    }
  });

  xhr.addEventListener("error", e => {
    alert("Nie udało się nawiązać połączenia");
  });

  xhr.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_hello.py", true);
  xhr.send();
}

Skrypt JavaScript zawierający funkcjonalność XHR w wersji 2 + Promise().

Plik ajax1d.js - ( [listing dokumentu] [link do dokumentu]

let request = obj => {
  return new Promise( (resolve, reject) => {	
    let xhr = new XMLHttpRequest();
	
	xhr.open(obj.method || "GET", obj.url);
	//xhr.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_hello.py", true);

    xhr.onload = () => {
      if (xhr.status === 200) {
        console.log("Wynik połączenia:");
        console.log(xhr.response);
	    resolve (xhr.response) ;    
      } else {
		reject (xhr.statusText);
	  }		
    };

    xhr.onerror = () => reject (xhr.statusText);
    
    xhr.send();
  });	
} ;

function sendRequest() {
  request( {url: "../../cgi-bin/TI_2025/lab07/ajax_hello.py" } )
    .then ( data => { alert ( data ) ; })
    .catch ( error => { console.log(error); }); 
}

Skrypt JavaScript zawierający funkcjonalność Fetch.

Plik ajax1c.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  fetch("../../cgi-bin/TI_2025/lab07/ajax_hello.py")
    // .then(response => {console.log(response);})
    .then(response => response.text())
    .then(data => {
	    console.log(data);
	    alert(data);
     })	
    .catch(error => console.log("Błąd: ", error));	
}

Status silnika AJAX

W następnym przykładzie przedstawione zostaną stany silnika AJAX. Do realizacji zadania wykorzystamy skrypt CGI z poprzedniego zadania.

Plik "ajax2.html" z kodem HTML5.

Plik ajax2.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 2</title>
      <script src="ajax2b.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Drugi skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 1).

Plik ajax2a.js - ( [listing dokumentu] [link do dokumentu]

var xmlHttp;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       xmlHttp = getRequestObject() ;
       if (xmlHttp) {
         try {    
           xmlHttp.onreadystatechange = handleResponse ;
           xmlHttp.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_hello.py", true);
           xmlHttp.send(null);
         }
         catch (e) {
           alert ("Nie można połączyć się z serwerem: " + e.toString()) ;
         }
       } else {
         alert ("Błąd") ;
       }
  }
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xmlHttp.readyState == 1) {
           myDiv.innerHTML += "Status zadania: 1 (laduje)<br/>" ;
    } 
    else if (xmlHttp.readyState == 2) {
           myDiv.innerHTML += "Status zadania: 2 (zaladowany)<br/>" ;
    }
    else if (xmlHttp.readyState == 3) {
           myDiv.innerHTML += "Status zadania: 3 (interaktywny)<br/>" ;
    }
    else if (xmlHttp.readyState == 4) {
         if ( xmlHttp.status == 200 )  {
             response = xmlHttp.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response ;
         }
    }  
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 2).

Plik ajax2b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();
  var myDiv = document.getElementById("MyDivElement");
  myDiv.innerHTML += "Status zadania: " + xhr.readyState + "<br/>" ;
  xhr.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_hello.py", true);
  myDiv.innerHTML += "Status zadania: " + xhr.readyState + "<br/>" ;	
  xhr.addEventListener("load", e => {
    if (xhr.readyState == 1) {
           myDiv.innerHTML += "Status zadania: 1 (laduje)<br/>" ;
    } 
    else if (xhr.readyState == 2) {
           myDiv.innerHTML += "Status zadania: 2 (zaladowany)<br/>" ;
    }
    else if (xhr.readyState == 3) {
           myDiv.innerHTML += "Status zadania: 3 (interaktywny)<br/>" ;
    }
    else if (xhr.readyState == 4) {
         if ( xhr.status == 200 )  {
             response = xhr.response;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response ;
         }
    }
  })	  
  xhr.addEventListener("progress", e => {
     myDiv.innerHTML += "Status zadania: " + xhr.readyState + " (progress) <br/>" ;  
  });
 
  xhr.addEventListener("error", e => {
    alert("Nie udało się nawiązać połączenia");
  });

  xhr.send();
}

Obsługa wierszy nagłówkowych protokołu HTTP

Do realizacji zadania wykorzystamy plik ajax_text.py, ajax3.html i ajax3.js.

Plik "ajax_text.py" z skryptem w języku python.

Plik ajax_text.py - ( [listing dokumentu] [link do dokumentu]

#!/usr/bin/python3
import time
print ("Content-Type: text/plain")
print ("Expires: Wed, 23 Dec 1980 00:30:00 GMT")
print ("Last-Modified: %s GMT" % time.strftime("%a, %d %b %Y %H:%M:%S", time.gmtime()))
print ("Cache-Control: no-cache, no-store, max-age=0, must-revalidate")
print ("Pragma: no-cache")
print ()
print ("""\
Hello, AJAX, Time %s 
"""  % time.strftime("%a, %d %b %Y %H:%M:%S", time.gmtime()))

Plik "ajax3.html" z kodem HTML5.

Plik ajax3.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 3</title>
      <script src="ajax3c.js" type="text/javascript"></script>
   </head>
   <body>             
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Trzeci skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 1).

Plik ajax3a.js - ( [listing dokumentu] [link do dokumentu]

var xmlHttp;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       xmlHttp = getRequestObject() ;
       if (xmlHttp) {
         try {    
           xmlHttp.onreadystatechange = handleResponse ;
           xmlHttp.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_text.py", true);
           xmlHttp.send(null);
         }
         catch (e) {
           alert ("Nie mozna polaczyc sie z serwerem: " + e.toString()) ;
         }
       } else {
         alert ("Blad") ;
       }
  }
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xmlHttp.readyState == 1) {
           myDiv.innerHTML += "Status zadania: 1 (laduje)<br/>" ;
    } 
    else if (xmlHttp.readyState == 2) {
           myDiv.innerHTML += "Status zadania: 2 (zaladowany)<br/>" ;
    }
    else if (xmlHttp.readyState == 3) {
           myDiv.innerHTML += "Status zadania: 3 (interaktywny)<br/>" ;
    }
    else if (xmlHttp.readyState == 4) {
         if ( xmlHttp.status == 200 )  {
             response = xmlHttp.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xmlHttp.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 2).

Plik ajax3b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();
  var myDiv = document.getElementById("MyDivElement");
  xhr.open("GET", "../../cgi-bin/TI_2025/lab07/ajax_text.py", true);	
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
         myDiv.innerHTML += response + "<br/>";
         myDiv.innerHTML += "<pre>" + xhr.getAllResponseHeaders() + "</pre><br />" ;
    }
  })	  
  xhr.addEventListener("progress", e => {
     myDiv.innerHTML += "Status zadania: " + xhr.readyState + " (progress) <br/>" ;  
  });
 
  xhr.addEventListener("error", e => {
    alert("Nie udało się nawiązać połączenia");
  });

  xhr.send();
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (Fetch).

Plik ajax3c.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  var myDiv = document.getElementById("MyDivElement");
  var txt ='';
  var info ='';
  fetch("../../cgi-bin/TI_2025/lab07/ajax_text.py")
    .then(response => { 
            response.text().then( data => {
              // console.log(data);
              myDiv.innerHTML += data ;
            }) ;
            for (let [key, value] of response.headers) {
              txt += `${key} = ${value} <br/>`;
              // console.log(`${key} = ${value} <br/>`);             
            } 
            myDiv.innerHTML += txt  ;
    })
    .catch(error => console.log("Błąd: ", error)); 
}

Przesyłanie danych metodą GET protokołu HTTP

Do realizacji ćwiczenia wykorzystamy odpowiednio pliki: ajax_form.py, ajax4.html i ajax4.js.

Plik "ajax_form.py" z skryptem w języku python.

Plik ajax_form.py - ( [listing dokumentu] [link do dokumentu]

#!/usr/bin/python3
from os import environ
import cgi
import cgitb; cgitb.enable()
form = cgi.FieldStorage()
info = form.getvalue("info", "(no info)")
 
print ("Content-Type: text/html")
print ()
print ("""\
<p>Env:</p>
<table>
<tr><td>REQUEST_METHOD: </td><td>%s</td></tr>
<tr><td>QUERY_STRING: </td><td>%s</td></tr>
</table>
<p>Wartosc zmiennej 'info': %s</p>
""" %  (environ['REQUEST_METHOD'], environ['QUERY_STRING'], html.escape(info)))

Plik "ajax4.html" z kodem HTML5.

Plik ajax4.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 4</title>
      <script src="ajax4c.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Czwarty skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          Dowolny tekst: <input id="info" name="info" /><br />  
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 1).

Plik ajax4a.js - ( [listing dokumentu] [link do dokumentu]

var xmlHttp;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       xmlHttp = getRequestObject() ;
       if (xmlHttp) {
         try {
           var info = document.getElementById('info').value ;    
           var url = "../../cgi-bin/TI_2025/lab07/ajax_form.py" ;
           url += "?info=" + info;
           xmlHttp.onreadystatechange = handleResponse ;
           xmlHttp.open("GET", url, true);
           xmlHttp.send(null);
         }
         catch (e) {
           alert ("Nie mozna polaczyc sie z serwerem: " + e.toString()) ;
         }
       } else {
         alert ("Blad") ;
       }
  }
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xmlHttp.readyState == 4) {
         if ( xmlHttp.status == 200 )  {
             response = xmlHttp.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xmlHttp.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 2).

Plik ajax4b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();
  var myDiv = document.getElementById("MyDivElement");
  var info = document.getElementById('info').value ;    
  var url = "../../cgi-bin/TI_2025/lab07/ajax_form.py" ;
  url += "?info=" + info;
  xhr.open("GET", url, true);	
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
         myDiv.innerHTML += response + "<br/>";
         // myDiv.innerHTML += "<pre>" + xhr.getAllResponseHeaders() + "</pre><br />" ;
    }
  })	  
  xhr.addEventListener("progress", e => {
     myDiv.innerHTML += "Status zadania: " + xhr.readyState + " (progress) <br/>" ;  
  });
 
  xhr.addEventListener("error", e => {
    alert("Nie udało się nawiązać połączenia");
  });

  xhr.send();
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (Fetch).

Plik ajax4c.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  var myDiv = document.getElementById("MyDivElement");
  var info = document.getElementById('info').value ;    
  var url = "../../cgi-bin/TI_2025/lab07/ajax_form.py" ;
  url += "?info=" + info;  
  var txt ='';
  var info ='';
  fetch(url)
    .then(response => { 
            response.text().then( data => {
              // console.log(data);
              myDiv.innerHTML += data ;
            }) ;
            //for (let [key, value] of response.headers) {
            //  txt += `${key} = ${value} <br/>`;
            //  // console.log(`${key} = ${value} <br/>`);             
            //} 
            myDiv.innerHTML += txt  ;
    })
    .catch(error => console.log("Błąd: ", error)); 
}

Przesyłanie danych metodą POST prokołu HTTP

W ramach przykładu przedstawiono poprawną strukturę skryptów do obsługi metody POST. Do realizacji zadania wykorzystamy plik w języku python z poprzedniego zadania. Odpowiednie pliki w języku html i JavaScript przedstawiono poniżej.

Plik "ajax5.html" z kodem HTML5.

Plik ajax5.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 5</title>
      <script src="ajax5c.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Piaty skrypt</th></tr>
       </table>
       <br />
       <form action="#"  >
          Dowolny tekst: <input id="info" name="info" /><br />  
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 1).

Plik ajax5a.js - ( [listing dokumentu] [link do dokumentu]

var xmlHttp;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       xmlHttp = getRequestObject() ;
       if (xmlHttp) {
         try {
           var info = document.getElementById('info').value ;    
           var url = "../../cgi-bin/TI_2025/lab07/ajax_form.py" ;
           var data = "info=" + encodeURIComponent(info) ;
           xmlHttp.onreadystatechange = handleResponse ;
           xmlHttp.open("POST", url, true);
           xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
           xmlHttp.send(data);
         }
         catch (e) {
           alert ("Nie mozna polaczyc sie z serwerem: " + e.toString()) ;
         }
       } else {
         alert ("Blad") ;
       }
  }
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xmlHttp.readyState == 4) {
         if ( xmlHttp.status == 200 )  {
             response = xmlHttp.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xmlHttp.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 2).

Plik ajax5b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();
  var myDiv = document.getElementById("MyDivElement");
  var info = document.getElementById('info').value ;    
  var url = "../../cgi-bin/TI_2025/lab07/ajax_form.py" ;
  var data = encodeURI("info=" + info) ;

  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
         myDiv.innerHTML += response + "<br/>";
         // myDiv.innerHTML += xhr.getAllResponseHeaders() + "<br />" ;
    }
  })
  	  
  xhr.addEventListener("progress", e => {
     myDiv.innerHTML += "Status zadania: " + xhr.readyState + " (progress) <br/>" ;  
  });
 
  xhr.addEventListener("error", e => {
    alert("Nie udało się nawiązać połączenia");
  });

  xhr.send(data);
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (Fetch).

Plik ajax5c.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  var myDiv = document.getElementById("MyDivElement");
  var info = document.getElementById('info').value ;    
  var url = "../../cgi-bin/TI_2025/lab07/ajax_form.py" ;
  var data = encodeURI("info=" + info) ;
  var txt ='';
  var info ='';
  const headers = new Headers();
  headers.append("Content-type", "application/x-www-form-urlencoded");
  fetch(url, { method:"post", headers: headers, body: data } )
    .then(response => { 
            response.text().then( data => {
              info = data ;
              // console.log(data);
              myDiv.innerHTML += info ;
            }) ;
            //for (let [key, value] of response.headers) {
            //  txt += `${key} = ${value} <br/>`;
            //  // console.log(`${key} = ${value} <br/>`);             
            //} 
            myDiv.innerHTML += txt  ;
    })
    .catch(error => console.log("Błąd: ", error)); 
}

Przesyłanie danych XML z sewera z wykorzystaniem AJAX'a

W ramach zadania zaprezentowane zostanie poprawna konfiguracja skryptów po stronie serwera do przesyłania danych XML oraz skrypt w języku JavaScript przetwarzający po stronie klienta.

Plik "ajax_xml.py" z skryptem w języku python.

Plik ajax_xml.py - ( [listing dokumentu] [link do dokumentu]

#!/usr/bin/python3
print ("Content-Type: application/xml")
print ()
print ("""\
<?xml version=\"1.0\" ?>
<students>
 <student>
   <fname>Adam</fname>
   <lname>Abacki</lname>
 </student>
 <student>
   <fname>Bogdan</fname>
   <lname>Babacki</lname>
 </student> 
</students>
""")

Plik "ajax6.html" z kodem HTML5.

Plik ajax6.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 6</title>
      <script src="ajax6b.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Szosty skrypt</th></tr>
       </table>
       <br />
       <form action="#"  >
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 1).

Plik ajax6a.js - ( [listing dokumentu] [link do dokumentu]

var xmlHttp;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       xmlHttp = getRequestObject() ;
       if (xmlHttp) {
         try {
           var url = "../../cgi-bin/TI_2025/lab07/ajax_xml.py" ;
           xmlHttp.onreadystatechange = handleResponse ;
           xmlHttp.open("GET", url, true);
           xmlHttp.send(null);
         }
         catch (e) {
           alert ("Nie mozna polaczyc sie z serwerem: " + e.toString()) ;
         }
       } else {
         alert ("Blad") ;
       }
  }
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xmlHttp.readyState == 4) {
         if ( xmlHttp.status == 200 )  {
             response = xmlHttp.responseXML;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             var xmlRoot = response.documentElement ;
             var fnameArray = xmlRoot.getElementsByTagName('fname') ;
             var lnameArray = xmlRoot.getElementsByTagName('lname') ;
             var html = "" ;
             for ( var i=0; i<fnameArray.length; i++) 
                 html += fnameArray.item(i).firstChild.data + " " 
                       + lnameArray.item(i).firstChild.data + "<br/>" ;
             myDiv.innerHTML += html ;
             myDiv.innerHTML += "<pre>" + xmlHttp.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 2).

Plik ajax6b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();
  var myDiv = document.getElementById("MyDivElement");  
  var url = "../../cgi-bin/TI_2025/lab07/ajax_xml.py" ;
  xhr.open("GET", url, true);	
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.responseXML;
         myDiv.innerHTML += response + "<br/>" ;
         var xmlRoot = response.documentElement ;
         var fnameArray = xmlRoot.getElementsByTagName('fname') ;
         var lnameArray = xmlRoot.getElementsByTagName('lname') ;
         var html = "" ;
         for ( var i=0; i<fnameArray.length; i++) 
             html += fnameArray.item(i).firstChild.data + " " 
                  + lnameArray.item(i).firstChild.data + "<br/>" ;
         myDiv.innerHTML += html ;
         // myDiv.innerHTML += xmlHttp.getAllResponseHeaders() + "<br />" ;
         // myDiv.innerHTML += response + "<br/>";
         // myDiv.innerHTML += xhr.getAllResponseHeaders() + "<br />" ;
    }
  })	  
  xhr.addEventListener("progress", e => {
     myDiv.innerHTML += "Status zadania: " + xhr.readyState + " (progress) <br/>" ;  
  });
 
  xhr.addEventListener("error", e => {
    alert("Nie udało się nawiązać połączenia");
  });

  xhr.send();
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (Fetch).
Plik ajax6c.js - ( [listing dokumentu] [link do dokumentu]
```
  
```

Przesyłanie danych w formacie JSON

W ramach zadania zaprezentowane zostanie poprawna konfiguracja skryptów po stronie serwera i przeglądarki do przesyłania danych w formacie JSON. Do realizacji zadania wykorzystamy pliki: ajax_json.py, ajax7.html oraz ajax7a.js, ajax7b.js i ajax7c.js.

Plik "ajax_json.py" z skryptem w języku python.

Plik ajax_json.py - ( [listing dokumentu] [link do dokumentu]

#!/usr/bin/env python3
print ("Content-Type: application/json")
print ()
print ("""\
{"students" : [
{"fname":"Adam", "lname":"Abacki"},
{"fname":"Bogdan", "lname":"Babacki"}
]}
""")

Plik "ajax7.html" z kodem HTML5.

Plik ajax7.html - ( [listing dokumentu] [link do dokumentu]

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 7</title>
      <script src="ajax7c.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Siodmy skrypt</th></tr>
       </table>
       <br />
       <form action="#"  >
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 1).

Plik ajax7a.js - ( [listing dokumentu] [link do dokumentu]

var xmlHttp;
function getRequestObject()      {
       if ( window.ActiveXObject)  {
            return ( new ActiveXObject("Microsoft.XMLHTTP")) ;
        } else if (window.XMLHttpRequest)  {
           return (new XMLHttpRequest())  ;
        } else {
           return (null) ;
        }
  }
function sendRequest()      {
       xmlHttp = getRequestObject() ;
       if (xmlHttp) {
         try {
           var url = "../../cgi-bin/TI_2025/lab07/ajax_json.py" ;
           xmlHttp.onreadystatechange = handleResponse ;
           xmlHttp.open("GET", url, true);
           xmlHttp.send(null);
         }
         catch (e) {
           alert ("Nie mozna polaczyc sie z serwerem: " + e.toString()) ;
         }
       } else {
         alert ("Blad") ;
       }
  }
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xmlHttp.readyState == 4) {
         if ( xmlHttp.status == 200 )  {
             response = xmlHttp.response;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             var dataJSON  = JSON.parse(response) ;
             html = "" ;
             for ( var i=0; i<dataJSON.students.length ; i++)
               html += dataJSON.students[i].fname + " " + dataJSON.students[i].lname + "<br/>" ;
             myDiv.innerHTML += html ;
             myDiv.innetHTML += dataJSON + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xmlHttp.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (XHR level 2).

Plik ajax7b.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  const xhr = new XMLHttpRequest();
  var myDiv = document.getElementById("MyDivElement");  
  var url = "../../cgi-bin/TI_2025/lab07/ajax_json.py" ;
  xhr.open("GET", url, true);
  xhr.responseType = "json" ;	
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
         console.log(response);
         html = "" ;
         for ( let i=0; i<response.students.length ; i++)
               html += response.students[i].fname + " " + response.students[i].lname + "<br/>" ;
         myDiv.innerHTML += html ;
         // myDiv.innerHTML += xmlHttp.getAllResponseHeaders() + "<br />" ;
         // myDiv.innerHTML += response + "<br/>";
         // myDiv.innerHTML += xhr.getAllResponseHeaders() + "<br />" ;
    }
  })	  
  xhr.addEventListener("progress", e => {
     myDiv.innerHTML += "Status zadania: " + xhr.readyState + " (progress) <br/>" ;  
  });
 
  xhr.addEventListener("error", e => {
    alert("Nie udao si nawiza poczenia");
  });

  xhr.send();
}

Skrypt w języku JavaScript realizujący wymaganą funkcjonalność (Fetch).

Plik ajax7c.js - ( [listing dokumentu] [link do dokumentu]

function sendRequest() {
  var myDiv = document.getElementById("MyDivElement"); 
  var url = "../../cgi-bin/TI_2025/lab07/ajax_json.py" ;
  var txt ='';
  var info ='';
  fetch(url)
    .then(response => { 
            response.json().then( data => {
              html = "" ;
              for ( let i=0; i<data.students.length ; i++)
                html += data.students[i].fname + " " + data.students[i].lname + "<br/>" ;
              myDiv.innerHTML += html ;
            }) ;
            //for (let [key, value] of response.headers) {
            //  txt += `${key} = ${value} <br/>`;
            //  // console.log(`${key} = ${value} <br/>`);             
            //} 
            myDiv.innerHTML += txt  ;
    })
    .catch(error => console.log("Bd: ", error)); 
}

Linki do uruchomionych przykładów na serwerze Pascal (2025)

Linki dostępne z sieci wydziałowej.

Lab07 - Technologia AJAX, obiekt XHR i funkcja fetch() [ ver. TI.2025.11.11.004 ]

Plan zajęć

Środowisko testowe dla aplikacji AJAX

Pierwszy skrypt AJAX

Status silnika AJAX

Obsługa wierszy nagłówkowych protokołu HTTP

Przesyłanie danych metodą GET protokołu HTTP

Przesyłanie danych metodą POST prokołu HTTP

Przesyłanie danych XML z sewera z wykorzystaniem AJAX'a

Przesyłanie danych w formacie JSON

Linki do uruchomionych przykładów na serwerze Pascal (2025)

Linki do dodatkowych materiałów (dostęp na dzień 11.11.2025)