_ 3.4.3 Halv-duplex klientinitierad kommunikation med webbservern inom domän

Uppgiften introducerar till hur man från JavaScript sänder och tar emot information till/från den egna webbservern. Denna teknik kallas för Ajax.

__ Uppgift

Gör ett JavaScript-program som implementerar ett system som använder §XMLHttpRequest§-objektet för att sända och hämta information till/från den egna webbserversidan och visar svaret för användaren utan omladdning av sidan.

Man ska alltså visa ny information på sin HTML-sida som hämtats av JavaScript (från serversidan) i bakgrunden (utan att sidan laddas om). JavaScript-programmet som gör det ska även sända med information till programmet på serversidan som genererar informationen.

Alla JavaScript-program ska följa kraven under sidan [Krav, 05_ass/requirements/ip3.txt].

__ Exempel

Inget exempel ges.

__ Tips

Notera att man normalt enbart kan ansluta till samma ställe/domän som HTML-dokumentet kommer från på grund av säkerhetsproblemet cross-site scripting (XSS).

Man kan använda följande PHP-program (på webbserversidan) som tar två argument som input (namngivna §number1§ och §number2§) och som svarar med summan av dessa:

§
https://people.dsv.su.se/~pierre/i/05_ass/ip3/3/3.4/3.4.3/example.php
§

För att sända med information till detta PHP-program så lägger man till (två namn-värde par):

§
?number1=123&number2=456
§

Man får då alltså:

§
https://people.dsv.su.se/~pierre/i/05_ass/ip3/3/3.4/3.4.3/example.php?number1=123&number2=456
§

Vilket ger svaret §579§. Talen §123§ och §456§ är givetvis bara exempel.

PHP-koden för de som vill testa på en annan webbserver:

§
<?php
  $num1 = $_GET['number1'];
  $num2 = $_GET['number2'];
  $sum = $num1 + $num2;

  echo $sum;
?>
§

Just detta program fungerar även från andra domäner eftersom det är öppnat med:

§
header('Access-Control-Allow-Origin: *');
§

Detta ska man i regel undvika.

Detta exempel använder oformaterad text men man kan även bygga något där webbserversidan svarar med formaterad text (HTML) för att exempelvis möjliggöra visning av olika bilder.

Man kan även använda JSON för att sända och ta emot mer sammansatt information till/från webbserversidan. På webbserversidan har exempelvis PHP inbyggda funktioner §json_decode§ och §json_encode§ som man kan använda.

Man kan även bygga något som använder polling genom att låta JavaScript med jämna mellanrum anropa webbserversidan (med hjälp av metoderna §window.setInterval§ eller §window.setTimeout§) och visa upp resultatet för användaren om en ändring har skett.

__ Hjälp

~ 05_ass/help/01.txt

>
[Klicka här för hjälp, helper.dsv@gmail.com, Webbutv I: 3.4.3 Halv-duplex klientinitierad kommunikation med webbservern inom domän: http://people.dsv.su.se/~pierre/i/i.cgi?href=05_ass/ip3/3.4.3.txt] ½===system_tutoring_message===½
<

~ 05_ass/help/02.txt