A. Introducción

Este ejemplo envía y recibe datos JSON.
Muchos servicios de Internet utilizan esta forma de comunicación.
Puedes probar el ejemplo en https://replit.com/@GilbertoPachec5/srvjson?v=1. Hazle fork al proyecto y córrelo.

B. La función `enviaJson`

Se introduce la función enviaJson, que convierte un dato en una cadena JSON y la manda desde el navegador web hacia el servidor.
Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la URL, los datos y el método de envío, que por omisión es POST.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

C. La función `leeJson`

Para que los servicios en el servidor puedan leer un texto en formato JSON, se introduce la función leeJson, escrita en PHP.
Para usarla, debes importarla con require o require_once, invocarla y recibir la referencia al objeto recibido.
A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

D. Diagrama de despliegue

E. Funcionamiento

Versión para imprimir.

1. Iniciamos al ejecutar código en el cliente

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

2. Se crea la literal de objeto

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Memoria

datos

saludo: "Hola"
nombre: "pp"

3. Se invoca el servicio en el servidor

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Ejecuta fetch y envía
request (solicitud).

Memoria

datos

saludo: "Hola"
nombre: "pp"

Request

URL: srv/json.php
Method: POST
body: {"saludo":"Hola","nombre":"pp"}

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Despierta y recibe request.

4. El servicio lee los datos

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Hace wait esperando response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Request

URL: srv/json.php
Method: POST
body: {"saludo":"Hola","nombre":"pp"}

Memoria (Servidor)

$json

saludo: "Hola"
nombre: "pp"

$saludo

"Hola"

$nombre

"pp"

5. El servicio procesa los datos

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Hace wait esperando response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Memoria (Servidor)

$json

saludo: "Hola"
nombre: "pp"

$saludo

"Hola"

$nombre

"pp"

$resultado

"Hola pp."

6. El servicio genera la response

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Hace wait esperando response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Memoria (Servidor)

$json

saludo: "Hola"
nombre: "pp"

$saludo

"Hola"

$nombre

"pp"

$resultado

"Hola pp."

Response

code: 200
body: "Hola pp."

7. El servicio devuelve la response, que es recibida en el cliente

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Despierta y recibe response.

Memoria

datos

saludo: "Hola"
nombre: "pp"

respuesta

status: 200
body: "Hola pp."

Response

code: 200
body: "Hola pp."

srv/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Devuelve response y se duerme.

8. Muestra el valor recibido recibido en un alert

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

Memoria

datos

saludo: "Hola"
nombre: "pp"

respuesta

status: 200
body: "Hola pp."

Alert

Hola pp.

9. Al cerrar el alert, termina el evento

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

H. index.html


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Servicio que recibe y devuelve JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>Servicio que recibe y devuelve JSON</h1>
16
17	<p><button onclick="envia()">Envía JSON</button></p>
18
19	<script type="module">
20
21	import { muestraError } from "./lib/js/muestraError.js"
22	import { enviaJson } from "./lib/js/enviaJson.js"
23
24	async function envia() {
25	try {
26	const datos = {
27	saludo: "Hola",
28	nombre: "pp"
29	}
30	const respuesta =
31	await enviaJson(
32	"srv/json.php", datos)
33	alert(respuesta.body)
34	} catch (error) {
35	muestraError(error)
36	}
37	}
38	// Permite que los eventos de html usen la función.
39	window["envia"] = envia
40
41	</script>
42
43	</body>
44
45	</html>

I. Carpeta « srv »

Versión para imprimir.

A. srv / json.php


1	<?php
2
3	require_once __DIR__ . "/../lib/php/ejecutaServicio.php";
4	require_once __DIR__ . "/../lib/php/leeJson.php";
5
6	ejecutaServicio(function () {
7	$json = leeJson();
8	$saludo = $json->saludo;
9	$nombre = $json->nombre;
10	$resultado =
11	"{$saludo} {$nombre}.";
12	return $resultado;
13	});
14

J. Carpeta « lib »

Versión para imprimir.

A. Carpeta « lib / js »

Versión para imprimir.

1. lib / js / enviaJson.js


1	import { invocaServicio } from "./invocaServicio.js"
2
3	/**
4	* @param { string } url
5	* @param { Object } body
6	* @param { "GET" \| "POST"\| "PUT" \| "PATCH" \| "DELETE" \| "TRACE" \| "OPTIONS"
7	* \| "CONNECT" \| "HEAD" } metodoHttp
8	*/
9	export async function enviaJson(url, body, metodoHttp = "POST") {
10	return await invocaServicio(fetch(url, {
11	method: metodoHttp,
12	headers: {
13	"Content-Type": "application/json",
14	"Accept": "application/json, application/problem+json"
15	},
16	body: JSON.stringify(body)
17	}))
18	}
19
20	// Permite que los eventos de html usen la función.
21	window["enviaJson"] = enviaJson

2. lib / js / invocaServicio.js


1	import {
2	JsonResponse, JsonResponse_Created, JsonResponse_NoContent, JsonResponse_OK
3	} from "./JsonResponse.js"
4	import {
5	ProblemDetails, ProblemDetails_InternalServerError
6	} from "./ProblemDetails.js"
7
8	/**
9	* Espera a que la promesa de un fetch termine. Si
10	* hay error, lanza una excepción. Si no hay error,
11	* interpreta la respuesta del servidor como JSON y
12	* la convierte en una literal de objeto.
13	* @param { string \| Promise<Response> } servicio
14	*/
15	export async function invocaServicio(servicio) {
16	let f = servicio
17	if (typeof servicio === "string") {
18	f = fetch(servicio, {
19	headers: { "Accept": "application/json, application/problem+json" }
20	})
21	} else if (!(f instanceof Promise)) {
22	throw new Error("Servicio de tipo incorrecto.")
23	}
24	const respuesta = await f
25	if (respuesta.ok) {
26	if (respuesta.status === JsonResponse_NoContent) {
27	return new JsonResponse(JsonResponse_NoContent)
28	}
29	const texto = await respuesta.text()
30	try {
31	const body = JSON.parse(texto)
32	if (respuesta.status === JsonResponse_Created) {
33	const location = respuesta.headers.get("location")
34	return new JsonResponse(JsonResponse_Created, body,
35	location === null ? undefined : location)
36	} else {
37	return new JsonResponse(JsonResponse_OK, body)
38	}
39	} catch (error) {
40	// El contenido no es JSON. Probablemente sea texto.
41	throw new ProblemDetails(ProblemDetails_InternalServerError,
42	"Problema interno en el servidor.", texto)
43	}
44	} else {
45	const texto = await respuesta.text()
46	try {
47	const { type, title, detail } = JSON.parse(texto)
48	throw new ProblemDetails(respuesta.status,
49	typeof title === "string" ? title : "",
50	typeof detail === "string" ? detail : undefined,
51	typeof type === "string" ? type : undefined)
52	} catch (error) {
53	if (error instanceof ProblemDetails) {
54	throw error
55	} else {
56	// El contenido no es JSON. Probablemente sea texto.
57	throw new ProblemDetails(respuesta.status, respuesta.statusText, texto)
58	}
59	}
60	}
61	}
62
63	// Permite que los eventos de html usen la función.
64	window["invocaServicio"] = invocaServicio

3. lib / js / JsonResponse.js


1	export const JsonResponse_OK = 200
2	export const JsonResponse_Created = 201
3	export const JsonResponse_NoContent = 204
4
5	export class JsonResponse {
6
7	/**
8	* @param {number} status
9	* @param {any} [body]
10	* @param {string} [location]
11	*/
12	constructor(status, body, location) {
13	/** @readonly */
14	this.status = status
15	/** @readonly */
16	this.body = body
17	/** @readonly */
18	this.location = location
19	}
20
21	}

4. lib / js / muestraError.js


1	import { ProblemDetails } from "./ProblemDetails.js"
2
3	/**
4	* Muestra un error en la consola y en un cuadro de
5	* alerta el mensaje de una excepción.
6	* @param { ProblemDetails \| Error \| null } error descripción del error.
7	*/
8	export function muestraError(error) {
9	if (error === null) {
10	console.log("Error")
11	alert("Error")
12	} else if (error instanceof ProblemDetails) {
13	let mensaje = error.title
14	if (error.detail) {
15	mensaje += `\n\n${error.detail}`
16	}
17	mensaje += `\n\nCódigo: ${error.status}`
18	if (error.type) {
19	mensaje += ` ${error.type}`
20	}
21	console.error(mensaje)
22	console.error(error)
23	alert(mensaje)
24	} else {
25	console.error(error)
26	alert(error.message)
27	}
28	}
29
30	// Permite que los eventos de html usen la función.
31	window["muestraError"] = muestraError

5. lib / js / ProblemDetails.js


1	export const ProblemDetails_BadRequest = 400
2	export const ProblemDetails_NotFound = 404
3	export const ProblemDetails_InternalServerError = 500
4
5	export class ProblemDetails extends Error {
6
7	/**
8	* @param {number} status
9	* @param {string} title
10	* @param {string} [detail]
11	* @param {string} [type]
12	*/
13	constructor(status, title, detail, type) {
14	super(title)
15	/** @readonly */
16	this.status = status
17	/** @readonly */
18	this.type = type
19	/** @readonly */
20	this.title = title
21	/** @readonly */
22	this.detail = detail
23	}
24
25	}

B. Carpeta « lib / php »

Versión para imprimir.

1. lib / php / ejecutaServicio.php


1	<?php
2
3	require_once __DIR__ . "/JsonResponse.php";
4	require_once __DIR__ . "/ProblemDetails.php";
5
6	/**
7	* Ejecuta una funcion que implementa un servicio.
8	*/
9	function ejecutaServicio($servicio)
10	{
11	try {
12	$resultado = $servicio();
13	if (!($resultado instanceof JsonResponse)) {
14	$resultado = JsonResponse::ok($resultado);
15	}
16	procesa_json_response($resultado);
17	} catch (ProblemDetails $details) {
18	procesa_problem_details($details);
19	} catch (Throwable $throwable) {
20	procesa_problem_details(new ProblemDetails(
21	status: ProblemDetails::InternalServerError,
22	type: "/error/errorinterno.html",
23	title: "Error interno del servidor.",
24	detail: $throwable->getMessage()
25	));
26	}
27	}
28
29	function procesa_json_response(JsonResponse $response)
30	{
31	$json = "";
32	$body = $response->body;
33	if ($response->status !== JsonResponse_NoContent) {
34	$json = json_encode($body);
35	if ($json === false) {
36	no_puede_generar_json();
37	return;
38	}
39	}
40	http_response_code($response->status);
41	if ($response->location !== null) {
42	header("Location: {$response->location}");
43	}
44	if ($response->status !== JsonResponse_NoContent) {
45	header("Content-Type: application/json");
46	echo $json;
47	}
48	}
49
50	function procesa_problem_details(ProblemDetails $details)
51	{
52	$body = ["title" => $details->title];
53	if ($details->type !== null) {
54	$body["type"] = $details->type;
55	}
56	if ($details->detail !== null) {
57	$body["detail"] = $details->detail;
58	}
59	$json = json_encode($body);
60	if ($json === false) {
61	no_puede_generar_json();
62	} else {
63	http_response_code($details->status);
64	header("Content-Type: application/problem+json");
65	echo $json;
66	}
67	}
68
69	function no_puede_generar_json()
70	{
71	http_response_code(ProblemDetails::InternalServerError);
72	header("Content-Type: application/problem+json");
73	echo '{"type":"/error/nojson.html"'
74	. ',"title":"El valor devuelto no puede representarse como JSON."}';
75	}
76

2. lib / php / JsonResponse.php


1	<?php
2
3	const JsonResponse_OK = 200;
4	const JsonResponse_Created = 201;
5	const JsonResponse_NoContent = 204;
6
7	class JsonResponse
8	{
9
10	public int $status;
11	public $body;
12	public ?string $location;
13
14	public function __construct(
15	int $status = JsonResponse_OK,
16	$body = null,
17	?string $location = null
18	) {
19	$this->status = $status;
20	$this->body = $body;
21	$this->location = $location;
22	}
23
24	public static function ok($body)
25	{
26	return new JsonResponse(body: $body);
27	}
28
29	public static function created(string $location, $body)
30	{
31	return new JsonResponse(JsonResponse_Created, $body, $location);
32	}
33
34	public static function noContent()
35	{
36	return new JsonResponse(JsonResponse_NoContent, null);
37	}
38	}
39

3. lib / php / leeJson.php


1	<?php
2
3	function leeJson()
4	{
5	return json_decode(file_get_contents("php://input"));
6	}
7

4. lib / php / ProblemDetails.php


1	<?php
2
3	class ProblemDetails extends Exception
4	{
5
6	public const BadRequest = 400;
7	public const NotFound = 404;
8	public const InternalServerError = 500;
9
10	public int $status;
11	public string $title;
12	public ?string $type;
13	public ?string $detail;
14
15	public function __construct(
16	int $status,
17	string $title,
18	?string $type = null,
19	?string $detail = null,
20	Throwable $previous = null
21	) {
22	parent::__construct($title, $status, $previous);
23	$this->status = $status;
24	$this->type = $type;
25	$this->title = $title;
26	$this->detail = $detail;
27	}
28	}
29

K. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.


1	{
2	"compilerOptions": {
3	"checkJs": true,
4	"strictNullChecks": true,
5	"target": "ES6",
6	"module": "ES6",
7	"moduleResolution": "classic",
8	"lib": [
9	"ES2017",
10	"WebWorker",
11	"DOM"
12	]
13	}
14	}

L. Carpeta « error »

Versión para imprimir.

A. error / errorinterno.html


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Error interno del servidor</title>
10
11	</head>
12
13	<body>
14
15	<h1>Error interno del servidor</h1>
16
17	<p>Se presentó de forma inesperada un error interno del servidor.</p>
18
19	</body>
20
21	</html>

B. error / nojson.html


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>El valor devuelto no puede representarse como JSON</title>
10
11	</head>
12
13	<body>
14
15	<h1>El valor devuelto no puede representarse como JSON</h1>
16
17	<p>
18	Debido a un error interno del servidor, la respuesta generada, no se puede
19	recuperar.
20	</p>
21
22	</body>
23
24	</html>

M. Resumen

En esta lección se mostró un ejemplo que envía JSON a un servicio y, como respuesta, recibe datos JSON de ese mismo servicio.

10. Servicio que recibe y devuelve JSON

A. Introducción

B. La función enviaJson

C. La función leeJson

D. Diagrama de despliegue

E. Funcionamiento

1. Iniciamos al ejecutar código en el cliente

index.html

2. Se crea la literal de objeto

index.html

Memoria

3. Se invoca el servicio en el servidor

index.html

Memoria

Request

srv/json.php

4. El servicio lee los datos

index.html

Memoria

srv/json.php

Request

Memoria (Servidor)

5. El servicio procesa los datos

index.html

Memoria

srv/json.php

Memoria (Servidor)

6. El servicio genera la response

index.html

Memoria

srv/json.php

Memoria (Servidor)

Response

7. El servicio devuelve la response, que es recibida en el cliente

index.html

Memoria

Response

srv/json.php

8. Muestra el valor recibido recibido en un alert

index.html

Memoria

Alert

9. Al cerrar el alert, termina el evento

index.html

F. Hazlo funcionar

G. Archivos

H. index.html

I. Carpeta « srv »

A. srv / json.php

J. Carpeta « lib »

A. Carpeta « lib / js »

1. lib / js / enviaJson.js

2. lib / js / invocaServicio.js

3. lib / js / JsonResponse.js

4. lib / js / muestraError.js

5. lib / js / ProblemDetails.js

B. Carpeta « lib / php »

1. lib / php / ejecutaServicio.php

2. lib / php / JsonResponse.php

3. lib / php / leeJson.php

4. lib / php / ProblemDetails.php

K. jsconfig.json

L. Carpeta « error »

A. error / errorinterno.html

B. error / nojson.html

M. Resumen

B. La función `enviaJson`

C. La función `leeJson`