PHP Ajax ट्यूटोरियल उदाहरण के साथ

अजाक्स क्या है?

AJAX पूर्ण रूप एसिंक्रोनस है Javaलिपि & XML. यह एक ऐसी तकनीक है जो सर्वर और क्लाइंट के बीच इंटरैक्शन को कम करती है। यह पूरे पेज के बजाय वेब पेज के केवल एक हिस्से को अपडेट करके ऐसा करता है। एसिंक्रोनस इंटरैक्शन किसके द्वारा शुरू किए जाते हैं Javaस्क्रिप्ट.AJAX का उद्देश्य पृष्ठ रिफ्रेश किए बिना सर्वर के साथ छोटी मात्रा में डेटा का आदान-प्रदान करना है।

Javaलिपि एक क्लाइंट साइड स्क्रिप्टिंग भाषा है। इसे क्लाइंट साइड पर उन वेब ब्राउज़र द्वारा निष्पादित किया जाता है जो इसका समर्थन करते हैं Javaस्क्रिप्ट।Javaस्क्रिप्ट कोड केवल उन्हीं ब्राउज़र में काम करता है जिनमें Javaस्क्रिप्ट सक्षम.

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

AJAX का उपयोग क्यों करें?

यह डेस्कटॉप अनुप्रयोगों की तरह ही समृद्ध इंटरैक्टिव वेब अनुप्रयोगों को विकसित करने की अनुमति देता है।
सत्यापन तब किया जा सकता है जब उपयोगकर्ता फॉर्म भरता है, उसे सबमिट किए बिना। इसे ऑटो कम्प्लीशन का उपयोग करके प्राप्त किया जा सकता है। उपयोगकर्ता द्वारा टाइप किए गए शब्द प्रोसेसिंग के लिए सर्वर को सबमिट किए जाते हैं। सर्वर उपयोगकर्ता द्वारा दर्ज किए गए कीवर्ड से मेल खाने वाले कीवर्ड के साथ प्रतिक्रिया करता है।
इसका उपयोग किसी अन्य ड्रॉपडाउन बॉक्स के मान के आधार पर ड्रॉपडाउन बॉक्स को पॉप्युलेट करने के लिए किया जा सकता है
सर्वर से डेटा प्राप्त किया जा सकता है और पूरे पेज को लोड किए बिना पेज के केवल एक निश्चित हिस्से को अपडेट किया जा सकता है। यह वेब पेज के उन हिस्सों के लिए बहुत उपयोगी है जो इस तरह की चीज़ें लोड करते हैं
Tweets
टिप्पणियाँ
साइट पर आने वाले उपयोगकर्ता आदि।

PHP Ajax एप्लीकेशन कैसे बनाएं

हम एक सरल एप्लिकेशन बनाएंगे जो उपयोगकर्ताओं को लोकप्रिय PHP MVC फ्रेमवर्क खोजने की अनुमति देगा।

हमारे एप्लिकेशन में एक टेक्स्ट बॉक्स होगा जिसमें उपयोगकर्ता फ्रेमवर्क का नाम टाइप करेंगे।

इसके बाद हम मिलान खोजने के लिए mvc AJAX का उपयोग करेंगे, फिर खोज फॉर्म के ठीक नीचे फ्रेमवर्क का पूरा नाम प्रदर्शित करेंगे।

चरण 1) इंडेक्स पेज बनाना

Index.php

<html>

    <head>

        <title>PHP MVC Frameworks - Search Engine</title>

        <script type="text/javascript" src="auto_complete.js"></script>

    </head>

    <body>

        <h2>PHP MVC Frameworks - Search Engine</h2>

        <p><b>Type the first letter of the PHP MVC Framework</b></p>

        <form method="POST" action="index.php">

            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>

        </form>

        <p>Matches: <span id="txtName"></span></p>

    </body>

</html>

यहाँ,

“onkeyup="showName(this.value)"" निष्पादित करता है Javaस्क्रिप्ट फ़ंक्शन showName हर बार जब कोई कुंजी टेक्स्टबॉक्स में टाइप की जाती है। इस सुविधा को ऑटो कम्प्लीट कहा जाता है

चरण 2) फ्रेमवर्क पृष्ठ बनाना

फ्रेमवर्क.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

    $match = "";

    for ($i = 0; $i < count($frameworks); $i++) {

        if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

            if ($match == "") {

                $match = $frameworks[$i];

            } else {

                $match = $match . " , " . $frameworks[$i];

            }

        }

    }

}

echo ($match == "") ? 'no match found' : $match;

?>

चरण 3) JS स्क्रिप्ट बनाना

ऑटो_कम्प्लीट.js

function showName(str){

    if (str.length == 0){ //exit function if nothing has been typed in the textbox

        document.getElementById("txtName").innerHTML=""; //clear previous results

        return;

    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {// code for IE6, IE5

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

            document.getElementById("txtName").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET","frameworks.php?name="+str,true);

    xmlhttp.send();

}

यहाँ,

“if (str.length == 0)” स्ट्रिंग की लंबाई जाँचें। यदि यह 0 है, तो स्क्रिप्ट का शेष भाग निष्पादित नहीं होता है।
“if (window.XMLHttpRequest)…” इंटरनेट एक्सप्लोरर संस्करण 5 और 6 AJAX कार्यान्वयन के लिए ActiveXObject का उपयोग करते हैं। अन्य संस्करण और ब्राउज़र जैसे क्रोम, फायरFox XMLHttpRequest का उपयोग करें। यह कोड सुनिश्चित करेगा कि हमारा एप्लिकेशन IE 5 और 6 और IE और ब्राउज़र के अन्य उच्च संस्करणों में काम करता है।
“xmlhttp.onreadystatechange=function…” जाँचता है कि क्या AJAX इंटरैक्शन पूरा हो गया है और स्थिति 200 है, फिर लौटाए गए परिणामों के साथ txtName स्पैन को अपडेट करता है।

चरण 4) हमारे PHP Ajax अनुप्रयोग का परीक्षण

मान लें कि आपने index.php फ़ाइल को phututs/ajax में सहेजा है, तो URL http://localhost/phptuts/ajax/index.php पर ब्राउज़ करें

टेक्स्ट बॉक्स में अक्षर C टाइप करें आपको निम्नलिखित परिणाम मिलेंगे।

उपरोक्त उदाहरण AJAX की अवधारणा को प्रदर्शित करता है तथा यह बताता है कि यह किस प्रकार समृद्ध अंतःक्रियात्मक अनुप्रयोग बनाने में हमारी सहायता कर सकता है।

सारांश

AJAX, एसिंक्रोनस का संक्षिप्त रूप है Javaलिपि और एक्सएमएल
AJAX एक ऐसी तकनीक है जिसका उपयोग समृद्ध इंटरैक्शन अनुप्रयोगों को बनाने के लिए किया जाता है जो वेब पेज के केवल कुछ हिस्सों को अपडेट करके क्लाइंट और सर्वर के बीच इंटरैक्शन को कम करते हैं।
इंटरनेट एक्सप्लोरर संस्करण 5 और 6 AJAX संचालन को कार्यान्वित करने के लिए ActiveXObject का उपयोग करते हैं।
इंटरनेट एक्सप्लोरर संस्करण 7 और ऊपर और ब्राउज़र क्रोम, Firefox, Opera, और Safari XMLHttpRequest का उपयोग करते हैं।