ஜாவாஸ்கிரிப்ட்டுக்கு PHP டேட்டா டெலிவரி: பிரவுசர் டிஸ்ப்ளேவைத் தவிர்த்தல்

PHP இலிருந்து ஜாவாஸ்கிரிப்ட்டுக்கு தரவை திறம்பட அனுப்புதல்

இணைய மேம்பாட்டில் மிகவும் பொதுவான பணிகளில் ஒன்று, சேவையகத்திலிருந்து தரவை நேரடியாக பயனருக்குக் காட்டாமல் கிளையண்டிற்கு அனுப்புவதாகும். முக்கியமான தகவலைக் கையாளும் போது அல்லது ஜாவாஸ்கிரிப்ட் மட்டுமே விளக்க வேண்டிய பதிலைக் கட்டமைக்கும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். பல டெவலப்பர்கள் PHP மற்றும் JavaScript உடன் பணிபுரியும் போது இந்த சவாலை எதிர்கொள்கின்றனர்.

இந்த சூழ்நிலையில், சேவையகத்திற்கு பயனர் தரவை அனுப்ப XMLHttpRequest ஐப் பயன்படுத்துகிறோம். சேவையகம் கோரிக்கையைச் செயலாக்குகிறது, தரவுத்தளத்தைத் தேடுகிறது மற்றும் தேவையான தரவை மீட்டெடுக்கிறது. இருப்பினும், இந்தத் தரவை உலாவியில் வெளிப்படுத்தாமல் மீண்டும் ஜாவாஸ்கிரிப்ட்டுக்கு வழங்குவது தந்திரமானது.

குக்கீகளைப் பயன்படுத்துதல் அல்லது ஜாவாஸ்கிரிப்ட் அல்லது HTML இல் உட்பொதித்தல் போன்ற பல்வேறு வழிகளில் தரவைத் திருப்பி அனுப்ப முடியும். ஆனால் இந்த முறைகள் ஒவ்வொன்றிலும் குறைபாடுகள் உள்ளன, குறிப்பாக XMLHttpRequest சம்பந்தப்பட்டிருக்கும் போது, ​​இது பெரும்பாலும் தரவு திட்டமிடப்படாத காட்சி அல்லது முழுமையற்ற தரவு கையாளுதல் போன்ற சிக்கல்களுக்கு வழிவகுக்கிறது.

இந்தக் கட்டுரையானது PHP இலிருந்து JavaScriptக்கு மீட்டெடுக்கப்பட்ட தரவை பாதுகாப்பாக அனுப்புவதற்கான அணுகுமுறையை ஆராயும், தரவு பயனரின் பார்வையில் இருந்து மறைக்கப்பட்டிருப்பதை உறுதி செய்யும், ஆனால் JavaScript கையாளுவதற்கு அணுகக்கூடியது.

XMLHttpRequest ஐப் பயன்படுத்தி PHP இலிருந்து ஜாவாஸ்கிரிப்ட்டுக்கு தரவை பாதுகாப்பாக அனுப்புதல்

மேலே கொடுக்கப்பட்டுள்ள தீர்வு, உலாவியில் நேரடியாகக் காட்டாமல் PHP பின்தளத்தில் இருந்து JavaScriptக்கு தரவை எவ்வாறு அனுப்புவது என்பதை விளக்குகிறது. டைனமிக் உள்ளடக்கத்தை வழங்குதல் அல்லது பயனர் தொடர்புகளை நிர்வகித்தல் போன்ற கூடுதல் செயலாக்கத்திற்கு JavaScriptக்கு மட்டுமே கிடைக்கக்கூடிய தரவைக் கையாளும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். பயன்படுத்துவதே இங்கு முக்கியமானது XMLHttpRequest ஒத்திசைவற்ற முறையில் தரவை அனுப்பவும் பெறவும் பொருள். இது பின்னணியில் உள்ள சர்வரிலிருந்து தரவைக் கோருவதற்கு கிளையண்டை அனுமதிக்கிறது, ஒரு பக்கத்தை மீண்டும் ஏற்றுவதைத் தவிர்க்கிறது மற்றும் முக்கியமான தரவு HTML இல் பயனருக்கு நேரடியாக வெளிப்படாமல் இருப்பதை உறுதி செய்கிறது.

PHP ஸ்கிரிப்ட் MySQL தரவுத்தளத்துடன் இணைக்கிறது மற்றும் தேவையான தகவலை மீட்டெடுக்கிறது, பின்னர் இது JSON வடிவத்தில் குறியாக்கம் செய்யப்படுகிறது json_குறியீடு செயல்பாடு. JSON இந்த பயன்பாட்டுக்கு ஏற்றது, ஏனெனில் இது இலகுரக மற்றும் ஜாவாஸ்கிரிப்ட் மூலம் எளிதில் பாகுபடுத்தப்படுகிறது. JSON பதில் கிளையன்ட் பக்க ஸ்கிரிப்ட்டுக்கு அனுப்பப்படுகிறது, இது சேவையகத்தின் பதிலைப் பயன்படுத்தி கேட்கிறது தயார்நிலை மாற்றம் நிகழ்வு நடத்துபவர். பதில் தயாராக உள்ளது என்று சேவையகம் குறிப்பிட்டவுடன் தரவு கைப்பற்றப்பட்டு செயலாக்கப்படும் (ரெடிஸ்டேட் 4ஐ அடைந்து, நிலை 200 ஆக இருக்கும் போது).

ஜாவாஸ்கிரிப்ட் தரவைப் பெற்றவுடன், தி JSON.parse() JSON சரத்தை ஜாவாஸ்கிரிப்ட் பொருளாக மாற்ற முறை பயன்படுத்தப்படுகிறது. இந்தப் படி மிகவும் முக்கியமானது, ஏனெனில் இது ஸ்கிரிப்ட்டுக்குள் தரவைக் கையாள அனுமதிக்கிறது, அதை பக்கத்தில் காண்பிக்கவோ அல்லது பயனருக்கு வெளிப்படுத்தவோ தேவையில்லை. ஜாவாஸ்கிரிப்ட்டின் நெகிழ்வுத்தன்மையானது, DOMஐப் புதுப்பித்தல், பயனர் தொடர்புகளைக் கையாளுதல் அல்லது பெறப்பட்ட தரவின் அடிப்படையில் கூடுதல் ஒத்திசைவற்ற கோரிக்கைகளை உருவாக்குதல் போன்ற பல்வேறு வழிகளில் தரவைப் பயன்படுத்த டெவலப்பர்களை அனுமதிக்கிறது.

Fetch API ஐப் பயன்படுத்தும் மாற்று அணுகுமுறையில், HTTP கோரிக்கைகளைச் செய்வதற்கு மிகவும் நவீனமான மற்றும் எளிமையான முறை பயன்படுத்தப்படுகிறது. Fetch API வாக்குறுதி அடிப்படையிலானது, இது ஒத்திசைவற்ற செயல்பாடுகளுடன் வேலை செய்வதை எளிதாக்குகிறது. ஒப்பிடும்போது இது தூய்மையான மற்றும் படிக்கக்கூடிய தொடரியல் வழங்குகிறது XMLHttpRequest. இருப்பினும், இரண்டு அணுகுமுறைகளும் ஒரே இலக்கை அடைகின்றன: தரவு உலாவியில் வழங்கப்படாமல் ஜாவாஸ்கிரிப்ட் மூலம் பாதுகாப்பாக செயலாக்கப்பட்டு கையாளப்படுவதை உறுதி செய்தல். கூடுதலாக, ஏதேனும் சிக்கல்கள் ஏற்பட்டால் (எ.கா., தோல்வியுற்ற சர்வர் இணைப்பு அல்லது தவறான தரவு) சரியான பிழைச் செய்திகள் திருப்பி அனுப்பப்பட்டு உள்நுழைவதை உறுதிசெய்ய, பிழை கையாளுதல் கட்டமைக்கப்பட்டுள்ளது.

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

AJAX ஐப் பயன்படுத்தி PHP மற்றும் JavaScript இடையே பயனுள்ள தரவு பரிமாற்றம்

PHP இலிருந்து ஜாவாஸ்கிரிப்ட்டுக்கு தரவை உலாவியில் காட்டாமல் பாதுகாப்பாக அனுப்புவதற்கான மற்றொரு அணுகுமுறை அமர்வு நிர்வாகத்துடன் இணைந்து AJAX ஐப் பயன்படுத்துவதாகும். தரவை நேரடியாக எதிரொலிப்பதற்குப் பதிலாக அல்லது ஜாவாஸ்கிரிப்ட்டில் உட்பொதிப்பதற்குப் பதிலாக, PHP அமர்வில் தற்காலிகமாகத் தரவைச் சேமிப்பது மிகவும் பாதுகாப்பான முறையாகும். இது முக்கியமான தரவு நேரடியாக வெளிப்படாமல் இருப்பதையும், தேவைக்கேற்ப JavaScript மூலம் மீட்டெடுக்கப்படுவதையும் உறுதி செய்கிறது.

இந்த சூழ்நிலையில், ஒரு பயனர் XMLHttpRequest ஐ அனுப்பும்போது, ​​சேவையகம் கோரிக்கையைச் செயல்படுத்துகிறது, தேவையான தரவை மீட்டெடுக்கிறது மற்றும் ஒரு அமர்வில் சேமிக்கிறது. கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் இந்தத் தரவை HTML இல் வழங்காமல் கோரலாம். இது பாதுகாப்பை மேம்படுத்துவது மட்டுமல்லாமல், HTML அல்லது JavaScript இல் தரவை நேரடியாக உட்பொதிக்கும்போது அடிக்கடி ஏற்படும் தேவையற்ற வடிவமைப்புச் சிக்கல்களைத் தடுக்கிறது. பெரிய தரவுத்தொகுப்புகளைக் கையாளுவதற்கு அல்லது பல கோரிக்கைகள் முழுவதும் தரவு தொடர்ந்து இருக்க வேண்டியிருக்கும் போது அமர்வுகள் மிகவும் பயனுள்ளதாக இருக்கும்.

மற்றொரு முக்கியமான அம்சம் சரியானதை உறுதி செய்வதாகும் பிழை கையாளுதல் மற்றும் தரவு பரிமாற்ற செயல்பாட்டின் போது சரிபார்ப்பு. சர்வர் பக்கத்திலும் கிளையன்ட் பக்கத்திலும் சரிபார்ப்புகளைச் செயல்படுத்துவதன் மூலம், டெவலப்பர்கள் PHP வழங்கும் தரவு துல்லியமாகவும் எதிர்பார்க்கப்படும் வடிவத்தில் இருப்பதையும் உறுதிசெய்ய முடியும். மேலும், போன்ற கருவிகளைப் பயன்படுத்துதல் CSRF டோக்கன்கள் அல்லது அமர்வு நிர்வாகம், அங்கீகரிக்கப்பட்ட கோரிக்கைகள் மட்டுமே முக்கியமான தரவை அணுகுவதை உறுதிசெய்கிறது, இந்த அணுகுமுறையை மிகவும் பாதுகாப்பானதாகவும் நம்பகமானதாகவும் ஆக்குகிறது.