Updating parts of a page without refreshing In Hindi
किसी वेबपेज या वेबसाइट कंटेंट को रिफ्रेश किए बगेर पर्टिकुलर वेबसाइट कंटेंट ब्लॉक या इंडिविजुअल वेब कॉम्पोनेन्ट को इमीडियेट अपडेट करने के लिए वेब डेवलपर अजाक्स (एसिंक्रोनस जावास्क्रिप्ट और XML) स्क्रिप्ट को अप्लाई कर डेडिकेटेड php वेब सर्वर को एक रिक्वेस्ट सेंड कर सकते हैं, और रिसीव डेटा को यूज़ कर पार्टिकल्र वेबपेज कंटेंट और कुछ वेबसाइट हिस्सों को लाइव अपडेट कर सकते हैं। जिससे की किसी भी इंटरनेट यूजर को वेबसाइट में कम्पलीट वेबपेज को रीलोड किए बगेर डेवलपर डायनामिक आर्डर में वेबपेज लाइव लोड कर वेब कंटेट को इम्मेडिएटली रिप्लेस कर सकते है।
Main steps for updating parts of a page without refreshing.
- User interaction – किसी भी html वेबपेज में जावास्क्रिप्ट का यूज़ कर क्रिएट बटन क्लिक करके यूजर इनपुट परिवर्तन या वेबपेज लोड जैसे ट्रिगर अजाक्स पोस्ट रिक्वेस्ट स्टार्ट कर सकते है।
- AJAX request – इसमें जावास्क्रिप्ट प्रोग्रामिंग डेडिकेटेड वेब सर्वर को एक एसिंक्रोनस रिक्वेस्ट सामान्यता जावास्क्रिप्ट fetch(), XMLHttpRequest, या jQuery.ajax() फंक्शन या मेथड को यूज़ करके सेंड करता है।
- Server-side processing – यह php सर्वर साइड में वेब सर्वर में रिसीव रिक्वेस्ट को प्रोसेस करता है, जैसे, मौजूदा सर्वर बैकेंड डेटाबेस से डेटा रिसीव करता या कोई यूजर जनरेटेड एक्शन परफॉर्म करता है, और एक सिस्टम रिस्पांस सामान्यता तौर पर जेसन या HTML फॉर्मेट में रीसेंड करता है।
- Update page – यहाँ डेडिकेटेड वेबपेज में रेस्पोसेस को यूज़ कम्पलीट वेबपेज को रीलोड किए बगेर वेबपेज के केवल जरूरी रिलेटेड पोरशन या कम्पोनेट को अपडेट करने में किया जाता है।
Example of dynamically updating webpage content without refreshing.
यदि वेब डेवलपर किसी पर्टिकुलर वेबपेज वेबसाइट में किसी html या जावास्क्रिप्ट बेस्ड क्रिएटेड वेबपेज बटन पर क्लिक करने पर वेब सर्वर से एम्प्लॉई की लिस्ट को डायनामिक आर्डर में लोड करना चाहते हैं, और मौजूदा वेबपेज वेबसाइट कंटेंट को रिफ्रेश किए बिना वेबपेज डेटा को एक div html ब्लॉक सेक्शन में डिस्प्ले कर सकते हैं।
Use of HTML and JavaScript programming (client-side) scripts update.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Example of AJAX WebPage for Update Web content</title>
</head>
<body>
<h2>Update Webpage Content Without Reload Page or Component </h2>
<button id=”loademployeeBtn”>Load Dynamic Employee List</button>
<div id=”employeeList”></div>
<script>
//here we Add event listener to the created button to load employee list dynamically
document.getElementById(‘loademployeeBtn’).addEventListener(‘click’, function() {
// use javascript Fetch API method to send an AJAX request to the dedicated web server
fetch(‘getemployee.php’) // here this PHP script will send the employee list data
.then(response => response.json()) // here it Parse JSON response from PHP file
.then(data => {
// here it used to Find the div section to update and populate it with employee data list
const employeeListDiv = document.getElementById(’employeeList’);
employeeListDiv.innerHTML = ”; // here this code used to Clear any existing content
data.forEach(employee => {
employeeListDiv.innerHTML += `<p>${employee.emp_name} ${employee.emp_id} – ${employee.email}</p>`;
});
})
.catch(error => {
console.error(‘Display Error When fetch employee data -‘, error);
});
});
</script>
</body>
</html>
PHP programming for (server-side) script updates.
यहाँ इस PHP फ़ाइल स्क्रिप्ट में getemployee.php नाम से एक फाइल डेटाबेस से पर्टिकुलर एम्प्लॉई डाटा इनफार्मेशन को रिसीव करेगी या एक स्टैटिक लिस्ट रिटर्न करती है. सिम्पलिसिटी, में यहाँ डेवलपर इस प्रोसेस के लिए एक स्टैटिक ऐरे को यूज़ करेंगे।
<?php
// create code for getemployee.php file
// here we Simulate a database response, here we can replace this with a actual database query
$employee = [
[’emp_name’ => ‘Siddhi’, ’emp_id’ => ‘S101′, ’email’ => ‘siddhi@domain.com’],
[’emp_name’ => ‘Harry’, ’emp_id’ => ‘H101′, ’email’ => ‘harry@domain.com’],
[’emp_name’ => ‘Bhavishi’, ’emp_id’ => ‘B101′,’email’ => ‘bhavishi@domain.com’]
];
// here we Set the response header as JSON file
header(‘Content-Type: application/json’);
// here we Send the employee data as a JSON response
echo json_encode($employee);
Here’s how the PHP script code works.
- HTML and Button – यहाँ इस वेबपेज स्क्रिप्ट में “लोड एम्प्लॉई” लेबल वाला एक बटन क्रिएट किया गया है, जिसे यूजर द्वारा क्लिक करने पर यह fetch() जावास्क्रिप्ट फंक्शन मेथड या कॉल को ट्रिगर करता है।
- AJAX Request – अजाक्स रिक्वेस्ट में जब यूजर इस बटन पर क्लिक करता है, तो जावास्क्रिप्ट प्रोग्रामिंग में यूज़, जावास्क्रिप्ट fetch() फंक्शन मेथड को यूज़ करके getemployee.php फाइल पर एक अजाक्स रिक्वेस्ट सेंड करता है। यह रिक्वेस्ट एक एसिंक्रोनस आर्डर में जनरेट होता है, इस वजह से मौजूदा ओपन वेबपेज री-लोड नहीं होता है।
- PHP Response – यहाँ php रिस्पांस में getemployee.php जेसन फोर्मेट में एम्प्लॉई की एक लिस्ट को रिटर्न करता है। यह आपके यूज़ के आधार पर एम्प्लॉई डेटाबेस क्वेरी से भी डिस्प्ले हो सकता है।
- JavaScript Updates Page – यहाँ सिस्टम एक जावास्क्रिप्ट में एक रिस्पांस रिसीव करता है, और एम्प्लॉई डेटा का उपयोग करके #employeeList div को एम्प्लॉई के नाम आईडी और ईमेल के साथ अपडेट करता है। #employeeList के अंदर की डिजिटल कंटेंट वेबपेज को रीफ़्रेश किए बिना डायनामिक फॉर्मेट में इसे अपडेट करती है।
Why and how does this work in a webpage?
- AJAX – वेबपेज में अजाक्स स्क्रिप्ट के यूज़ से यूजर वेब ब्राउज़र में कम्पलीट वेबपेज को रीलोड किए बिना डेडिकेटेड वेब सर्वर से रिक्वेस्ट को सेंड कर सकता है।
- Partial Page Update – #employeeList div डिव ब्लॉक मेथड को नए वेब कंटेंट के साथ डायनामिक आर्डर में अपडेट करने में किया जाता है, जो की पूरे वेबपेज को रीफ्रेश किए बिना लोड करता है।
You can extend this example.
- Search Functionality – यहाँ यूजर फ़िल्टर किए गए एम्प्लॉई डेटा को रिसीव कर इसे मॉडिफाई कर सकते हैं, जैसे कि सर्च इनपुट के आधार पर एम्प्लॉई डाटा को डिस्प्ले करना।
- Real-time updates – यदि यहाँ डेडिकेटेड वेब सर्वर लाइव अपडेट प्रोवाइड करता है, तो डेवलपर वेबपेज के कुछ पर्टिकुलर पार्ट को ऑटोमेटिकली आर्डर में रीफ्रेश करने के लिए समय-समय पर अजाक्स डायनामिक स्क्रिप्ट को यूज़ कर सकते हैं जैसे, setInterval() फंक्शन के साथ है।
- Form submission – डेवलपर अजाक्स वेब स्क्रिप्ट के माध्यम से वेब सर्वर को डेटा जैसे, फ़ॉर्म डेटा को सेंड कर सकते हैं, और वेब सर्वर की रिस्पांस के आधार पर वेबपेज के कुछ पोरशन या ब्लॉक को इमीडियेट अपडेट कर सकते हैं।
Conclusion of Updating Parts of a Page Without Refreshing.
वेबपेज डिज़ाइन और डेवलपमेंट में अजाक्स स्क्रिप्ट मेथड इंटरैक्टिव मॉडर्न और रेस्पॉन्सिव वेब एप्लिकेशन क्रिएट करने के लिए वैरी हेल्पफुल है। जहा डेवलपर कम्पलीट वेबपेज रीफ्रेश के साथ इंटरनेट यूजर एक्सपेरिएंस को डिस्टर्ब किए बिना डायनामिक फॉर्मेट में वेब कंटेंट को लाइव लोड कर सकते हैं, इसमें जरूरत के अनुसार वेबपेज के कुछ पर्टिकुलर पोरशन को लाइव इंस्टेंट अपडेट कर सकते हैं, या लाइव वेब सर्वर के साथ डायरेक्ट इंटरैक्ट कर सकते हैं।
