AJAX - त्वरित गाइड

AJAX के लिए खड़ा है Aएक समय का JavaScript और Xएमएल। AJAX XML, HTML, CSS और जावा स्क्रिप्ट की मदद से बेहतर, तेज और अधिक इंटरैक्टिव वेब एप्लिकेशन बनाने के लिए एक नई तकनीक है।

• Ajax डायनामिक कंटेंट डिस्प्ले के लिए डॉक्यूमेंट के लिए XHTML, प्रेजेंटेशन के लिए CSS, डॉक्यूमेंट ऑब्जेक्ट मॉडल और जावास्क्रिप्ट के साथ उपयोग करता है।

• पारंपरिक वेब अनुप्रयोग सिंक्रोनस अनुरोधों का उपयोग करके जानकारी को और उससे गंभीर तक पहुंचाते हैं। इसका मतलब है कि आप एक फॉर्म भरते हैं, सबमिट सबमिट करते हैं, और सर्वर से नई जानकारी के साथ एक नए पृष्ठ पर निर्देशित होते हैं।

• AJAX के साथ, जब आप सबमिट करते हैं, तो जावास्क्रिप्ट सर्वर से अनुरोध करेगा, परिणामों की व्याख्या करेगा, और वर्तमान स्क्रीन को अपडेट करेगा। शुद्धतम अर्थों में, उपयोगकर्ता को कभी भी नहीं पता होगा कि कुछ भी सर्वर को प्रेषित किया गया था।

• XML का उपयोग आमतौर पर सर्वर डेटा प्राप्त करने के लिए प्रारूप के रूप में किया जाता है, हालाँकि सादे पाठ सहित किसी भी प्रारूप का उपयोग किया जा सकता है।

• AJAX एक वेब ब्राउज़र तकनीक है जो वेब सर्वर सॉफ्टवेयर से स्वतंत्र है।

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

• सहज और स्वाभाविक उपयोगकर्ता बातचीत। क्लिक करने की आवश्यकता नहीं है, माउस आंदोलन एक पर्याप्त घटना ट्रिगर है।

• पृष्ठ-चालित के विपरीत डेटा-चालित।

रिच इंटरनेट अनुप्रयोग प्रौद्योगिकी

AJAX अब तक की सबसे व्यवहार्य रिच इंटरनेट एप्लीकेशन (RIA) तकनीक है। यह जबरदस्त उद्योग गति प्राप्त कर रहा है और कई टूल किट और ढांचे उभर रहे हैं। लेकिन एक ही समय में, AJAX में ब्राउज़र असंगतता है और यह जावास्क्रिप्ट द्वारा समर्थित है, जिसे बनाए रखना और डिबग करना कठिन है।

AJAX ओपन स्टैंडर्ड्स पर आधारित है

AJAX निम्नलिखित खुले मानकों पर आधारित है -

• HTML और कैस्केडिंग स्टाइल शीट्स (CSS) का उपयोग करके ब्राउज़र-आधारित प्रस्तुति।
• डेटा को XML प्रारूप में संग्रहीत किया जाता है और सर्वर से लाया जाता है।
• ब्राउज़र में XMLHttpRequest ऑब्जेक्ट का उपयोग करके डेटा-बिहाइंड बैक डेटा।
• सब कुछ करने के लिए जावास्क्रिप्ट।

AJAX स्वतंत्र रूप से काम नहीं कर सकता। यह इंटरेक्टिव वेबपेज बनाने के लिए अन्य तकनीकों के साथ संयोजन में उपयोग किया जाता है।

जावास्क्रिप्ट

• ढीली टाइपिंग की भाषा।
• किसी पृष्ठ में कोई घटना घटने पर जावास्क्रिप्ट फ़ंक्शन को कहा जाता है।
• पूरे AJAX ऑपरेशन के लिए गोंद।

डोम

• संरचित दस्तावेजों तक पहुंचने और हेरफेर करने के लिए एपीआई।
• XML और HTML दस्तावेज़ों की संरचना का प्रतिनिधित्व करता है।

सीएसएस

• प्रस्तुति शैली की सामग्री से स्पष्ट पृथक्करण के लिए अनुमति देता है और जावास्क्रिप्ट द्वारा प्रोग्रामेटिक रूप से बदला जा सकता है

XMLHttpRequest

• जावास्क्रिप्ट ऑब्जेक्ट जो सर्वर के साथ अतुल्यकालिक बातचीत करता है।

यहाँ कुछ प्रसिद्ध वेब अनुप्रयोगों की सूची दी गई है जो AJAX का उपयोग करते हैं।

गूगल मानचित्र

एक उपयोगकर्ता एक बटन पर क्लिक करने के बजाय, माउस का उपयोग करके पूरे मानचित्र को खींच सकता है।

• https://maps.google.com/

Google सुझाव

जैसे ही आप टाइप करते हैं, Google सुझाव देता है। परिणाम नेविगेट करने के लिए तीर कुंजियों का उपयोग करें।

• https://www.google.com/webhp?complete=1&hl=en

जीमेल लगीं

Gmail एक वेबमेल है जो इस विचार पर बनाया गया है कि ईमेल अधिक सहज, कुशल और उपयोगी हो सकते हैं।

• https://gmail.com/

याहू मैप्स (नया)

अब आप जहां जा रहे हैं वहां पहुंचना और भी आसान और मजेदार है!

• https://maps.yahoo.com/

AJAX और पारंपरिक CGI कार्यक्रम के बीच अंतर

एक-एक करके इन दोनों उदाहरणों को आज़माएँ और आपको फर्क महसूस होगा। AJAX के उदाहरण की कोशिश करते समय, कोई असंतोष नहीं है और आपको प्रतिक्रिया बहुत जल्दी मिलती है, लेकिन जब आप मानक GCI उदाहरण का प्रयास करते हैं, तो आपको प्रतिक्रिया का इंतजार करना होगा और आपका पृष्ठ भी ताज़ा हो जाएगा।

AJAX उदाहरण

मानक उदाहरण

NOTE- हमने AJAX डेटाबेस में अधिक जटिल उदाहरण दिया है ।

सभी उपलब्ध ब्राउज़र AJAX का समर्थन नहीं कर सकते हैं। यहां उन प्रमुख ब्राउज़रों की सूची दी गई है जो AJAX का समर्थन करते हैं।

• मोज़िला फ़ायरफ़ॉक्स 1.0 और ऊपर।
• नेटस्केप संस्करण 7.1 और ऊपर।
• ऐप्पल सफारी 1.2 और इसके बाद के संस्करण।
• Microsoft इंटरनेट एक्सप्लोरर 5 और इसके बाद के संस्करण।
• Konqueror.
• ओपेरा 7.6 और इसके बाद के संस्करण।

जब आप अपना अगला एप्लिकेशन लिखते हैं, तो उन ब्राउज़रों पर विचार करें जो AJAX का समर्थन नहीं करते हैं।

NOTE - जब हम कहते हैं कि कोई ब्राउज़र AJAX का समर्थन नहीं करता है, तो इसका सीधा सा मतलब है कि ब्राउज़र जावास्क्रिप्ट ऑब्जेक्ट के निर्माण का समर्थन नहीं करता है - XMLHttpRequest ऑब्जेक्ट।

लेखन ब्राउज़र विशिष्ट कोड

किसी ब्राउज़र के साथ अपने स्रोत कोड को संगत बनाने का सबसे सरल तरीका है प्रयास करें ... अपने जावास्क्रिप्ट में ब्लॉक पकड़ें।

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

उपरोक्त जावास्क्रिप्ट कोड में, हम अपने XMLHttpRequest ऑब्जेक्ट को बनाने के लिए तीन बार प्रयास करते हैं। हमारा पहला प्रयास -

• ajaxRequest = नया XMLHttpRequest ();

यह ओपेरा 8.0+, फ़ायरफ़ॉक्स और सफारी ब्राउज़र के लिए है। यदि यह विफल रहता है, तो हम Internet Explorer ब्राउज़र के लिए सही ऑब्जेक्ट बनाने के लिए दो बार और प्रयास करते हैं -

• ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");
• ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");

यदि यह काम नहीं करता है, तो हम एक बहुत पुराने ब्राउज़र का उपयोग कर सकते हैं जो XMLHttpRequest का समर्थन नहीं करता है, जिसका अर्थ यह भी है कि यह AJAX का समर्थन नहीं करता है।

सबसे अधिक संभावना है, हालांकि, हमारे वैरिएबल ajaxRequest अब जो भी XMLHttpRequest मानक ब्राउज़र का उपयोग करता है और हम सर्वर पर डेटा भेजना शुरू कर सकते हैं। चरण-वार AJAX वर्कफ़्लो को अगले अध्याय में समझाया गया है।

यह अध्याय आपको AJAX संचालन के सटीक चरणों की स्पष्ट तस्वीर देता है।

AJAX ऑपरेशन के चरण

• एक क्लाइंट इवेंट होता है।
• XMLHttpRequest ऑब्जेक्ट बनाया जाता है।
• XMLHttpRequest ऑब्जेक्ट कॉन्फ़िगर किया गया है।
• XMLHttpRequest ऑब्जेक्ट वेबसर्वर के लिए एक अतुल्यकालिक अनुरोध करता है।
• वेबसर्वर XML दस्तावेज़ वाले परिणाम देता है।
• XMLHttpRequest ऑब्जेक्ट कॉलबैक () फ़ंक्शन को कॉल करता है और परिणाम को संसाधित करता है।
• HTML DOM को अपडेट किया गया है।

आइए हम एक-एक करके ये कदम उठाएँ।

एक ग्राहक घटना होती है

• एक जावास्क्रिप्ट फ़ंक्शन को एक घटना के परिणाम के रूप में कहा जाता है।

• उदाहरण - validateUserId () जावास्क्रिप्ट फ़ंक्शन को ईवेंट हैंडलर के रूप में इनपुट फॉर्म फ़ील्ड पर ऑनकीअप ईवेंट में मैप किया जाता है, जिसकी आईडी "userid" पर सेट है

• <input type = "text" size = "20" id = "userid" नाम = "id" onkeyup = "validateUserId ();">।

XMLHttpRequest ऑब्जेक्ट बनाया गया है

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

XMLHttpRequest ऑब्जेक्ट कॉन्फ़िगर किया गया है

इस चरण में, हम एक फ़ंक्शन लिखेंगे जो क्लाइंट इवेंट द्वारा ट्रिगर किया जाएगा और एक कॉलबैक फ़ंक्शन प्रक्रियाप्रकाश () पंजीकृत किया जाएगा।

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

वेबसर्वर के लिए एसिंक्रोनस अनुरोध करना

सोर्स कोड उपरोक्त कोड में उपलब्ध है। बोल्ड टाइपफेस में लिखा कोड वेबसर्वर के लिए अनुरोध करने के लिए जिम्मेदार है। यह सब XMLHttpRequest ऑब्जेक्ट ajaxRequest का उपयोग करके किया जा रहा है ।

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid"); var url = "validate?id = " + escape(target.value); ajaxRequest.open("GET", url, true); ajaxRequest.send(null);
}

मान लें कि आप उपयोगकर्ता के बॉक्स में ज़रा दर्ज करते हैं, तो उपरोक्त अनुरोध में, URL "मान्य = आईडी = ज़ारा" पर सेट है।

वेबसर्वर XML दस्तावेज़ सहित परिणाम लौटाता है

आप अपने सर्वर-साइड स्क्रिप्ट को किसी भी भाषा में लागू कर सकते हैं, हालांकि इसका तर्क निम्नानुसार होना चाहिए।

• क्लाइंट से एक अनुरोध प्राप्त करें।
• क्लाइंट से इनपुट पार्स करें।
• आवश्यक प्रसंस्करण करें।
• ग्राहक को आउटपुट भेजें।

यदि हम मानते हैं कि आप एक सर्वलेट लिखने जा रहे हैं, तो यहाँ कोड का टुकड़ा है।

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

कॉलबैक फंक्शन processRequest () को कॉल किया जाता है

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

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTML DOM को Updated है

यह अंतिम चरण है और इस चरण में, आपका HTML पृष्ठ अपडेट हो जाएगा। यह निम्न प्रकार से होता है -

• DOM को API का उपयोग करते हुए किसी पृष्ठ में किसी भी तत्व का संदर्भ मिलता है।
• किसी तत्व का संदर्भ प्राप्त करने का अनुशंसित तरीका कॉल करना है।

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

• जावास्क्रिप्ट का उपयोग अब तत्व की विशेषताओं को संशोधित करने के लिए किया जा सकता है; तत्व की शैली गुणों को संशोधित करें; या बाल तत्वों को जोड़ना, हटाना या संशोधित करना। यहाँ एक उदाहरण है -

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

यदि आप उपर्युक्त सात चरणों को समझ चुके हैं, तो आप लगभग AJAX के साथ काम कर रहे हैं। अगले अध्याय में, हम XMLHttpRequest ऑब्जेक्ट को अधिक विस्तार से देखेंगे ।

XMLHttpRequest ऑब्जेक्ट AJAX की कुंजी है। यह जुलाई 2000 में इंटरनेट एक्सप्लोरर 5.5 जारी होने के बाद से उपलब्ध है, लेकिन 2005 में AJAX और वेब 2.0 लोकप्रिय होने तक पूरी तरह से खोजा नहीं गया था।

XMLHttpRequest (XHR) एक एपीआई है जिसका उपयोग जावास्क्रिप्ट, JScript, VBScript और अन्य वेब ब्राउज़र स्क्रिप्टिंग भाषाओं द्वारा किया जा सकता है, जो XML डेटा को HTTP से एक वेबपेज के क्लाइंट-साइड के बीच एक स्वतंत्र कनेक्शन स्थापित करने के लिए, XML डेटा को स्थानांतरित करने और हेरफेर करने के लिए भाषाओं को स्क्रिप्ट करता है। सर्वर साइड।

XMLHttpRequest कॉल से लौटा डेटा अक्सर बैक-एंड डेटाबेस द्वारा प्रदान किया जाएगा। XML के अलावा, XMLHttpRequest का उपयोग अन्य स्वरूपों में डेटा लाने के लिए किया जा सकता है, जैसे JSON या समतल पाठ।

XMLHttpRequest ऑब्जेक्ट बनाने के तरीके के बारे में आप पहले ही कुछ उदाहरण देख चुके हैं।

नीचे सूचीबद्ध कुछ तरीके और गुण हैं जिनसे आपको परिचित होना है।

XMLHttpRequest तरीके

• abort()

  वर्तमान अनुरोध रद्द करता है।

• getAllResponseHeaders()

  HTTP हेडर का पूरा सेट एक स्ट्रिंग के रूप में देता है।

• getResponseHeader( headerName )

  निर्दिष्ट HTTP शीर्ष लेख का मान लौटाता है।

• open( method, URL )

• open( method, URL, async )

• open( method, URL, async, userName )

• open( method, URL, async, userName, password )

  अनुरोध के तरीके, URL और अन्य वैकल्पिक विशेषताओं को निर्दिष्ट करता है।

  विधि पैरामीटर में "GET", "POST", या "HEAD" का मान हो सकता है। अन्य HTTP तरीके जैसे कि "PUT" और "DELETE" (मुख्य रूप से REST अनुप्रयोगों में उपयोग किया जाता है) संभव हो सकता है।

  "Async" पैरामीटर निर्दिष्ट करता है कि अनुरोध को एसिंक्रोनस रूप से संभाला जाना चाहिए या नहीं। "सत्य" का अर्थ है कि स्क्रिप्ट प्रसंस्करण प्रतिक्रिया के इंतजार के बिना भेजने () पद्धति के बाद होता है, और "गलत" का अर्थ है कि स्क्रिप्ट स्क्रिप्ट प्रसंस्करण जारी रखने से पहले प्रतिक्रिया का इंतजार करती है।

• send( content )

  अनुरोध भेजता है।

• setRequestHeader( label, value )

  भेजे जाने वाले HTTP हेडर पर एक लेबल / वैल्यू पेयर जोड़ता है।

XMLHttpRequest गुण

• onreadystatechange

  एक घटना के लिए एक घटना हैंडलर जो हर राज्य परिवर्तन पर आग लगाती है।

• readyState

  रेडीस्टेट संपत्ति XMLHttpRequest ऑब्जेक्ट की वर्तमान स्थिति को परिभाषित करती है।

  निम्न तालिका तैयार संपत्ति के लिए संभावित मूल्यों की एक सूची प्रदान करती है -

राज्य	विवरण
0	अनुरोध को प्रारंभ नहीं किया गया है।
1	अनुरोध सेट किया गया है।
2	अनुरोध भेज दिया गया है।
3	अनुरोध प्रक्रिया में है।
4	अनुरोध पूरा हो गया है।

readyState = 0 आपके द्वारा XMLHttpRequest ऑब्जेक्ट बनाने के बाद, लेकिन इससे पहले कि आप खुले () विधि को कॉल करें।

readyState = 1 आपके द्वारा ओपन () विधि को कॉल करने के बाद, लेकिन इससे पहले कि आपने सेंड () कहा हो।

readyState = 2 आपके भेजे जाने के बाद ()।

readyState = 3 ब्राउज़र के बाद सर्वर के साथ संचार स्थापित किया है, लेकिन इससे पहले कि सर्वर ने प्रतिक्रिया पूरी कर ली है।

readyState = 4 अनुरोध पूरा होने के बाद, और प्रतिक्रिया डेटा पूरी तरह से सर्वर से प्राप्त हुआ है।

• responseText

  एक स्ट्रिंग के रूप में प्रतिक्रिया देता है।

• responseXML

  XML के रूप में प्रतिक्रिया देता है। यह संपत्ति एक XML दस्तावेज़ ऑब्जेक्ट लौटाती है, जिसे W3C DOM नोड ट्री विधियों और गुणों का उपयोग करके जांच और पार्स किया जा सकता है।

• status

  एक संख्या के रूप में स्थिति लौटाता है (उदाहरण के लिए, "नहीं मिला" के लिए 404 और "ओके" के लिए 200)।

• statusText

  एक स्ट्रिंग के रूप में स्थिति लौटाता है (उदाहरण के लिए, "नहीं मिला" या "ठीक है")।

स्पष्ट रूप से यह स्पष्ट करने के लिए कि AJAX का उपयोग कर डेटाबेस से जानकारी प्राप्त करना कितना आसान है, हम मक्खी पर MySQL प्रश्नों का निर्माण और "ajax.html" पर परिणाम प्रदर्शित करने जा रहे हैं। लेकिन इससे पहले कि हम आगे बढ़ें, हम जमीनी काम करें। निम्न आदेश का उपयोग करके एक तालिका बनाएँ।

NOTE - हम मान रहे हैं कि निम्नलिखित MySQL ऑपरेशन करने के लिए आपके पास पर्याप्त विशेषाधिकार हैं।

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

अब निम्नलिखित एसक्यूएल स्टेटमेंट का उपयोग करके इस तालिका में निम्नलिखित डेटा को डंप करें -

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

क्लाइंट साइड HTML फ़ाइल

अब हमारे पास अपना क्लाइंट HTML फाइल है, जो ajax.html है, और इसमें निम्नलिखित कोड होंगे -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - क्वेरी में चर को पार करने का तरीका एचटीटीपी मानक के अनुसार है और फॉर्मए है।

URL?variable1 = value1;&variable2 = value2;

उपरोक्त कोड आपको नीचे दिए गए अनुसार एक स्क्रीन देगा -

आपके द्वारा अपनी प्रविष्टि किए जाने के बाद आपका परिणाम इस अनुभाग में यहां प्रदर्शित होगा।

NOTE - यह एक डमी स्क्रीन है।

सर्वर साइड PHP फ़ाइल

आपकी क्लाइंट-साइड स्क्रिप्ट तैयार है। अब, हमें अपने सर्वर-साइड स्क्रिप्ट को लिखना होगा, जो डेटाबेस से उम्र, wpm, और सेक्स लाएगा और इसे क्लाइंट को वापस भेज देगा। निम्न कोड को "ajax-example.php" फ़ाइल में डालें।

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

अब अधिकतम आयु या किसी अन्य बॉक्स में एक मान्य मान (जैसे, 120) दर्ज करके प्रयास करें और फिर क्वेरी MySQL बटन पर क्लिक करें।

आपके द्वारा अपनी प्रविष्टि किए जाने के बाद आपका परिणाम इस अनुभाग में यहां प्रदर्शित होगा।

यदि आपने इस पाठ को सफलतापूर्वक पूरा कर लिया है, तो आप जानते हैं कि AJAX अनुप्रयोगों को लिखने के लिए कैसे MySQL, PHP, HTML और जावास्क्रिप्ट का उपयोग किया जाता है।

AJAX सुरक्षा: सर्वर साइड

• AJAX आधारित वेब अनुप्रयोग नियमित वेब अनुप्रयोगों की समान सर्वर-साइड सुरक्षा योजनाओं का उपयोग करते हैं।

• आप अपने web.xml फ़ाइल (घोषणात्मक) या अपने प्रोग्राम (प्रोग्रामेटिक) में प्रमाणीकरण, प्राधिकरण और डेटा सुरक्षा आवश्यकताओं को निर्दिष्ट करते हैं।

• AJAX आधारित वेब अनुप्रयोग नियमित वेब अनुप्रयोगों के समान सुरक्षा खतरों के अधीन हैं।

AJAX सुरक्षा: क्लाइंट साइड

• जावास्क्रिप्ट कोड एक उपयोगकर्ता / हैकर को दिखाई देता है। हैकर सर्वर-साइड कमजोरियों का सामना करने के लिए जावास्क्रिप्ट कोड का उपयोग कर सकता है।

• जावास्क्रिप्ट कोड को सर्वर से डाउनलोड किया जाता है और क्लाइंट में "निष्कासित" (निष्पादित) किया जाता है और ग्राहक को गैर-इच्छित कोड से समझौता कर सकता है।

• डाउनलोड किए गए जावास्क्रिप्ट कोड को सैंड-बॉक्स सुरक्षा मॉडल द्वारा विवश किया गया है और हस्ताक्षरित जावास्क्रिप्ट के लिए आराम दिया जा सकता है।

AJAX बहुत तेजी से बढ़ रहा है और यही कारण है कि इसमें इसके साथ कई मुद्दे हैं। हमें उम्मीद है कि समय बीतने के साथ, वे हल हो जाएंगे और AJAX वेब अनुप्रयोगों के लिए आदर्श बन जाएगा। हम कुछ मुद्दों को सूचीबद्ध कर रहे हैं जो AJAX वर्तमान में ग्रस्त हैं।

Complexity is increased

• सर्वर-साइड डेवलपर्स को यह समझने की आवश्यकता होगी कि HTML क्लाइंट पेजों के साथ-साथ सर्वर-साइड लॉजिक में प्रेजेंटेशन लॉजिक की आवश्यकता होगी।

• पेज डेवलपर्स में जावास्क्रिप्ट प्रौद्योगिकी कौशल होना चाहिए।

AJAX-based applications can be difficult to debug, test, and maintain

• जावास्क्रिप्ट परीक्षण करना कठिन है - स्वचालित परीक्षण कठिन है।
• जावास्क्रिप्ट में कमजोर प्रतिरूपता।
• अभी तक डिजाइन पैटर्न या सर्वोत्तम अभ्यास दिशानिर्देशों का अभाव।

Toolkits/Frameworks are not mature yet

• उनमें से ज्यादातर बीटा चरण में हैं।

No standardization of the XMLHttpRequest yet

• IE का भावी संस्करण इसे संबोधित करेगा।

No support of XMLHttpRequest in old browsers

• आईफ्रेम मदद करेगा।

JavaScript technology dependency and incompatibility

• कार्य करने के लिए अनुप्रयोगों के लिए सक्षम होना चाहिए।
• अभी भी कुछ ब्राउज़र असंगतताएँ मौजूद हैं।

JavaScript code is visible to a hacker

• खराब डिज़ाइन किए गए जावास्क्रिप्ट कोड सुरक्षा समस्याओं को आमंत्रित कर सकते हैं।