{"id":322,"date":"2023-01-22T14:27:00","date_gmt":"2023-01-22T13:27:00","guid":{"rendered":"https:\/\/securityeye.wordifysites.com\/?p=322"},"modified":"2024-02-23T11:58:12","modified_gmt":"2024-02-23T10:58:12","slug":"ajax-and-xmlhttprequest","status":"publish","type":"post","link":"https:\/\/swissmakers.ch\/en\/ajax-und-xmlhttprequest\/","title":{"rendered":"The Ajax and XMLHttpRequest technology"},"content":{"rendered":"\n

Ajax<\/strong> und XMLHttpRequest <\/strong>sind Technologien, die es erm\u00f6glichen, Daten vom Server zu laden und die Benutzeroberfl\u00e4che dynamisch zu aktualisieren, ohne die gesamte Seite neu zu laden.<\/p>\n\n\n\n

Ajax <\/strong>wird haupts\u00e4chlich mit jQuery<\/strong> verwendet und bietet eine einfache M\u00f6glichkeit, asynchrone Anfragen durchzuf\u00fchren und die Antworten zu verarbeiten. Es ist jedoch auch m\u00f6glich, Ajax ohne jQuery zu verwenden, indem man das XMLHttpRequest-Objekt direkt verwendet.<\/p>\n\n\n\n

XMLHttpRequest <\/strong>erm\u00f6glicht es Ihnen, tiefer in die Verarbeitung von Anfragen und Antworten einzusteigen und mehr Kontrolle \u00fcber den Request und die Antwort zu haben. Es erm\u00f6glicht auch die Verarbeitung von Daten in verschiedenen Formaten wie Text, JSON oder ArrayBuffer.<\/p>\n\n\n\n

\n

Beide Technologien verbessern die Benutzererfahrung und erm\u00f6glichen es, komplexere Funktionalit\u00e4ten in Web-Anwendungen zu implementieren.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

Ein Beispiel mit Ajax<\/h2>\n\n\n\n

Im folgenden Beispiel verwenden wir jQuery<\/strong>, um einen GET-Request<\/strong> an die Datei «content.php<\/code>» zu senden und das Ergebnis in einem Div-Element<\/strong> anzuzeigen:<\/p>\n\n\n\n

<div id=\"result\"><\/div>\n\n<script>\nsetInterval(function() {\n    $.ajax({\n        type: \"GET\",\n        url: \"content.php\",\n        success: function(response) {\n            $(\"#result\").html(response);\n        }\n    });\n}, 1000);\n<\/script><\/code><\/pre>\n\n\n\n
Die Funktion setInterval<\/code> sendet alle 1000 Millisekunden<\/strong> (jede Sekunde) einen GET<\/code>-Request<\/strong> an die Datei «content.php<\/code>«. Wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element mit der ID <\/strong>#result<\/code> eingef\u00fcgt.<\/p>\n\n\n\n
Damit etwas angezeigt wird, muss die «content.php<\/code>» einen return value<\/code> geben. Als einfaches Beispiel kann somit der nachfolgende Text in die Datei geschrieben werden, um die Antwort korrekt bearbeiten zu k\u00f6nnen:<\/p>\n\n\n\n
<?php\necho \"Dynamischer Inhalt, der zur\u00fcckgegeben wird.\";\n?><\/code><\/pre>\n\n\n\n
Es handelt sich hier um ein sehr minimales Beispiel, aber es zeigt, wie einfach es ist, eine Benutzeroberfl\u00e4che mit Ajax dynamisch zu aktualisieren. Sie k\u00f6nnen auch Daten an einen Server senden und dessen Antwort verarbeiten, um eine komplexere Funktionalit\u00e4t zu implementieren.<\/p>\n\n\n\n
Ein Beispiel mit XMLHttpRequest<\/h2>\n\n\n\n
Das folgende Beispiel verwendet ein XMLHttpRequest-Objekt<\/strong>, um die Systemzeit<\/strong> und die CPU-Auslastung<\/strong> eines Servers abzufragen. Das Ergebnis wird dann erneut in einem Div-Element<\/strong> angezeigt:<\/p>\n\n\n\n
<div id=\"result\"><\/div>\n\n<script>\nsetInterval(function() {\n    var xhr = new XMLHttpRequest();\n    xhr.open(\"GET\", \"serverinfo.php\", true);\n    xhr.onreadystatechange = function() {\n        if (xhr.readyState === 4 && xhr.status === 200) {\n            var response = JSON.parse(xhr.responseText);\n            document.getElementById(\"result\").innerHTML = \"Systemzeit: \" + response.time + \"<br> CPU Auslastung: \" + response.cpu + \"%\";\n        }\n    }\n    xhr.send();\n}, 1000);\n<\/script><\/code><\/pre>\n\n\n\n
Die Funktion setInterval<\/code> sendet auch hier alle 1000 Millisekunden<\/strong> (jede Sekunde) einen GET<\/code>-Request<\/strong> an die Datei «serverinfo.php<\/code>«. Immer wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element<\/strong> mit der ID<\/strong> #result<\/code> erneut eingef\u00fcgt \/ aktualisiert.<\/p>\n\n\n\n
Die serverinfo.php<\/code> muss, damit alles funktioniert, wie folgt aussehen:<\/p>\n\n\n\n
<?php\n$response = array();\n$response['time'] = date(\"Y-m-d H:i:s\");\n$response['cpu'] = sys_getloadavg()[0] * 100;\necho json_encode($response);\n?><\/code><\/pre>\n\n\n\n
Der Vorteil <\/strong>von XMLHttpRequest<\/strong> gegen\u00fcber jQuery.ajax<\/strong> besteht darin, dass es mehr Kontrolle \u00fcber <\/strong>den Request sowie <\/strong>die Antwort<\/strong> gibt. Als Beispiel kann mit einem XML-Request zus\u00e4tzlich zum ajax-Request der readyState<\/code> sowie der status<\/code> des Requests \u00fcberpr\u00fcft<\/strong>, werden. So kann sichergestellt werden, dass die Antwort valide ist, bevor sie verarbeitet wird. Ausserdem kann die Antwort auch direkt als Text oder sogar als ArrayBuffer<\/code> erhalten und verarbeiten werden, anstatt sie zuerst in ein JSON-Objekt<\/strong> konvertieren zu m\u00fcssen.<\/p>\n\n\n\n
Beispiel eines all-in-one PHP files – XMLHttpRequest<\/h2>\n\n\n\n
Das folgende Beispiel soll aufzeigen, wie eine einzelne<\/strong> «index.php<\/code>» Datei sowohl die Anfrage als auch die Antwort f\u00fcr eine dynamische Aktualisierung von Metriken eines Linux-Servers verarbeitet.<\/strong> Diese Datei verwendet das XMLHttpRequest-Objekt<\/strong>, um sich selbst alle 5 Sekunden<\/strong> anhand eines GET<\/code>-Requests abzufragen. Die Metriken werden dann wieder im Div-Element<\/strong> mit der ID<\/strong> #result<\/code> angezeigt.<\/p>\n\n\n\n
<div id=\"result\"><\/div>\n\n<script>\nsetInterval(function() {\n    var xhr = new XMLHttpRequest();\n    xhr.open(\"GET\", \"index.php?metrics=true\", true);\n    xhr.onreadystatechange = function() {\n        if (xhr.readyState === 4 && xhr.status === 200) {\n            document.getElementById(\"result\").innerHTML = xhr.responseText;\n        }\n    }\n    xhr.send();\n}, 5000);\n<\/script>\n\n<?php\nif (isset($_GET['metrics']) && $_GET['metrics'] == 'true') {\n    $cpu = sys_getloadavg()[0] * 100;\n    $memory = round(shell_exec(\"free | grep Mem | awk '{print $3\/$2 * 100.0}'\"), 2);\n    $disk = round(shell_exec(\"df -h \/ | awk '{print $5}'\"), 2);\n    echo \"CPU Auslastung: \" . $cpu . \"%<br>\";\n    echo \"Speicher Auslastung: \" . $memory . \"%<br>\";\n    echo \"Festplatten Auslastung: \" . $disk . \"%<br>\";\n    exit();\n}\n?><\/code><\/pre>\n\n\n\n
Die setInterval<\/code> <\/strong>Funktion alle 5 Sekunden<\/strong> (5000 Millisekunden) einen <\/strong>GET<\/code>-Request<\/strong> mit dem Parameter «metrics=true<\/code>» an die Datei «index.php<\/code>«. Nur wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element<\/strong> mit der ID<\/strong> #result<\/code> eingef\u00fcgt.<\/p>\n\n\n\n
Die PHP-Abfrage pr\u00fcft, ob der Parameter «metrics<\/code>» mit dem Wert true<\/code> gesetzt wurde und berechnet dann die CPU-Auslastung, Speicher-Auslastung und die Festplatten-Auslastung des Servers. Die Ergebnisse werden zur\u00fcckgegeben und die Ausf\u00fchrung der Skripts wird beendet.<\/p>\n\n\n\n
Auch dieses Beispiel wurde sehr trivial gehalten. Es soll ein einfaches Beispiel sein, das aufzeigt, dass  es auch umfangreichere M\u00f6glichkeiten gibt, Metriken aus einem Server zu sammeln und darzustellen. Es ist dabei auch wichtig, dass die serverseitigen Anfragen stets sicher gestaltet werden, um unbefugte Zugriffe zu vermeiden.<\/p>\n\n\n\n
Fazit<\/h2>\n\n\n\n
Ajax <\/strong>als sowohl auch XMLHttpRequest<\/strong> sind n\u00fctzliche Technologien f\u00fcr die Entwicklung von dynamischen und interaktiven Web-Anwendungen. W\u00e4hrend Ajax<\/strong> eine einfachere M\u00f6glichkeit bietet, Anfragen durchzuf\u00fchren und die Antworten zu verarbeiten<\/strong>, bietet XMLHttpRequest<\/strong> mehr Kontrolle und Flexibilit\u00e4t<\/strong> \u00fcber die Request \/ Response.<\/p>\n\n\n\n
Letztendlich h\u00e4ngt die Wahl der Technologie von den Anforderungen und Pr\u00e4ferenzen des Entwicklers ab.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ajax and XMLHttpRequest are technologies that make it possible to load data from the server and to ... <\/p>\n
Read more<\/a><\/p>","protected":false},"author":2,"featured_media":1537,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"categories":[50,25],"tags":[57,38,58],"class_list":["post-322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-webserver","tag-ajax","tag-programming","tag-xml-request","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","resize-featured-image"],"taxonomy_info":{"category":[{"value":50,"label":"Programming"},{"value":25,"label":"Webserver"}],"post_tag":[{"value":57,"label":"ajax"},{"value":38,"label":"programming"},{"value":58,"label":"xml-request"}]},"featured_image_src_large":["https:\/\/swissmakers.ch\/wp-content\/uploads\/2022\/03\/AdobeStock_297078136-scaled-1-1024x576.webp",1024,576,true],"author_info":{"display_name":"Michael Reber","author_link":"https:\/\/swissmakers.ch\/en\/author\/michael\/"},"comment_info":0,"category_info":[{"term_id":50,"name":"Programming","slug":"programming","term_group":0,"term_taxonomy_id":50,"taxonomy":"category","description":"","parent":0,"count":2,"filter":"raw","cat_ID":50,"category_count":2,"category_description":"","cat_name":"Programming","category_nicename":"programming","category_parent":0},{"term_id":25,"name":"Webserver","slug":"webserver","term_group":0,"term_taxonomy_id":25,"taxonomy":"category","description":"","parent":0,"count":3,"filter":"raw","cat_ID":25,"category_count":3,"category_description":"","cat_name":"Webserver","category_nicename":"webserver","category_parent":0}],"tag_info":[{"term_id":57,"name":"ajax","slug":"ajax","term_group":0,"term_taxonomy_id":57,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":38,"name":"programming","slug":"programming","term_group":0,"term_taxonomy_id":38,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":58,"name":"xml-request","slug":"xml-request","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"}],"_links":{"self":[{"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/posts\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":19,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":6902,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/posts\/322\/revisions\/6902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/media\/1537"}],"wp:attachment":[{"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/swissmakers.ch\/en\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}