Cele ćwiczenia
Uwaga: Przykładowe listingi zawierające przestarzałą składnię JavaScriptu będą działać w przeglądarce IE 8.0, i to nie zawsze. W pozostałych przeglądarkach przykładowe skrypty mogą działać albo nie działać. Znalezienie przykładów działających w najpopularniejszych przeglądarkach nie powinno stanowić problemu.
1. Utwórz nową witrynę szablonu ASP.NET Web Site.
2. Dodaj do witryny stronę szablonu HTML Page sumującą, po kliknięciu przycisku dwie liczby wpisane do kontrolek tekstowych i umieszczającą wynik w etykiecie, którą trzeba dodać do strony – listing 1.
Listing 1. Kod JavaScript obsługi zdarzenia dodającego dwie liczby
function Button1_onclick() {
var x1, x2, y;
x1 = Number(Text1.value);
x2 = Number(Text2.value);
y = x1 + x2;
wynik.innerHTML = y;
}
3. Uruchom stronę i przetestuj jej działanie.
1. Dodaj do witryny stronę HTML.
2. Umieść na stronie przycisk, którego kliknięcie spowoduje dodanie do strony tabeli o liczbie wierszy i kolumn wpisanych do kontrolek tekstowych. W komórkach tabeli umieść tekst zawierający numer wiersza i kolumny – listing 2.
Listing 2. Kod JavaScript dynamicznie dodający do dokumentu tabelę o liczbie wierszy i kolumn wpisanych do kontrolek tekstowych
function Button1_onclick() {
var lw = Number(Text1.value);
var lk = Number(Text2.value);
var tabela, wiersz, cela, tekst;
tabela = document.createElement("table");
tabela.setAttribute("border", "solid");
document.body.appendChild(tabela);
for (var w = 0; w < lw; w++) {
wiersz = document.createElement("tr");
tabela.appendChild(wiersz);
for (var k = 0; k < lk; k++) {
cela = document.createElement("td");
wiersz.appendChild(cela);
tekst = document.createTextNode();
cela.appendChild(tekst);
tekst.nodeValue = "Cela " + w.toString()+k.toString();
}
}
}
3. Przetestuj działanie strony.
Do komunikacji zostaną stworzone 2 strony
Strona usługi otrzymuje dowolna liczbę parametrów i odsyła tekst zawierający
1. Dodaj do witryny stronę usluga1.aspx.
2. W funkcji PageLoad dodaj kod umieszczający w obiekcie odpowiedzi Response komunikaty oraz parametry żądania przesłane metodami GET i POST – listing 3.
Listing 3. Kod umieszczający w obiekcie Response komunikaty i parametry żądania przesłane metodami GET i POST
Response.Write(DateTime.Now.ToLongDateString());
Response.Write(" godzina: "+ DateTime.Now.ToLongTimeString()+"<br />");
Response.Write("<br />Parametry przesłane metodą GET<br />");
for (int i = 0; i < Request.QueryString.Count; i++)
{
Response.Write("Indeks : " + i.ToString() + "<br />");
Response.Write("Nazwa : " + Request.QueryString.GetKey(i) + "<br />");
Response.Write("Ilość : " + Request.QueryString.GetValues(i).Length.ToString() + "<br />");
for (int j = 0; j < Request.QueryString.GetValues(i).Length; j++)
Response.Write("Wartość:" + Request.QueryString.GetValues(i)[j] + "<br />");
}
Response.Write("<br />Parametry przesłane metodą POST<br />");
for (int i = 0; i < Request.Form.Count; i++)
{
Response.Write("Indeks : " + i.ToString() + "<br />");
Response.Write("Nazwa : " + Request.Form.GetKey(i) + "<br />");
Response.Write("Ilość : " + Request.Form.GetValues(i).Length.ToString() + "<br />");
for (int j = 0; j < Request.Form.GetValues(i).Length; j++)
Response.Write("Wartość:" + Request.Form.GetValues(i)[j] + "<br />");
}
Response.Write("<br />Pozdrowienia od serwera");
Response.End();
3. Utwórz stronę odbiornik_synchr.htm, która po kliknięciu przycisku łączy się synchronicznie z usługą po czym otrzymany tekst umieszcza w etykiecie etykieta – listing 4.
Listing 4. Kod funkcji tworzącej obiekt XMLHttpRequest oraz funkcji łączącej się synchronicznie z usługą i umieszczającej zwrócony tekst w etykiecie
function getXMLHTTP() {
var XMLHTTP = null;
if (window.ActiveXObject) {
try {
XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
} else if (window.XMLHttpRequest) {
try {
XMLHTTP = new XMLHttpRequest();
} catch (e) {
}
}
return XMLHTTP;
}
function Button1_onclick() {
var XMLHTTP = getXMLHTTP();
if (XMLHTTP != null) {
XMLHTTP.open("POST", "usluga1.aspx?xxx=12345",false);
XMLHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
XMLHTTP.send("x1=111&x1=9999&x1=777");
etykieta.innerHTML = XMLHTTP.responseText;
}
}
4. Przetestuj działanie strony, sprawdź aktualizację wyników.
5. Utwórz stronę odbiornik_asynchr.htm, która po kliknięciu przycisku łączy się asynchronicznie z usługą, po czym otrzymany tekst umieszcza w etykiecie etykieta – listing 5.
Listing 5. Asynchroniczne połączenie z usługą
var XMLHTTP = getXMLHTTP();
function zmiana() {
if(XMLHTTP.readyState == 4 && XMLHTTP.status == 200)
etykieta.innerHTML = XMLHTTP.responseText;
}
function Button1_onclick() {
if (XMLHTTP != null) {
XMLHTTP.open("POST", "usluga1.aspx?xxx=12345");
XMLHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
XMLHTTP.onreadystatechange = zmiana;
XMLHTTP.send("x1=111&x1=9999&x1=777");
}
}
6. Przetestuj działanie strony, sprawdź aktualizację wyników.
7. Dodaj do stron odbiornik_synchr.htm oraz odbiornik_asynchr.htm przesyłanie do usługi parametrów pochodzących z kontrolek tekstowych umieszczonych na stronie.
8. Dodaj do witryny plik z dowolnym tekstem i odczytaj go za pomocą stron odbiornik_synchr.htm oraz odbiornik_asynchr.htm.
9. Dodaj do witryny plik z dowolną treścią HTML i odczytaj ją za pomocą stron odbiornik_synchr.htm oraz odbiornik_asynchr.htm.
1. Dodaj do witryny stronę XML.
2. Dodaj do strony treść zawierającą dane studentów – listing 6.
Listing 6. Przykładowa treść strony XML zawierający dane studentów
<?xml version="1.0" encoding="utf-8" ?>
<informatyka>
<IIrok id="IIrok">
<student nazwisko="Kowalski2" imię="Jan" />
<student nazwisko="Nowak2" imię="Piotr" />
<student nazwisko="Kowal2" imię="Stefan" />
<student nazwisko="Widak2" imię="Igor" />
</IIrok>
<IIIrok>
<student nazwisko="Kowalski3" imię="Jan" />
<student nazwisko="Nowak3" imię="Piotr" />
<student nazwisko="Kowal3" imię="Stefan" />
<student nazwisko="Widak3" imię="Igor" />
</IIIrok>
</informatyka>
3. Utwórz stronę czytającą dane studentów i umieszczającą dane studentów w etykiecie, najpierw wszystkich razem, następnie w rozbiciu na lata – listing 7.
Listing 7. Kod czytania treści strony XML
function Button1_onclick() {
var XMLHTTP = getXMLHTTP();
if (XMLHTTP != null) {
XMLHTTP.open("GET", "XMLFile.xml",false);
XMLHTTP.send(null);
}
var xml = XMLHTTP.responseXML;
var studenci = xml.getElementsByTagName("student");
etykieta.innerHTML = "<H3>Wszyscy studenci</H3>";
for (var i = 0; i < studenci.length; i++) {
etykieta.innerHTML += studenci[i].getAttribute("nazwisko") + " ";
etykieta.innerHTML += studenci[i].getAttribute("imię") + "<br />";
}
etykieta.innerHTML += "<H3>Studenci latami</H3>";
etykieta.innerHTML += "<H4>II rok </H4>";
var IIrok = xml.getElementsByTagName("IIrok")[0];
for (var i = 0; i < IIrok.childNodes.length; i++) {
etykieta.innerHTML += IIrok.childNodes[i].getAttribute("nazwisko") + " ";
etykieta.innerHTML += IIrok.childNodes[i].getAttribute("imię") + "<br />";
}
etykieta.innerHTML += "<H4>III rok </H4>";
var IIrok = xml.getElementsByTagName("IIIrok")[0];
for (var i = 0; i < IIrok.childNodes.length; i++) {
etykieta.innerHTML += IIrok.childNodes[i].getAttribute("nazwisko") + " ";
etykieta.innerHTML += IIrok.childNodes[i].getAttribute("imię") + "<br />";
}
}