PHP datu piegāde uz JavaScript: izvairīšanās no pārlūkprogrammas displeja

Efektīva datu nodošana no PHP uz JavaScript

Viens no visizplatītākajiem tīmekļa izstrādes uzdevumiem ir datu nosūtīšana no servera klientam, neparādot tos tieši lietotājam. Tas ir īpaši noderīgi, apstrādājot sensitīvu informāciju vai strukturējot atbildi, kas jāinterpretē tikai JavaScript. Daudzi izstrādātāji saskaras ar šo izaicinājumu, strādājot kopā ar PHP un JavaScript.

Šajā scenārijā mēs izmantojam XMLHttpRequest, lai nosūtītu lietotāja datus uz serveri. Pēc tam serveris apstrādā pieprasījumu, veic meklēšanu datu bāzē un izgūst nepieciešamos datus. Tomēr šo datu piegāde atpakaļ uz JavaScript, nepakļaujot tos pārlūkprogrammai, ir sarežģīta.

Datus ir iespējams nosūtīt atpakaļ dažādos veidos, piemēram, izmantojot sīkfailus vai iegulstot tos JavaScript vai HTML. Taču katrai no šīm metodēm ir trūkumi, jo īpaši, ja ir iesaistīts XMLHttpRequest, kas bieži vien rada tādas problēmas kā neparedzēta datu parādīšana vai nepilnīga datu apstrāde.

Šajā rakstā tiks apskatīta pieeja, kā droši nosūtīt izgūtos datus no PHP uz JavaScript, nodrošinot, ka dati ir paslēpti no lietotāja skata, bet ir pieejami, lai JavaScript varētu manipulēt.

Droša datu pārsūtīšana no PHP uz JavaScript, izmantojot XMLHttpRequest

Iepriekš sniegtais risinājums parāda, kā pārsūtīt datus no PHP aizmugursistēmas uz JavaScript, neparādot tos tieši pārlūkprogrammā. Tas ir īpaši noderīgi, apstrādājot datus, kuriem jābūt pieejamiem tikai JavaScript tālākai apstrādei, piemēram, dinamiska satura renderēšanai vai lietotāju mijiedarbības pārvaldībai. Galvenais šeit ir izmantot XMLHttpRequest iebilst pret datu asinhronu sūtīšanu un saņemšanu. Tas ļauj klientam pieprasīt datus no servera fonā, izvairoties no lapas atkārtotas ielādes un nodrošinot, ka sensitīvie dati netiek tieši pakļauti lietotājam HTML formātā.

PHP skripts izveido savienojumu ar MySQL datu bāzi un izgūst nepieciešamo informāciju, kas pēc tam tiek kodēta JSON formātā, izmantojot json_encode funkciju. JSON ir ideāli piemērots šim lietošanas gadījumam, jo ​​tas ir viegls un viegli parsējams, izmantojot JavaScript. JSON atbilde tiek nosūtīta atpakaļ uz klienta puses skriptu, kas klausās servera atbildi, izmantojot gatavības stāvokļa maiņai notikumu apstrādātājs. Dati tiek tverti un apstrādāti, kad serveris norāda, ka atbilde ir gatava (kad readyState sasniedz 4 un statuss ir 200).

Kad JavaScript saņem datus, JSON.parse() metode tiek izmantota, lai pārveidotu JSON virkni par JavaScript objektu. Šis solis ir ļoti svarīgs, jo tas ļauj manipulēt ar datiem skripta ietvaros, tos nerādot lapā vai nepakļaujot lietotājam. JavaScript elastība ļauj izstrādātājiem izmantot datus dažādos veidos, piemēram, atjauninot DOM, apstrādājot lietotāju mijiedarbības vai veicot papildu asinhronus pieprasījumus, pamatojoties uz saņemtajiem datiem.

Alternatīvā pieejā, izmantojot Fetch API, HTTP pieprasījumu veikšanai tiek izmantota modernāka un vienkāršota metode. Fetch API ir balstīta uz solījumu, kas atvieglo darbu ar asinhronām operācijām. Tas nodrošina tīrāku un lasāmāku sintaksi salīdzinājumā ar XMLHttpRequest. Tomēr abas pieejas sasniedz vienu un to pašu mērķi: nodrošināt, ka dati tiek droši apstrādāti un apstrādāti, izmantojot JavaScript, tos neatveidojot pārlūkprogrammā. Turklāt ir iebūvēta kļūdu apstrāde, lai nodrošinātu, ka, ja rodas problēmas (piemēram, neveiksmīgs servera savienojums vai nederīgi dati), tiek atgriezti un reģistrēti atbilstoši kļūdu ziņojumi.

// Frontend: HTML + JavaScript code
<button id="fetchDataBtn">Fetch Data</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'fetch_data.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data); // Data is available here, not visible to the user
      }
    };
    xhr.send('request=true');
  });
</script>

<?php
// Backend: PHP + MySQL code
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  // Example: Fetch data from database
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

// Frontend: HTML + JavaScript code using Fetch API
<button id="fetchDataBtn">Fetch Data with Fetch API</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    fetch('fetch_data.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'request=true'
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
</script>

<?php
// Backend: PHP + MySQL code (same as previous example)
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

Efektīva datu pārsūtīšana starp PHP un JavaScript, izmantojot AJAX

Vēl viena pieeja drošai datu nosūtīšanai no PHP uz JavaScript, neparādot tos pārlūkprogrammā, ir AJAX izmantošana kopā ar sesiju pārvaldību. Tā vietā, lai atbalsotu datus tieši vai iegultu tos JavaScript, drošāka metode ir īslaicīgi uzglabāt datus PHP sesijā. Tas nodrošina, ka sensitīvie dati netiek tieši pakļauti un tos var izgūt, izmantojot JavaScript, ja nepieciešams.

Šādā gadījumā, kad lietotājs nosūta XMLHttpRequest, serveris apstrādā pieprasījumu, izgūst nepieciešamos datus un saglabā tos sesijā. Pēc tam klienta puses JavaScript var pieprasīt šos datus, neatveidojot tos HTML formātā. Tas ne tikai uzlabo drošību, bet arī novērš nevajadzīgas formatēšanas problēmas, kas bieži rodas, tieši iegulstot datus HTML vai JavaScript. Sesijas ir īpaši noderīgas, lai apstrādātu lielākas datu kopas vai kad datiem ir jāsaglabā vairāki pieprasījumi.

Vēl viens svarīgs aspekts ir pareizas nodrošināšana kļūdu apstrāde un validācija datu pārsūtīšanas procesa laikā. Ieviešot pārbaudes gan servera, gan klienta pusē, izstrādātāji var nodrošināt, ka PHP atgrieztie dati ir precīzi un paredzētajā formātā. Turklāt, izmantojot tādus rīkus kā CSRF marķieri vai sesijas pārvaldība nodrošina, ka tikai autorizēti pieprasījumi piekļūst sensitīviem datiem, padarot šo pieeju drošāku un uzticamāku.