HTTP-POST Request mit JavaScript

Häufig wird in Foren gefragt, wie man mit JavaScript gezielt Daten über einen HTTP-Request an eine bestimmte Datei senden kann. Weil dieser Vorgang in der Web-Entwicklung besonders wichtig ist, habe ich ein kurzes Beispiel programmiert, dass diese Funktionalität besitzt.

Einleitung:

In meinem Beispiel kann in einem HTML-Formular (eingabe.html) ein Vor -und Nachname eingegeben. Mit einem Klick auf den ‚Abschicken‚-Link wird dann eine JavaScript-Funktion (anfrage_abschicken()) aufgerufen, die den Vor -und Nachnamen als Variablen (vor, nach) über einen HTTP-POST Request an eine PHP-Datei schickt. Die PHP-Datei (verarbeitung.php) empfängt dann die Daten und speichert sie in einer Textdatei auf der lokalen Festplatte.

Quellcode:

eingabe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
	<head>
		<title>HTTP-Request absenden</title>
		<script type="text/javascript" src="abschicken.js"></script>
	</head>
	<body>
		<input id="vorname" size="30" maxlength="40" />
		<input id="nachname" size="30" maxlength="50" />
		<a href="#" onclick="anfrage_abschicken()">Abschicken</a>
		<div id="status">
			Bitte auf 'Abschicken' drücken.
		</div>
	</body>
</html>

abschicken.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

function anfrage_abschicken()
{		
	// Browserkompatibles Request-Objekt erzeugen:
	r = null;
 
	if(window.XMLHttpRequest)
	{
		r = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		try
		{
			r = new ActiveXObject('Msxml2.XMLHTTP');
		}
		catch(e1)
		{
			try
			{
				r = new ActiveXObject('Microsoft.XMLHTTP');
			}
			catch(e2)
			{
				document.getElementById('status').innerHTML = 
				"Request nicht möglich.";
			}
		}		
	}
 
	// Wenn Request-Objekt vorhanden, dann Anfrage senden:
	if(r != null)
	{
		var vorname = window.document.getElementById('vorname').value;
		var nachname = window.document.getElementById('nachname').value;
 
		// HTTP-POST
		r.open('POST', 'http://localhost/js/verarbeitung.php', true);
		r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		r.send('vor='+vorname+'&nach='+nachname);
 
		window.document.getElementById('status').innerHTML = 'Request gesendet.';
	}
}

verarbeitung.php

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
	// Datei, in die die empfangenen Daten gespeichert werden sollen:
	$datei = 'C:\\xampp\\htdocs\\js\\data.txt';
 
	// Empfangene Daten:
	$vorname = $_POST['vor'];
	$nachname = $_POST['nach'];
 
	$empfangen = $vorname.' '.$nachname;
 
	// Daten in Datei speichern:
	file_put_contents($datei, $empfangen);
?>

Hinweis: Bitte vergesst nicht beim Abtippen des Quellcodes die Dateipfade anzupassen!

3 Gedanken zu „HTTP-POST Request mit JavaScript“

  1. Hallo Benny,
    gutes Blog, viele nützliche Infos – danke!
    Da du dich intensiv mit Webentwicklung beschäftigst: könntest du vielleicht mal ein Auge auf unser jQuery Plugin werfen ?! (komprimiert die Daten vor dem Versenden per AJAX-Post).
    Wäre nett, von dir zu hören…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.