ForgeTotal.js 5
de

Total.js 5

Eine andere Adresse mit AJAX() vom Server aus aufrufen

Total.js 5 · total5@0.0.19 httprequestsajax Mit Total.js 5 ausgeführt

AJAX('METHOD url', [data], [callback]) führt eine HTTP-Anfrage aus und liefert dir die geparste Antwort. Es ist die Kurzform von REQUEST() für APIs, die JSON sprechen: derselbe Aufruf, den jComponent im Browser hat, sodass der Code der Seite und der des Servers sich ähneln.

  • Die Adresse beginnt mit einer optionalen Methode: AJAX('POST [https://example.com/api/'](https://example.com/api/'), data). Ohne Methode ist es ein GET.
  • data wird, wenn angegeben, als JSON-Body gesendet. Die Anfrage trägt den Header x-requested-with: XMLHttpRequest, sodass auf der anderen Seite $.xhr den Wert true hat.
  • Die Antwort wird nach ihrem Content-Type geparst: JSON wird zu einem Objekt, application/x-www-form-urlencoded wird zu einem Objekt, alles andere kommt als Text an.
  • Bei einem Status von 400 oder mehr wird das Promise abgelehnt (oder der Callback erhält zuerst den Fehler) mit dem geparsten Body der Antwort als Fehler. Ein Callback wird als callback(err, value, response) aufgerufen.
  • Ohne Callback gibt es ein Promise zurück.

Für XML-Antworten verwenden Sie REQUEST() und werten den Body selbst aus: AJAX() ist für JSON- und Textantworten gedacht.

Das Beispiel ruft Routen derselben Anwendung auf, deren Adresse $.hostname('/') liefert, sodass es keinen anderen Server braucht.

controllers/calls.js
exports.install = function() {
	ROUTE('GET /api/hello/', hello);
	ROUTE('POST /api/echo/', echo);
	ROUTE('GET /api/text/', text);
	ROUTE('GET /api/xml/', xml);
	ROUTE('GET /api/fail/', fail);
	ROUTE('GET /calls/', calls);
};

function hello($) {
	$.json({ hello: 'world', xhr: $.xhr });
}

function echo($) {
	$.json({ received: $.body, xhr: $.xhr });
}

function text($) {
	$.plain('plain text');
}

function xml($) {
	$.xml('<a><b>1</b></a>');
}

function fail($) {
	$.invalid('It is wrong');
}

async function calls($) {

	const base = $.hostname('/');
	const out = {};

	out.hello = await AJAX('GET ' + base + 'api/hello/');
	out.nomethod = await AJAX(base + 'api/hello/');
	out.echo = await AJAX('POST ' + base + 'api/echo/', { a: 1 });
	out.text = await AJAX(base + 'api/text/');

	try {
		await AJAX(base + 'api/fail/');
	} catch (err) {
		out.error = err.message || err;
	}

	out.callback = await new Promise(resolve => AJAX(base + 'api/hello/', (err, value, response) => resolve({ err: err, hello: value.hello, status: response.status })));

	out.xml = await Promise.race([
		AJAX(base + 'api/xml/').then(() => 'answered', () => 'rejected'),
		new Promise(resolve => setTimeout(() => resolve('never answered'), 1000))
	]);

	$.json(out);
}