PHP duomenų pristatymas į „JavaScript“: išvengiama naršyklės rodymo

Efektyvus duomenų perdavimas iš PHP į JavaScript

Viena iš dažniausiai atliekamų interneto kūrimo užduočių yra duomenų siuntimas iš serverio klientui jų tiesiogiai nerodant vartotojui. Tai ypač naudinga tvarkant neskelbtiną informaciją arba struktūrizuojant atsakymą, kurį turėtų interpretuoti tik „JavaScript“. Daugelis kūrėjų susiduria su šiuo iššūkiu dirbdami kartu su PHP ir JavaScript.

Šiame scenarijuje naudojame XMLHttpRequest vartotojo duomenims siųsti į serverį. Tada serveris apdoroja užklausą, ieško duomenų bazėje ir nuskaito reikiamus duomenis. Tačiau pateikti šiuos duomenis atgal į „JavaScript“, neatskleidžiant jų naršyklei, yra sudėtinga.

Duomenis atgal galima siųsti įvairiais būdais, pvz., naudojant slapukus arba įterpiant juos į JavaScript arba HTML. Tačiau kiekvienas iš šių metodų turi trūkumų, ypač kai naudojamas XMLHttpRequest, dėl kurio dažnai kyla problemų, tokių kaip netyčinis duomenų rodymas arba nepilnas duomenų tvarkymas.

Šiame straipsnyje bus nagrinėjamas būdas saugiai siųsti gautus duomenis iš PHP į „JavaScript“, užtikrinant, kad duomenys būtų paslėpti nuo naudotojo, bet jais būtų galima manipuliuoti „JavaScript“.

Saugus duomenų perdavimas iš PHP į JavaScript naudojant XMLHttpRequest

Aukščiau pateiktas sprendimas parodo, kaip perduoti duomenis iš PHP užpakalinės programos į JavaScript, nerodant jų tiesiai naršyklėje. Tai ypač naudinga tvarkant duomenis, kurie turėtų būti pasiekiami tik „JavaScript“ tolesniam apdorojimui, pvz., pateikiant dinaminį turinį arba tvarkant naudotojų sąveikas. Svarbiausia čia yra naudoti XMLHttpRequest nesutinka siųsti ir gauti duomenis asinchroniškai. Tai leidžia klientui prašyti duomenų iš serverio fone, išvengiant puslapio įkėlimo iš naujo ir užtikrinant, kad neskelbtini duomenys nebūtų tiesiogiai rodomi vartotojui HTML.

PHP scenarijus prisijungia prie MySQL duomenų bazės ir nuskaito reikiamą informaciją, kuri vėliau užkoduojama į JSON formatą naudojant json_encode funkcija. JSON puikiai tinka šiuo atveju, nes yra lengvas ir lengvai išanalizuojamas naudojant „JavaScript“. JSON atsakymas siunčiamas atgal į kliento scenarijų, kuris klausosi serverio atsakymo naudodamas pasirengus pasikeitus įvykių vedėjas. Duomenys fiksuojami ir apdorojami, kai serveris nurodo, kad atsakymas yra paruoštas (kai parengties būsena pasiekia 4 ir būsena yra 200).

Kai „JavaScript“ gauna duomenis, JSON.parse() metodas naudojamas konvertuoti JSON eilutę į JavaScript objektą. Šis veiksmas yra labai svarbus, nes leidžia manipuliuoti duomenimis scenarijuje, nereikia jų rodyti puslapyje ar atskleisti vartotojui. „JavaScript“ lankstumas leidžia kūrėjams naudoti duomenis įvairiais būdais, pavyzdžiui, atnaujinti DOM, tvarkyti vartotojo sąveikas arba teikti papildomas asinchronines užklausas pagal gautus duomenis.

Taikant alternatyvų metodą, naudojant Fetch API, HTTP užklausoms teikti naudojamas modernesnis ir supaprastintas metodas. „Fettch“ API yra pagrįsta pažadais, todėl lengviau dirbti su asinchroninėmis operacijomis. Tai suteikia švaresnę ir lengviau skaitomą sintaksę, palyginti su XMLHttpRequest. Tačiau abu metodai pasiekia tą patį tikslą: užtikrinti, kad duomenys būtų apdorojami ir tvarkomi saugiai naudojant „JavaScript“, nepateikiant jų naršyklėje. Be to, yra integruotas klaidų tvarkymas, siekiant užtikrinti, kad iškilus problemoms (pvz., nepavykus prisijungti prie serverio ar netinkamiems duomenims), būtų grąžinami ir registruojami atitinkami klaidų pranešimai.

// 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();
}
?>

Efektyvus duomenų perdavimas tarp PHP ir JavaScript naudojant AJAX

Kitas būdas saugiai siųsti duomenis iš PHP į JavaScript, nerodant jų naršyklėje, yra AJAX naudojimas kartu su seansų valdymu. Užuot atkartojus duomenis tiesiogiai arba įterpus juos į „JavaScript“, saugesnis būdas yra laikinai saugoti duomenis PHP seanso metu. Taip užtikrinama, kad neskelbtini duomenys nebūtų tiesiogiai rodomi ir prireikus gali būti nuskaityti naudojant „JavaScript“.

Pagal šį scenarijų, kai vartotojas siunčia XMLHttpRequest, serveris apdoroja užklausą, nuskaito reikiamus duomenis ir išsaugo juos sesijoje. Tada kliento pusės „JavaScript“ gali paprašyti šių duomenų, nepateikdama jų HTML. Tai ne tik pagerina saugumą, bet ir apsaugo nuo nereikalingų formatavimo problemų, su kuriomis dažnai susiduriama tiesiogiai įterpiant duomenis į HTML arba JavaScript. Seansai ypač naudingi tvarkant didesnius duomenų rinkinius arba kai duomenis reikia išlikti keliose užklausose.

Kitas svarbus aspektas yra tinkamo užtikrinimas klaidų tvarkymas ir patvirtinimas duomenų perdavimo proceso metu. Įdiegę patikrinimus tiek serverio, tiek kliento pusėje, kūrėjai gali užtikrinti, kad PHP grąžinami duomenys būtų tikslūs ir laukiamo formato. Be to, naudojant tokias priemones kaip CSRF žetonai arba seanso valdymas užtikrina, kad tik įgaliotos užklausos galėtų pasiekti neskelbtinus duomenis, todėl šis metodas tampa saugesnis ir patikimesnis.