Handling data asynchronously using JavaScript and PHP In Hindi
वेब डेवलपर जावास्क्रिप्ट और पीएचपी प्रोग्रामिंग के बीच डेटा को एसिंक्रोनस आर्डर में मैनेज कर डेडिकेटेड वेब सर्वर को रिक्वेस्ट सेंड कर सकते हैं, इसमें यूजर वेब सर्वर साइड पर डेटा और रिक्वेस्ट इनफार्मेशन को प्रोसेस कर सकते हैं. जिससे की डायनामिक फॉर्मेट में वेबपेज के कुछ पर्टिकुलर कंटेंट ब्लॉक को बिना रिफ्रेश किए डायरेक्ट लाइव अपडेट कर सकते हैं। जिसमे डेवलपर अजाक्स (एसिंक्रोनस जावास्क्रिप्ट और XML) वेब डेवेलपमेंट स्क्रिप्ट को यूज़ करके किया जाता है. इसका सामान्यता तोर पर जावास्क्रिप्ट (क्लाइंट-साइड) डेवेलपमेंट और पीएचपी (सर्वर-साइड) स्क्रिप्ट वेब डेवलपमेंट जैसी सॉफ्टवेयर एनवायरनमेंट में किया जाता है।
तो चलिए एक एक्साम्प्ल से समझते है, जिसमे वेब डेवलपर अजाक्स वेब डेवलपमेंट स्क्रिप्ट को यूज़ करके किसी वेबपेज फ़ॉर्म से पीएचपी में डेटा को सेंड करते हैं, जहा क्लाइंट यूजर रिसीव डेटा को प्रोसेस करते हैं, और रिजल्ट को बिना रिफ्रेश किए वेबपेज पर डायनामिक आर्डर में डिस्प्ले करते हैं।
Uses of HTML and JavaScript scripts (client-side)
इसके लिए वेब डेवलपर एचटीएमएल और जावास्क्रिप्ट लैंग्वेज को यूज़ कर एक फ़ॉर्म क्रिएट कर सकते है, जिसमे एम्प्लॉई अपना नाम आईडी और ईमेल मैन्युअल एंटर कर सकता है। ऑनलाइन फ़ॉर्म सर्वर पर सबमिट होने पर जावास्क्रिप्ट प्रोग्रामिंग इस यूजर रिसीव डेटा को एसिंक्रोनस फॉर्मेट में एक पीएचपी स्क्रिप्ट में सेंड कर देता है। इसके बाद पीएचपी स्क्रिप्ट इस डेटा को प्रोसेस करेगी और एक सिस्टम रिस्पांस डिस्प्ले करेगी।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>AJAX Form Example</title>
</head>
<body>
<h2>AJAX Script Employee Form </h2>
<!– here we create Simple html Form to collect employee data –>
<form id=”employeeForm”>
<label for=”name”>Emp_Name – </label>
<input type=”text” id=”emp_name” name=”emp_name” required><br><br>
<label for=”id”>Emp_Id – </label>
<input type=”text” id=”emp_id” name=”emp_id” required><br><br>
<label for=”email”>Email – </label>
<input type=”email” id=”email” name=”email” required><br><br>
<button type=”submit”>Submit Form</button>
</form>
<!– here we Display the output of the form submission process –>
<div id=”output”></div>
<script>
// JavaScript for handling form submission and sending data using AJAX
document.getElementById(’employeeForm’).addEventListener(‘submit’, function(event) {
event.preventDefault(); // it use to Prevent the default form submission process
// here it Collecting employee form data
const emp_name = document.getElementById(’emp_name’).value;
const emp_id = document.getElementById(’emp_id’).value;
const email = document.getElementById(’email’).value;
// let we Create here a FormData object to send data to PHP file
const formData = new FormData();
formData.append(’emp_name’, emp_name);
formData.append(’emp_id’, emp_id);
formData.append(’email’, email);
// here we Use javascript Fetch API to send the data to PHP asynchronously
fetch(‘processForm.php’, {
method: ‘POST’,
body: formData
})
.then(response => response.json()) // it Parse JSON response
.then(data => {
// here it Update the page with the active server’s response
document.getElementById(‘output’).innerHTML = data.message;
})
.catch(error => {
console.error(‘Display Error -‘, error);
});
});
</script>
</body>
</html>
Explanation of the use of HTML and JavaScript scripts.
- Form Data – इस फ़ॉर्म को जब ऑनलाइन सबमिट किया जाता है, तो फॉर्म बैकग्राउंड में सबमिट इवेंट लिस्टनेर event.preventDefault() फंक्शन मेथड को कॉल करके मौजूदा वेबपेज को रीफ़्रेश होने से स्टॉप करता है।
- FormData object – इसके बाद फ़ॉर्मडेटा ऑब्जेक्ट फ़ॉर्म फ़ील्ड में (एम्प्लॉई नाम, एम्प्लॉई आईडी और ईमेल) से डेटा और इन्फर्मेशन को कलेक्ट करता है, और उसे पीएचपी स्क्रिप्ट पर मूव कर देता है।
- AJAX Request – जिसमे जावास्क्रिप्ट fetch() फ़ंक्शन मेथड फ़ॉर्म डेटा के साथ processForm.php को एक POST रिक्वेस्ट को सेंड करता है।
- JSON Response – जहा वेब सर्वर जेसन ऑब्जेक्ट के साथ रिस्पांस करता है, और जावास्क्रिप्ट वेबपेज को रिफ्रेश किए बिना डायनामिक आर्डर में (#output div में) अपडेट करता है।
Using a PHP (server-side) script.
यहाँ इस पीएचपी स्क्रिप्ट में (processForm.php) में क्लाइंट फॉर्म डाटा को प्रोसेस करने का सोर्स कोड दिया गया है, जो एचटीएमएल और जावास्क्रिप्ट में बने गए फॉर्म से आने वाले एम्प्लॉई डेटा को प्रोसेस करती है, और रिस्पांस के रूप में जावास्क्रिप्ट लैंग्वेज को वापस रिस्पांस सेंड करती है।
<?php
// here we create processForm.php
// Check if data is received via POST
if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
// here it Collect the data sent from the JavaScript file
$emp_name = isset($_POST[’emp_name’]) ? $_POST[’emp_name’] : ”;
$emp_id = isset($_POST[’emp_id’]) ? $_POST[’emp_id’] : ”;
$email = isset($_POST[’email’]) ? $_POST[’email’] : ”;
// here it Simulate some process save to a employee form database, validating, etc
// here simple, we are just check if the employee name id and email are not empty
if (!empty($emp_name) && !empty($email)) {
// here it Prepare the response
$response = array(
‘status’ => ‘successfull’,
‘message’ => “Hi, $emp_name! employee email ($email) form data received successfully.”
);
} else {
// here create code for Handle error case (empty data)
$response = array(
‘status’ => ‘error’,
‘message’ => ‘Please enter name and email optional.’
);
}
// here it used to Send the response back as JSON file
header(‘Content-Type: application/json’);
echo json_encode($response);
}
?>
Explanation of using a PHP (server-side) script.
- Processing the request – यहाँ इस प्रोग्राम में पीएचपी स्क्रिप्ट मैन्युअल चेक करती है कि रिसीव क्लाइंट रिक्वेस्ट एक POST रिक्वेस्ट मेथड है या नहीं और अजाक्स रिक्वेस्ट के द्वारा सेंड किए गए एम्प्लॉई नाम आईडी और ईमेल वैल्यूज को रिट्रीव करती है।
- Response – फॉर्म प्रोसेसिंग के बाद इस कंडीशन में यह देखने के लिए एक सिंपल चेक करे कि क्या डेटा प्रोवाइड किया गया है, पीएचपी स्क्रिप्ट एक जेसन ऑब्जेक्ट के रूप में एक रिस्पांस क्रिएट करती है। इसे फिर क्लाइंट जावास्क्रिप्ट को रिटर्न सेंड कर दिया जाता है।
- Error handling – यदि कोई जरूरी फॉर्म डेटा जैसे एम्प्लॉई नाम आईडी या ईमेल अनअवेलेबल है, तो सर्वर एक एरर मैसेज के साथ रिस्पांस प्रोवाइड करता है।
How it all works in the backend.
- Employee submits form – यहाँ फॉर्म में एम्प्लोई एम्प्लॉई का नाम आईडी और ईमेल एंटर करता है, और सबमिट बटन पर क्लिक करता है।
- AJAX request – जावास्क्रिप्ट फ़ॉर्म सबमिशन को इंटरसेप्ट करता है, एम्प्लॉई फॉर्म डेटा कलेक्ट करता है, और जावास्क्रिप्ट fetch() एपीआई और FormData मेथड का यूज़ करके उसे processForm.php पर सेंड करता है।
- Server processing – processForm.php डेटा को प्रोसेस करता है, जैसे, इनपुट फॉर्म एलिमेंट को वेलिडेट को चेक करता है, और एक जेसन फॉर्म रिस्पांस प्रोवाइड है।
- Dynamic update – जावास्क्रिप्ट जेसन रिस्पांस रिसीव करता है, उसे पार्स करता है, और #output div में रिजल्ट डिस्प्ले करके वेबपेज को डायनामिक आर्डर से अपडेट करता है।
Advantages.
- No page reloads – यह फॉर्म ओवरव्यू किसी भी वेबपेज के केवल एसेंशियल पार्ट को अपडेट करता है, जिससे यूजर एक्सपेरिएंस इम्प्रूव होता है।
- Asynchronous – फॉर्म में अजाक्स रिक्वेस्ट ब्लॉक नहीं होता है, इसका मतलब है कि वेब सर्वर द्वारा रिक्वेस्ट प्रोसेस किए जाने के दौरान यूजर वेबपेज के साथ इंटरैक्ट करना कंटिन्यू कर सकता है।
- Separation of concerns – जावास्क्रिप्ट वेब डेवलपमेंट फॉर्म में क्लाइंट-साइड यूजर इंटरैक्शन को मैनेज करता है, जबकि पीएचपी वेब डेवलपमेंट स्क्रिप्ट सर्वर-साइड पर डेटा को प्रोसेस करता है।
Enhancements you can add as a developer to the Employee form.
- Validation – डेवलपर क्लाइंट-साइड में जावास्क्रिप्ट वेब डेवलपमेंट स्क्रिप्ट को यूज़ करके और सर्वर-साइड बैकेंड में पीएचपी स्क्रिप्ट का यूज़ करके दोनों पर अधिक एडवांस्ड वेलिडेशन कर सकते हैं।
- Database interaction – यह केवल एक स्टैटिक मैसेज रिटर्न करने के बदले पीएचपी स्क्रिप्ट एम्प्लॉई फॉर्म डेटा को स्टोर करने या रिट्रीव करने के लिए डेटाबेस के साथ इंटरैक्ट कर सकती है।
- Error handling – डेवलपर क्लाइंट और सर्वर दोनों साइड एरर मैनेजमेंट में इम्प्रूव कर सकते हैं, जैसे, स्पेसिफिक एरर मैसेज डिस्प्ले करना, सर्वर-साइड इश्यूज और प्रॉब्लम को मैनेज करना आदि है।
