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 consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

2. Se crea la literal de objeto

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

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 consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Ejecuta fetch y envía request (solicitud).

Memoria

datos
saludo
"Hola"
nombre
"pp"

Request

POST /api/json.php HTTP/1.1 Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: es-MX,es-ES;q=0.9,es;q=0.8,en;q=0.7,gl;q=0.6,pt;q=0.5
Connection: keep-alive
Content-Length: 31
Content-Type: application/json
Cookie: __test=610630da28570bec7a7a24ad4391af68
Host: srvjson.rf.gd
Origin: https://srvjson.rf.gd
Referer: https://srvjson.rf.gd/?i=1
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
sec-ch-ua: "Chromium";v="148", "Google Chrome";v="148", "Not/A)Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
{"saludo":"Hola","nombre":"pp"}

api/json.php

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

Despierta y recibe request.

4. El servicio lee los datos

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

Memoria

datos
saludo
"Hola"
nombre
"pp"

api/json.php

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

Request

POST /api/json.php HTTP/1.1 Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: es-MX,es-ES;q=0.9,es;q=0.8,en;q=0.7,gl;q=0.6,pt;q=0.5
Connection: keep-alive
Content-Length: 31
Content-Type: application/json
Cookie: __test=610630da28570bec7a7a24ad4391af68
Host: srvjson.rf.gd
Origin: https://srvjson.rf.gd
Referer: https://srvjson.rf.gd/?i=1
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
sec-ch-ua: "Chromium";v="148", "Google Chrome";v="148", "Not/A)Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
{"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 consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

Memoria

datos
saludo
"Hola"
nombre
"pp"

api/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($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 consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Hace wait esperando response.

Memoria

datos
saludo
"Hola"
nombre
"pp"

api/json.php

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

Memoria (Servidor)

$json
saludo
"Hola"
nombre
"pp"
$saludo
"Hola"
$nombre
"pp"
$resultado
"Hola pp."

Response

HTTP/1.1 200 OK Server: openresty
Date: Fri, 02 May 2025 03:57:08 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:57:08 GMT
"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 consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Despierta y recibe response.

Memoria

datos
saludo
"Hola"
nombre
"pp"
respuesta
status
200
body
"Hola pp."
json
"Hola pp."

Response

HTTP/1.1 200 OK Server: openresty
Date: Fri, 02 May 2025 03:57:08 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: max-age=0
Expires: Fri, 02 May 2025 03:57:08 GMT
"Hola pp."

api/json.php

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($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 consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)

Memoria

datos
saludo
"Hola"
nombre
"pp"
respuesta
status
200
body
"Hola pp."
json
"Hola pp."

Alert

Hola pp.

9. Al cerrar el alert, termina el evento

index.html

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta = await consume(
 enviaJsonRecibeJson(
  "api/json.php", datos))
const json =
 await respuesta.json()
alert(json)