Trimiterea datelor într-o solicitare ajax
Pentru a trimite date la server din codul JavaScript într-o solicitare ajax, datele care urmează să fie trimise sunt furnizate metodei send() a obiectului XMLHttpRequest.
Pentru testarea trimiterii, la fel ca în articolele anterioare, vom folosi Node.js ca cea mai simplă opțiune de server. Astfel, vom crea fișierul app.js și vom defini în el următorul cod al serverului, care acceptă date:
const http = require("http");
const fs = require("fs");
http.createServer(async (request, response) => {
if(request.url == "/user"){
let userName= ""; // obținem datele într-un șir
// obținem datele din solicitare și le adăugăm în șir
for await (const chunk of request) {
userName += chunk;
}
userName = userName + " Smith";
response.end(userName);
}
else{
fs.readFile("index.html", (_, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));În acest caz, când se accesează adresa "/user", serverul primește toate datele trimise:
if(request.url == "/user"){Putem parcurge obiectul solicitării și astfel extragem datele primite:
let userName= ""; // obținem datele într-un șir
// obținem datele din solicitare și le adăugăm în șir
for await (const chunk of request) {
userName += chunk;
}În acest caz, datele trimise sub forma obiectelor chunk sunt adăugate în șirul userName. Aici presupunem că serverul primește un simplu text, prin urmare fiecare bucată de date chunk va reprezenta un șir.
De asemenea, aici presupunem că clientul trimite la server un anumit nume de utilizator. Și, pentru exemplu, la acest nume se adaugă un prenume și numele modificat este trimis înapoi clientului:
userName = userName + " Smith";
response.end(userName);Acum să definim în pagina index.html codul pentru trimiterea datelor către acest server:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
// datele pentru trimitere
const user = "Tom";
const xhr = new XMLHttpRequest();
// handler pentru primirea răspunsului serverului
xhr.onload = () => {
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("Răspunsul serverului: ", xhr.statusText);
}
};
// solicitare POST către resursa /user
xhr.open("POST", "/user");
xhr.send(user); // trimitem valoarea user în metoda send
</script>
</body>
</html>Pentru trimitere se folosește metoda POST. Ca date de trimis servește un simplu șir "Tom". Adică la server se trimite un text simplu. Și, deoarece serverul răspunde, de asemenea, cu text, pentru obținerea răspunsului aici se folosește proprietatea xhr.responseText. Și la rularea acestei pagini web se va executa trimiterea datelor la server, iar în consola browserului se poate vedea răspunsul primit de la server:
Trimiterea json
Într-un mod similar se pot trimite date mai complexe. De exemplu, să luăm în considerare trimiterea json. Pentru aceasta, pe partea de node.js, definim următorul server:
const http = require("http");
const fs = require("fs");
http.createServer(async (request, response) => {
if(request.url == "/user"){
// obținem reprezentarea șir a răspunsului
let data="";
for await (const chunk of request) {
data += chunk;
}
// așteptăm date de tipul {"name":"value","age":1234}
const user = JSON.parse(data); // parsăm șirul în json
// pentru test, modificăm datele obiectului primit
user.name = user.name + " Smith";
user.age += 1;
// trimitem obiectul modificat înapoi la client
response.end(JSON.stringify(user));
}
else{
fs.readFile("index.html", (_, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));În acest caz, serverul așteaptă să primească un obiect în format json, care are două proprietăți - name și age. Pentru exemplu, serverul modifică valorile acestor proprietăți și trimite obiectul modificat înapoi clientului.
Pe pagina web stabilim obiectul json pentru trimitere și primim înapoi datele:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
// datele pentru trimitere
const tom = {
name: "Tom",
age: 37
};
// codificăm obiectul în format json
const data = JSON.stringify(tom);
const xhr = new XMLHttpRequest();
xhr.onload = () => {
if (xhr.status == 200) {
const user = JSON.parse(xhr.responseText)
console.log(user.name, "-", user.age);
} else {
console.log("Răspunsul serverului: ", xhr.statusText);
}
};
xhr.open("POST", "/user");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(data);
</script>
</body>
</html>Aici la server se trimite obiectul tom, care are două proprietăți: name și age. Înainte de trimitere, acesta este codificat în format json folosind funcția JSON.stringify().
const data = JSON.stringify(tom);La trimitere, prin metoda setRequestHeader() pentru antetul "Content-Type" se stabilește valoarea "application/json", indicând astfel că trimitem date în format json:
xhr.setRequestHeader("Content-Type", "application/json");În handlerul evenimentului load, mai întâi decodificăm textul răspunsului din format json într-un obiect JavaScript standard:
const user = JSON.parse(xhr.responseText)Apoi afișăm datele obiectului primit pe consola browserului:
