अध्याय 18: PHP और Ajax (PHP and Ajax)

इस अध्याय में, हम PHP और Ajax के उपयोग के बारे में जानेंगे। Ajax (Asynchronous JavaScript and XML) एक शक्तिशाली तकनीक है जो वेब पेज को बिना रीफ्रेश किए सर्वर से डेटा प्राप्त करने की अनुमति देती है। यह उपयोगकर्ता अनुभव को बेहतर बनाने और अधिक इंटरएक्टिव वेब एप्लिकेशन बनाने में मदद करता है। इस अध्याय में, हम देखेंगे कि कैसे Ajax का उपयोग करके PHP स्क्रिप्ट से डेटा प्राप्त और भेजा जा सकता है, JSON डेटा का आदान-प्रदान, फॉर्म डेटा सबमिट करना, लाइव डेटा अपडेट्स, त्रुटि हैंडलिंग, और सुरक्षित Ajax अनुरोध करना। उन्नत Ajax फीचर्स और प्रैक्टिकल उदाहरणों के साथ, आप अपने वेब एप्लिकेशन को अधिक प्रभावी और उपयोगकर्ता-अनुकूल बना सकते हैं।

Ajax का परिचय (Introduction to Ajax)

Ajax (Asynchronous JavaScript and XML) एक तकनीक है जो वेब पेज को बिना रीफ्रेश किए सर्वर से डेटा प्राप्त करने और भेजने की अनुमति देती है। यह उपयोगकर्ता अनुभव को बेहतर बनाने और अधिक इंटरएक्टिव वेब एप्लिकेशन बनाने में मदद करता है। Ajax का उपयोग करके, आप बैकग्राउंड में सर्वर के साथ डेटा का आदान-प्रदान कर सकते हैं, जिससे वेब पेज को पूरी तरह से रीलोड करने की आवश्यकता नहीं होती है।

Ajax की विशेषताएँ (Features of Ajax)

असिंक्रोनस ऑपरेशन्स (Asynchronous Operations): Ajax असिंक्रोनस तरीके से कार्य करता है, जिसका मतलब है कि वेब पेज को रीलोड किए बिना डेटा सर्वर से प्राप्त या भेजा जा सकता है।
बेहतर उपयोगकर्ता अनुभव (Improved User Experience): Ajax का उपयोग करके, आप उपयोगकर्ता इंटरफेस को अधिक प्रतिक्रियाशील और इंटरएक्टिव बना सकते हैं।
डेटा का कुशल आदान-प्रदान (Efficient Data Exchange): Ajax XML, JSON, HTML, और टेक्स्ट जैसे विभिन्न डेटा फॉर्मेट्स के साथ काम कर सकता है।
कंपैटिबिलिटी (Compatibility): Ajax आधुनिक वेब ब्राउज़र्स के साथ अच्छी तरह से काम करता है और व्यापक रूप से समर्थित है।

Ajax कैसे काम करता है? (How Ajax Works?)

Ajax तकनीक कई वेब टेक्नोलॉजीज का संयोजन है:

HTML/XHTML और CSS: वेब पेज की संरचना और शैली को परिभाषित करने के लिए।
JavaScript: ब्राउज़र पर स्क्रिप्टिंग और DOM को मैनिपुलेट करने के लिए।
XMLHttpRequest: सर्वर से डेटा को फेच करने और भेजने के लिए।
XML/JSON: डेटा को फॉर्मेट करने के लिए (हालांकि JSON अधिक लोकप्रिय हो गया है)।

Ajax अनुरोध की प्रक्रिया (Process of an Ajax Request)

यूज़र इवेंट (User Event): उपयोगकर्ता किसी बटन पर क्लिक करता है या किसी अन्य इवेंट को ट्रिगर करता है।
XMLHttpRequest ऑब्जेक्ट बनाना (Creating XMLHttpRequest Object): एक XMLHttpRequest ऑब्जेक्ट बनाया जाता है।
सर्वर से अनुरोध भेजना (Sending Request to the Server): XMLHttpRequest ऑब्जेक्ट का उपयोग करके सर्वर को एक HTTP अनुरोध भेजा जाता है।
सर्वर से प्रतिक्रिया प्राप्त करना (Receiving Response from the Server): सर्वर अनुरोध को प्रोसेस करता है और एक प्रतिक्रिया भेजता है।
डेटा को प्रोसेस करना (Processing the Data): प्राप्त डेटा को प्रोसेस किया जाता है और वेब पेज पर प्रदर्शित किया जाता है।

उदाहरण (Example)

नीचे एक सरल उदाहरण है जो दिखाता है कि कैसे Ajax का उपयोग करके एक PHP स्क्रिप्ट से डेटा प्राप्त किया जा सकता है।

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Example</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <button type="button" onclick="loadData()">Load Data</button>
    <div id="result"></div>
</body>
</html>

PHP (data.php):

इस उदाहरण में:

एक बटन क्लिक इवेंट पर loadData() फंक्शन कॉल होता है।
loadData() फंक्शन एक XMLHttpRequest ऑब्जेक्ट बनाता है और सर्वर को एक GET अनुरोध भेजता है।
सर्वर (data.php) अनुरोध को प्रोसेस करता है और एक साधारण टेक्स्ट प्रतिक्रिया भेजता है।
प्रतिक्रिया डेटा को वेब पेज पर प्रदर्शित किया जाता है।

पहला Ajax अनुरोध (First Ajax Request)

इस सेक्शन में, हम एक साधारण Ajax अनुरोध बनाएंगे जो एक PHP स्क्रिप्ट से डेटा प्राप्त करेगा। हम एक बटन क्लिक इवेंट का उपयोग करके डेटा लोड करेंगे और उस डेटा को वेब पेज पर प्रदर्शित करेंगे। यह उदाहरण आपको दिखाएगा कि Ajax और PHP का उपयोग करके सर्वर से डेटा कैसे प्राप्त किया जा सकता है।

HTML और JavaScript बनाना (Creating HTML and JavaScript)

सबसे पहले, हमें एक HTML फाइल बनानी होगी जिसमें एक बटन और एक खाली div होगा जहाँ हम सर्वर से प्राप्त डेटा को प्रदर्शित करेंगे। इसके अलावा, JavaScript कोड शामिल होगा जो Ajax अनुरोध को संभालेगा।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>पहला Ajax अनुरोध</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>पहला Ajax अनुरोध</h1>
    <button type="button" onclick="loadData()">डेटा लोड करें</button>
    <div id="result"></div>
</body>
</html>

PHP स्क्रिप्ट बनाना (Creating the PHP Script)

अब, हमें एक PHP स्क्रिप्ट बनानी होगी जो सर्वर पर अनुरोध को प्रोसेस करेगी और डेटा वापस भेजेगी। इस उदाहरण में, हम एक साधारण संदेश वापस भेजेंगे।

data.php:

कोड का काम करने का तरीका (How the Code Works)

HTML फाइल: इसमें एक बटन और एक div है जिसे ID “result” दी गई है। जब बटन पर क्लिक किया जाता है, तो loadData() फंक्शन कॉल होता है।
JavaScript कोड: loadData() फंक्शन एक XMLHttpRequest ऑब्जेक्ट बनाता है और data.php से डेटा प्राप्त करने के लिए एक GET अनुरोध भेजता है। जब सर्वर प्रतिक्रिया देता है और प्रतिक्रिया की स्थिति 200 (OK) होती है, तो प्राप्त डेटा div के भीतर प्रदर्शित किया जाता है।
PHP स्क्रिप्ट: data.php स्क्रिप्ट एक साधारण टेक्स्ट प्रतिक्रिया भेजती है जो “यह सर्वर से प्राप्त डेटा है।” होता है।

परिणाम (Result)

जब आप HTML पेज को ब्राउज़र में खोलते हैं और “डेटा लोड करें” बटन पर क्लिक करते हैं, तो सर्वर से डेटा लोड होता है और “result” div में प्रदर्शित होता है। यह प्रक्रिया बिना पेज को रीलोड किए होती है, जिससे उपयोगकर्ता अनुभव बेहतर होता है।

<!DOCTYPE html>
<html>
<head>
    <title>पहला Ajax अनुरोध</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>पहला Ajax अनुरोध</h1>
    <button type="button" onclick="loadData()">डेटा लोड करें</button>
    <div id="result"></div>
</body>
</html>

data.php:

इस प्रकार, हमने एक सरल Ajax अनुरोध बनाया जो PHP स्क्रिप्ट से डेटा प्राप्त करता है और वेब पेज पर प्रदर्शित करता है। अगले सेक्शन में, हम देखेंगे कि कैसे Ajax और JSON का उपयोग करके डेटा का आदान-प्रदान किया जा सकता है।

सेक्शन 3: Ajax और JSON (Ajax and JSON)

JSON (JavaScript Object Notation) एक लोकप्रिय डेटा फॉर्मेट है जो Ajax अनुरोधों के साथ अक्सर उपयोग किया जाता है। JSON डेटा को पढ़ना और लिखना आसान होता है, और यह वेब एप्लिकेशन्स में डेटा के आदान-प्रदान के लिए बहुत उपयुक्त है। इस सेक्शन में, हम देखेंगे कि कैसे Ajax और JSON का उपयोग करके डेटा का आदान-प्रदान किया जा सकता है।

JSON का परिचय (Introduction to JSON)

JSON एक हल्का डेटा इंटरचेंज फॉर्मेट है जो मानव-पढ़ने योग्य टेक्स्ट को उपयोग करता है। यह मुख्य रूप से JavaScript में उपयोग किया जाता है, लेकिन अधिकांश प्रोग्रामिंग भाषाएं JSON को पार्स और जेनरेट कर सकती हैं।

JSON डेटा फॉर्मेट (JSON Data Format)

Ajax के साथ JSON का उपयोग (Using JSON with Ajax)

इस उदाहरण में, हम एक JSON ऑब्जेक्ट सर्वर से प्राप्त करेंगे और उसे HTML में प्रदर्शित करेंगे।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax और JSON</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    document.getElementById("name").innerHTML = "Name: " + response.name;
                    document.getElementById("email").innerHTML = "Email: " + response.email;
                }
            };
            xhttp.open("GET", "data.json", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>Ajax और JSON</h1>
    <button type="button" onclick="loadData()">डेटा लोड करें</button>
    <div id="name"></div>
    <div id="email"></div>
</body>
</html>

data.json:

इस उदाहरण में:

index.html: एक बटन और दो div तत्व होते हैं। जब बटन पर क्लिक किया जाता है, तो loadData() फंक्शन कॉल होता है।
loadData() फंक्शन: एक XMLHttpRequest ऑब्जेक्ट बनाता है और data.json फाइल से डेटा प्राप्त करने के लिए एक GET अनुरोध भेजता है। सर्वर प्रतिक्रिया प्राप्त करने के बाद, JSON डेटा को पार्स किया जाता है और HTML तत्वों में प्रदर्शित किया जाता है।

JSON के साथ PHP का उपयोग (Using JSON with PHP)

अब, हम देखेंगे कि कैसे PHP स्क्रिप्ट का उपयोग करके JSON डेटा उत्पन्न किया जा सकता है और Ajax के माध्यम से प्राप्त किया जा सकता है।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax और JSON</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    document.getElementById("name").innerHTML = "Name: " + response.name;
                    document.getElementById("email").innerHTML = "Email: " + response.email;
                }
            };
            xhttp.open("GET", "data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>Ajax और JSON</h1>
    <button type="button" onclick="loadData()">डेटा लोड करें</button>
    <div id="name"></div>
    <div id="email"></div>
</body>
</html>

data.php:

इस उदाहरण में:

index.html: HTML और JavaScript कोड वही रहता है।
data.php: PHP स्क्रिप्ट एक एसोसिएटिव ऐरे बनाता है और उसे JSON फॉर्मेट में एन्कोड करके वापस भेजता है। header(‘Content-Type: application/json’) का उपयोग प्रतिक्रिया के कंटेंट टाइप को JSON के रूप में सेट करने के लिए किया जाता है।

परिणाम (Result)

जब आप HTML पेज को ब्राउज़र में खोलते हैं और “डेटा लोड करें” बटन पर क्लिक करते हैं, तो JSON डेटा सर्वर से लोड होता है और “name” और “email” div में प्रदर्शित होता है। यह प्रक्रिया बिना पेज को रीलोड किए होती है, जिससे उपयोगकर्ता अनुभव बेहतर होता है।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax और JSON</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    document.getElementById("name").innerHTML = "Name: " + response.name;
                    document.getElementById("email").innerHTML = "Email: " + response.email;
                }
            };
            xhttp.open("GET", "data.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <h1>Ajax और JSON</h1>
    <button type="button" onclick="loadData()">डेटा लोड करें</button>
    <div id="name"></div>
    <div id="email"></div>
</body>
</html>

data.php:

इस प्रकार, हमने देखा कि कैसे Ajax और JSON का उपयोग करके सर्वर से डेटा प्राप्त और प्रदर्शित किया जा सकता है। अगले सेक्शन में, हम देखेंगे कि कैसे Ajax का उपयोग करके HTML फॉर्म डेटा को सर्वर पर सबमिट किया जा सकता है।

Ajax के साथ फॉर्म डेटा सबमिट करना (Submitting Form Data with Ajax)

Ajax का उपयोग HTML फॉर्म डेटा को सर्वर पर सबमिट करने के लिए किया जा सकता है, जिससे पेज को रीलोड करने की आवश्यकता नहीं होती है। यह उपयोगकर्ता अनुभव को बेहतर बनाता है और फॉर्म सबमिशन को अधिक प्रतिक्रियाशील बनाता है। इस सेक्शन में, हम देखेंगे कि कैसे Ajax का उपयोग करके फॉर्म डेटा को PHP स्क्रिप्ट पर सबमिट किया जा सकता है और सर्वर से प्रतिक्रिया प्राप्त की जा सकती है।

HTML फॉर्म बनाना (Creating the HTML Form)

सबसे पहले, हमें एक HTML फॉर्म बनाना होगा जिसमें उपयोगकर्ता का नाम और ईमेल पता शामिल होगा।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax के साथ फॉर्म डेटा सबमिट करना</title>
    <script>
        function submitForm() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response").innerHTML = this.responseText;
                }
            };
            xhttp.open("POST", "submit.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            xhttp.send("name=" + name + "&email=" + email);
        }
    </script>
</head>
<body>
    <h1>Ajax के साथ फॉर्म डेटा सबमिट करना</h1>
    <form onsubmit="event.preventDefault(); submitForm();">
        <label for="name">नाम:</label><br>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">ईमेल:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <input type="submit" value="सबमिट करें">
    </form>
    <div id="response"></div>
</body>
</html>

PHP स्क्रिप्ट बनाना (Creating the PHP Script)

अब, हमें एक PHP स्क्रिप्ट बनानी होगी जो फॉर्म डेटा को प्रोसेस करेगी और प्रतिक्रिया वापस भेजेगी।

submit.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];

    // फॉर्म डेटा प्रोसेसिंग (जैसे डेटा स्टोर करना)
    // यहां हम केवल डेटा को वापस इको कर रहे हैं
    echo "नाम: " . htmlspecialchars($name) . "<br>";
    echo "ईमेल: " . htmlspecialchars($email);
} else {
    echo "त्रुटि: फॉर्म डेटा प्राप्त नहीं हुआ।";
}
?>

कोड का काम करने का तरीका (How the Code Works)

HTML फॉर्म: इसमें उपयोगकर्ता का नाम और ईमेल पता इनपुट फील्ड शामिल हैं, और एक सबमिट बटन है। फॉर्म की onsubmit इवेंट को submitForm() फंक्शन द्वारा प्रबंधित किया जाता है।
JavaScript कोड: submitForm() फंक्शन एक XMLHttpRequest ऑब्जेक्ट बनाता है और submit.php फाइल पर POST अनुरोध भेजता है। फॉर्म डेटा को application/x-www-form-urlencoded फॉर्मेट में सर्वर पर भेजा जाता है।
PHP स्क्रिप्ट: submit.php स्क्रिप्ट फॉर्म डेटा प्राप्त करती है और उसे प्रोसेस करती है। प्राप्त डेटा को HTML में सुरक्षित रूप से प्रदर्शित किया जाता है।

परिणाम (Result)

जब आप HTML पेज को ब्राउज़र में खोलते हैं और फॉर्म को सबमिट करते हैं, तो फॉर्म डेटा सर्वर पर भेजा जाता है और प्रोसेस होता है। सर्वर की प्रतिक्रिया response div में प्रदर्शित होती है। यह प्रक्रिया बिना पेज को रीलोड किए होती है, जिससे उपयोगकर्ता अनुभव बेहतर होता है।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax के साथ फॉर्म डेटा सबमिट करना</title>
    <script>
        function submitForm() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response").innerHTML = this.responseText;
                }
            };
            xhttp.open("POST", "submit.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            xhttp.send("name=" + name + "&email=" + email);
        }
    </script>
</head>
<body>
    <h1>Ajax के साथ फॉर्म डेटा सबमिट करना</h1>
    <form onsubmit="event.preventDefault(); submitForm();">
        <label for="name">नाम:</label><br>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">ईमेल:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <input type="submit" value="सबमिट करें">
    </form>
    <div id="response"></div>
</body>
</html>

submit.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];

    // फॉर्म डेटा प्रोसेसिंग (जैसे डेटा स्टोर करना)
    // यहां हम केवल डेटा को वापस इको कर रहे हैं
    echo "नाम: " . htmlspecialchars($name) . "<br>";
    echo "ईमेल: " . htmlspecialchars($email);
} else {
    echo "त्रुटि: फॉर्म डेटा प्राप्त नहीं हुआ।";
}
?>

इस प्रकार, हमने देखा कि कैसे Ajax का उपयोग करके HTML फॉर्म डेटा को PHP स्क्रिप्ट पर सबमिट किया जा सकता है और सर्वर से प्रतिक्रिया प्राप्त की जा सकती है। अगले सेक्शन में, हम लाइव डेटा अपडेट्स पर चर्चा करेंगे।

लाइव डेटा अपडेट्स (Live Data Updates)

लाइव डेटा अपडेट्स का मतलब है कि वेब पेज को बिना रीफ्रेश किए ही सर्वर से डेटा प्राप्त करना और उसे प्रदर्शित करना। यह तकनीक रीयल-टाइम एप्लिकेशन्स जैसे चैट एप्लिकेशन, लाइव कमेंटिंग सिस्टम, और लाइव फीड्स के लिए बहुत उपयोगी होती है। इस सेक्शन में, हम देखेंगे कि कैसे Ajax का उपयोग करके लाइव डेटा अपडेट्स को लागू किया जा सकता है।

HTML और JavaScript बनाना (Creating HTML and JavaScript)

हम एक HTML पेज बनाएंगे जो एक बटन क्लिक इवेंट का उपयोग करके सर्वर से डेटा प्राप्त करेगा और हर कुछ सेकंड में डेटा को स्वचालित रूप से रिफ्रेश करेगा।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>लाइव डेटा अपडेट्स</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("live-data").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "live_data.php", true);
            xhttp.send();
        }

        function startLiveUpdates() {
            loadData(); // तुरंत डेटा लोड करना
            setInterval(loadData, 5000); // हर 5 सेकंड में डेटा लोड करना
        }
    </script>
</head>
<body onload="startLiveUpdates()">
    <h1>लाइव डेटा अपडेट्स</h1>
    <div id="live-data"></div>
</body>
</html>

PHP स्क्रिप्ट बनाना (Creating the PHP Script)

अब, हमें एक PHP स्क्रिप्ट बनानी होगी जो सर्वर से डेटा प्राप्त करेगी और उसे वापस भेजेगी।

live_data.php:

कोड का काम करने का तरीका (How the Code Works)

HTML फाइल: इसमें एक div तत्व है जहाँ लाइव डेटा प्रदर्शित होगा। जब पेज लोड होता है, तो startLiveUpdates() फंक्शन कॉल होता है।
JavaScript कोड: startLiveUpdates() फंक्शन loadData() फंक्शन को तुरंत कॉल करता है और फिर हर 5 सेकंड में loadData() फंक्शन को पुनः कॉल करने के लिए setInterval() का उपयोग करता है।
loadData() फंक्शन: एक XMLHttpRequest ऑब्जेक्ट बनाता है और live_data.php से डेटा प्राप्त करने के लिए एक GET अनुरोध भेजता है। सर्वर प्रतिक्रिया प्राप्त करने के बाद, डेटा को “live-data” div में प्रदर्शित किया जाता है।
PHP स्क्रिप्ट: live_data.php स्क्रिप्ट सर्वर का वर्तमान समय वापस भेजती है। यह उदाहरण दिखाता है कि कैसे आप सर्वर से डेटा प्राप्त कर सकते हैं और उसे लाइव अपडेट कर सकते हैं।

परिणाम (Result)

जब आप HTML पेज को ब्राउज़र में खोलते हैं, तो पेज लोड होते ही सर्वर से डेटा प्राप्त होता है और “live-data” div में प्रदर्शित होता है। हर 5 सेकंड में, यह डेटा स्वचालित रूप से रिफ्रेश होता है और नवीनतम डेटा प्रदर्शित होता है। यह बिना पेज को रीलोड किए होता है, जिससे उपयोगकर्ता अनुभव बेहतर होता है।

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>लाइव डेटा अपडेट्स</title>
    <script>
        function loadData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("live-data").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "live_data.php", true);
            xhttp.send();
        }

        function startLiveUpdates() {
            loadData(); // तुरंत डेटा लोड करना
            setInterval(loadData, 5000); // हर 5 सेकंड में डेटा लोड करना
        }
    </script>
</head>
<body onload="startLiveUpdates()">
    <h1>लाइव डेटा अपडेट्स</h1>
    <div id="live-data"></div>
</body>
</html>

live_data.php:

इस प्रकार, हमने देखा कि कैसे Ajax का उपयोग करके लाइव डेटा अपडेट्स को लागू किया जा सकता है। यह तकनीक रीयल-टाइम एप्लिकेशन्स के लिए बहुत उपयोगी है और उपयोगकर्ता अनुभव को बेहतर बनाती है। अगले सेक्शन में, हम Ajax अनुरोधों में त्रुटियों को हैंडल करने के तरीकों पर चर्चा करेंगे।