Making AJAX requests with JavaScript and PHP In Hindi
जावास्क्रिप्ट और पीएचपी प्रोग्रामिंग के साथ अजाक्स वेबपेज में क्लाइंट साइड वेब रिक्वेस्ट सेंड रिसीव और क्रिएट करने के लिए वेब डेवलपर इस प्रोसेस को दो पार्ट में डिवाइड कर डील कर सकते हैं.
JavaScript (client-side) Ajax request – यह जावास्क्रिप्ट और एचटीएमएल वेबपेज को क्रिएट कर सर्वर को क्लाइंट साइड रिक्वेस्ट क्रिएट और सेंड कर रेस्पॉन्सेस टास्क को मैनेज और कण्ट्रोल करने के एक्टिविटीज को हैंडल करता है।
PHP (server-side) Ajax request – यह पीएचपी प्रोग्रामिंग में यूज़ और रिसीव क्लाइंट रिक्वेस्ट को प्रोसेस करता है, और उचित रिस्पांस जैसे, जेसन, एचटीएमएल, या प्लैन टेक्स्ट फाइल फॉर्मेट में रिटर्न करता है।
तो चलिए अजाक्स क्लाइंट साइड वेब रिक्वेस्ट को क्रिएट और प्रोसेस को रिसीव करने और वेबपेज को री-लोड किए बिना वेबपेज डिस्प्ले करने के लिए एक पीएचपी फ़ाइल रिक्वेस्ट को सेंड और क्रिएट करे.
Example of a simple AJAX request to receive JavaScript and HTML data on the client side.
Step 1 – HTML and JavaScript client-side Steps for the AJAX Request.
यहाँ वेब डेवलपर एक एचटीएमएल फ़ाइल को क्रिएट करता है, जिसमें एक यूजर डिफाइन कस्टम अजाक्स रिक्वेस्ट बटन क्रिएट किया गया है। जब इंटरनेट यूजर इस बटन पर क्लिक करता है, तो वेब सर्वर पर एक क्लाइंट साइड से अजाक्स वेब रिक्वेस्ट सेंड की जाती है। यहाँ हम अजाक्स क्लाइंट साइड रिक्वेस्ट सेंड करने के लिए जावास्क्रिप्ट के fetch() फंक्शन एपीआई एडवांस्ड मॉडर्न मेथड को यूज़ करते है।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>AJAX Client Side Request Example</title>
</head>
<body>
<h2>Let Create AJAX Request with PHP</h2>
<button id=”fetchDataBtn”>Fetch Ajax Data</button>
<div id=”responses”></div>
<script>
document.getElementById(‘fetchDataBtn’).addEventListener(‘click’, function() {
// here we Make an AJAX request with use of javascript Fetch API
fetch(‘server.php’)
.then(response => response.json()) // here it Parse JSON responses
.then(data => {
// here it Display the response in the ‘response’ div html block section
document.getElementById(‘responses’).innerHTML = data.message;
})
.catch(error => {
console.error(‘Display Error -‘, error);
});
});
</script>
</body>
</html>
Explanation of HTML and JavaScript Ajax requests.
- यहाँ इस वेबपेज में जब इंटरनेट यूजर अजाक्स रिक्वेस्ट बटन पर क्लिक करता है, तो ऑनलाइन server.php फ़ाइल में एक fetch() जावास्क्रिप्ट रिक्वेस्ट सेंड की जाती है।
- जिसमे server.php फाइल एक जेसन रिक्वेस्ट को रिटर्न करता है, जिसे सर्वर पर प्रोसेस किया जाता है, और #response div एचटीएमएल ब्लॉक के अंदर डिस्प्ले किया जाता है।
Step 2 – PHP Server-Side Ajax Request.
अब स्टेप सेकंड में वेब डेवलपर server.php फ़ाइल को सर्वर साइड प्रोसेस में प्रोसेस करने के लिए क्रिएट करे। यहाँ इस कंडीशन में, क्लाइंट साइड वेब डेटा रिसीव करने के प्रोसेस को फॉलो करेंगे, जैसे, किसी ऑनलाइन सर्वर डेटाबेस से या किसी बेसिक रिस्पांस को डील करना है।
<?php
// here we create a server.php file for server side
// here we Simulate some data to be returned from client side
$response = array(
‘msginfo’ => ‘Hi, let fetched data from AJAX client-side request’
);
// here we Set the responses content type to JSON format
header(‘Content-Type: application/json’);
// here it used t Return the response as JSON format
echo json_encode($response);
Explanation of a PHP Server-Side Ajax Request.
- सर्वर साइड पीएचपी स्क्रिप्ट में कुछ डेटा के साथ एक ऐरे क्रिएट करता है, जिसे रिक्वेस्ट होने पर वेबपेज में रिटर्न किया जाना है।
- यहाँ वेबपेज में header(‘Content-Type: application/json’) यह स्टेटमेंट डिसाइड करता है कि वेब सर्वर की रेस्पॉन्सेस को जेसन फॉर्मेट में ट्रीट किया जाएगा।
- यह स्टेटमेंट json_encode($response) पीएचपी में क्रिएटेड प्रोग्राम ऐरे को जेसन फ़ॉर्मेट में कन्वर्ट करता है।
So, let’s explore how Ajax requests work in HTML, JavaScript, and PHP.
- When the client clicks a button – यहाँ एचटीएमएल वेबपेज में क्रिएटेड अजाक्स रिक्वेस्ट बटन जावास्क्रिप्ट प्रोग्राम सोर्स कोड को ट्रिगर करता है।
- AJAX web request – जिसमे जावास्क्रिप्ट fetch() फ़ंक्शन server.php सर्वर साइड फाइल को एक HTTP GET वेब रिक्वेस्ट सेंड करता है।
- PHP server response – यह पीएचपी सर्वर रेस्पॉन्स में वेब स्क्रिप्ट रिक्वेस्ट को प्रोसेस करती है, और जावास्क्रिप्ट प्रोग्रामिंग को एक जेसन रेस्पॉन्स रिटर्न को सेंड करता है।
- Display web request data – यहाँ जावास्क्रिप्ट और जेसन से रेस्पॉन्स को रिसीव करता है, और अजाक्स क्रिएटेड एलिमेंट वेबपेज को लाइव डायनामिक फॉर्मेट में अपडेट करता है, यहाँ इस कंडीशन में एक सिंपल टेक्स्ट मैसेज को डिस्प्ले करता है।
Here are some manual improvements web developers can make when creating Ajax requests.
- Post request data in PHP – वेब डेवलपर जावास्क्रिप्ट fetch() फंक्शन रिक्वेस्ट में एक बॉडी ऐड करके पीएचपी वेब सर्वर को डेटा को सेंड कर सकते हैं, यहाँ POST ऑनलाइन सेंड डाटा इंटरनेट प्रोटोकॉल को यूज़ करके इसे कर सकते है।
- Request error handling – यह क्लाइंट और सर्वर साइड अजाक्स क्लाइंट सर्वर रिक्वेस्ट के अंतराल में दोनों साइड से जनरेट होने वाली किसी भी एरर को मैनेज और कण्ट्रोल कर सकते है।
- Live database interaction – इसमें पीएचपी सर्वर साइड क्रिएट फ़ाइल मौजूदा सर्वर साइड डेटाबेस के साथ डायरेक्ट कम्यूनिकेट कर सकती है, जिसमे सर्वर क्लाइंट क्वेरीज़ को प्रोसेस और हैंडल कर सकती है, और लाइव सर्वर पर डायनामिक आर्डर में रिजल्ट को प्रीव्यू कर सकती है।
Sending data with the POST method in AJAX web development scripts.
वेब डेवलपर POST मेथड को यूज़ करके अजाक्स वेब रिक्वेस्ट को किसी वेब सर्वर को डेटा फॉर्मेट में डायरेक्ट सेंड कर सकते हैं.
fetch(‘server.php’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ emp_name: ‘Harry’,emp_id: ‘H101’, age: 32 }) // here this the Example used to send data
})
.then(response => response.json())
.then(data => {
console.log(data);
});
वेब डेवलपर अपने server.php फाइल में इस डेटा इस प्रकार से रिसीव करता है.
// here let we Get the raw POST methd data
$data = json_decode(file_get_contents(‘php://input’), true);
// here we Access the database file values
$emp_name = $data[’emp_name’];
$emp_id = $data[emp_id’];
$age = $data[‘age’];
$response = array(‘Employee info’ => “Hi, employee name $emp_name. Employee id $emp_id. Employee Age $age is.”);
echo json_encode($response);
यहाँ ऊपर दिए गए मेथड को यूज़ करके यूजर जावास्क्रिप्ट और पीएचपी प्रोग्रामिंग में अजाक्स रिक्वेस्ट के माध्यम सेडायनामिक फॉर्मेट में क्लाइंट रिक्वेस्ट डाटा गेट और पोस्ट मेथड को अप्लाई कर सेंड और रिसीव कर सकते हैं।
