शुरुआती के लिए AJAX

अब इंटरनेट पर नई तकनीकों का एक बहुत सक्रिय विकास (और यहां तक ​​कि उपयोग) है। ऐसी ही एक तकनीक है AJAX ।

AJAX क्या है?

AJAX एक संक्षिप्त नाम है जो एसिंक्रोनस जावास्क्रिप्ट और XML के लिए है। वास्तव में, AJAX कोई नई तकनीक नहीं है, क्योंकि जावास्क्रिप्ट और XML दोनों काफी समय से आसपास हैं, और AJAX संकेतित प्रौद्योगिकियों का संश्लेषण है। AJAX को अक्सर वेब 2.0 शब्द के साथ जोड़ा जाता है और इसे नवीनतम वेब एप्लिकेशन के रूप में जाना जाता है।


AJAX का उपयोग करते समय, हर बार पूरे पृष्ठ को रीफ़्रेश करने की आवश्यकता नहीं होती है, क्योंकि केवल इसका विशिष्ट भाग ही अपडेट किया जाता है। यह बहुत अधिक सुविधाजनक है, क्योंकि आपको लंबे समय तक इंतजार नहीं करना पड़ता है, और अधिक किफायती है, क्योंकि सभी के पास असीमित इंटरनेट का उपयोग नहीं है। सच है, इस मामले में, डेवलपर को यह सुनिश्चित करने की आवश्यकता है कि उपयोगकर्ता को पता है कि पृष्ठ पर क्या हो रहा है। इसे डाउनलोड संकेतकों, पाठ संदेशों का उपयोग करके लागू किया जा सकता है कि सर्वर के साथ डेटा का आदान-प्रदान होता है। आपको यह भी समझना चाहिए कि सभी ब्राउज़र AJAX (ब्राउज़र और पाठ ब्राउज़र के पुराने संस्करण) का समर्थन नहीं करते हैं। प्लस जावास्क्रिप्ट उपयोगकर्ता द्वारा अक्षम किया जा सकता है। इसलिए, किसी को प्रौद्योगिकी के उपयोग का दुरुपयोग नहीं करना चाहिए और वेब साइट पर जानकारी प्रस्तुत करने के वैकल्पिक तरीकों का सहारा लेना चाहिए।


AJAX के लाभों को सारांशित करें:

• एक सुविधाजनक वेब इंटरफ़ेस बनाने की क्षमता
• सक्रिय उपयोगकर्ता सहभागिता
• पूर्ण के बजाय आंशिक पृष्ठ पुनः लोड करें
• उपयोग की सरलता

AJAX एक वेब पेज के साथ काम करने के लिए दो तरीकों का उपयोग करता है: वेब पेज को फिर से लोड किए बिना बदलना, और गतिशील रूप से सर्वर तक पहुंच बनाना। दूसरे को कई तरीकों से लागू किया जा सकता है, विशेष रूप से, XMLHttpRequest, जिसके बारे में हम बात करेंगे और छिपे हुए फ्रेम तकनीक का उपयोग करेंगे।

डेटा विनिमय

डेटा का आदान-प्रदान करने के लिए, XMLHttpRequest ऑब्जेक्ट को पेज पर बनाया जाना चाहिए, जो उपयोगकर्ता के ब्राउज़र और सर्वर (छवि 1) के बीच एक प्रकार का मध्यस्थ है। XMLHttpRequest का उपयोग करते हुए, आप सर्वर को एक अनुरोध भेज सकते हैं, साथ ही विभिन्न प्रकार के डेटा के रूप में एक प्रतिक्रिया प्राप्त कर सकते हैं।





सर्वर के साथ डेटा का आदान-प्रदान करने के दो तरीके हैं। पहला तरीका जीईटी अनुरोध है। इस अनुरोध में, आप सर्वर पर दस्तावेज़ तक पहुँचते हैं, URL के माध्यम से इस पर तर्क देते हैं। इसी समय, क्लाइंट फ़ंक्शन पर जावास्क्रिप्ट फ़ंक्शन एस्केप का उपयोग करना तर्कसंगत होगा ताकि कुछ डेटा अनुरोध को बाधित न करें।


बड़ी मात्रा में डेटा वाले सर्वर के लिए GET अनुरोध करने की अनुशंसा नहीं की जाती है। इसके लिए एक POST अनुरोध है।


जावास्क्रिप्ट में लिखे गए क्लाइंट भाग को सर्वर के साथ सुरक्षित विनिमय के लिए आवश्यक कार्यक्षमता प्रदान करनी चाहिए और उपरोक्त किसी भी तरीके से डेटा का आदान-प्रदान करने के तरीके प्रदान करने चाहिए। सर्वर भाग को इनपुट डेटा को संसाधित करना चाहिए, और इसके आधार पर नई जानकारी उत्पन्न होती है (उदाहरण के लिए, डेटाबेस के साथ काम करना), और इसे क्लाइंट को वापस दें। उदाहरण के लिए, सर्वर से जानकारी का अनुरोध करने के लिए, आप कई मापदंडों के प्रसारण के साथ सामान्य GET अनुरोध का उपयोग कर सकते हैं, आकार में छोटा, और जानकारी को अपडेट करने या नई जानकारी जोड़ने के लिए, आपको एक POST अनुरोध का उपयोग करने की आवश्यकता होगी, क्योंकि यह आपको बड़ी मात्रा में डेटा स्थानांतरित करने की अनुमति देता है।


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


सर्वर से प्रतिक्रिया केवल एक्सएमएल नहीं हो सकती है, जैसा कि प्रौद्योगिकी का नाम है। XML के अलावा, आप सादा पाठ या JSON (जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) में उत्तर प्राप्त कर सकते हैं। यदि उत्तर सादे पाठ में प्राप्त हुआ था, तो इसे तुरंत पृष्ठ पर कंटेनर में प्रदर्शित किया जा सकता है। XML के रूप में प्रतिक्रिया प्राप्त करते समय, क्लाइंट पक्ष पर प्राप्त XML दस्तावेज़ का प्रसंस्करण और आमतौर पर (X) HTML में डेटा का रूपांतरण होता है। जब JSON प्रारूप में प्रतिक्रिया प्राप्त होती है, तो क्लाइंट को केवल एक पूर्ण जावास्क्रिप्ट जावास्क्रिप्ट ऑब्जेक्ट प्राप्त करने के लिए प्राप्त कोड (जावास्क्रिप्ट फ़ंक्शन eval) को निष्पादित करने की आवश्यकता होती है। लेकिन यहां आपको सावधान रहने और इस तथ्य को ध्यान में रखने की आवश्यकता है कि इस तकनीक का उपयोग करके दुर्भावनापूर्ण कोड प्रसारित किया जा सकता है, इसलिए, सर्वर से प्राप्त कोड को निष्पादित करने से पहले, इसे सावधानीपूर्वक जांचा और संसाधित किया जाना चाहिए। "रिक्त" अनुरोध के रूप में ऐसी प्रथा है, जिसमें सर्वर से कोई प्रतिक्रिया नहीं आती है, केवल सर्वर साइड पर डेटा बदलता है।


विभिन्न ब्राउज़रों में, इस ऑब्जेक्ट के अलग-अलग गुण हैं, लेकिन सामान्य तौर पर यह समान है।

XMLHttpRequest ऑब्जेक्ट मेथड्स

ध्यान दें कि विधियों के नाम उसी शैली में लिखे गए हैं (ऊंट-शैली) अन्य जावास्क्रिप्ट कार्यों के रूप में। उनका उपयोग करते समय सावधान रहें।


abort () - सर्वर के वर्तमान अनुरोध को रद्द करें।


getAllResponseHeaders () - सर्वर से सभी प्रतिक्रिया हेडर प्राप्त करें।


getResponseHeader ("शीर्षलेख_नाम") - निर्दिष्ट शीर्ष लेख प्राप्त करें।


खुला ("request_type", "URL", "अतुल्यकालिक", "उपयोगकर्ता नाम", "पासवर्ड") - सर्वर के लिए अनुरोध का प्रारंभ, अनुरोध विधि का संकेत। अनुरोध प्रकार और URL आवश्यक पैरामीटर हैं। तीसरा तर्क एक बूलियन मूल्य है। आमतौर पर हमेशा सच होता है या बिल्कुल निर्दिष्ट नहीं होता है (डिफ़ॉल्ट सत्य है)। चौथे और पांचवें तर्क का उपयोग प्रमाणीकरण के लिए किया जाता है (किसी स्क्रिप्ट में प्रमाणीकरण डेटा को संग्रहीत करना बहुत असुरक्षित है, क्योंकि कोई भी उपयोगकर्ता स्क्रिप्ट देख सकता है)।


भेजें ("सामग्री") - सर्वर पर एक HTTP अनुरोध भेजें और एक प्रतिक्रिया प्राप्त करें।


setRequestHeader ("शीर्षलेख_नाम", "मूल्य") - अनुरोध शीर्ष लेख के मूल्यों को निर्धारित करें।

XMLHttpRequest ऑब्जेक्ट गुण

onreadystatechange XMLHttpRequest ऑब्जेक्ट के सबसे महत्वपूर्ण गुणों में से एक है। इस संपत्ति का उपयोग करते हुए, एक हैंडलर सेट किया जाता है जिसे जब भी किसी वस्तु की स्थिति बदलती है, कहा जाता है।


readyState एक संख्या है जो किसी वस्तु की स्थिति को दर्शाता है।


responseText - सादे पाठ (स्ट्रिंग) में सर्वर प्रतिक्रिया का प्रतिनिधित्व।


responseXML सर्वर से प्राप्त DOM के साथ संगत दस्तावेज़ ऑब्जेक्ट है।


स्थिति - सर्वर से प्रतिक्रिया की स्थिति।


statusText - सर्वर से प्रतिक्रिया की स्थिति का शाब्दिक प्रतिनिधित्व।


अधिक विस्तार से तैयार संपत्ति पर विचार करें:

• ० - वस्तु आरंभीकृत नहीं है।
• 1 - ऑब्जेक्ट डेटा लोड कर रहा है।
• 2 - ऑब्जेक्ट ने अपना डेटा अपलोड किया है।
• 3 - ऑब्जेक्ट पूरी तरह से लोड नहीं है, लेकिन उपयोगकर्ता के साथ बातचीत कर सकता है।
• 4 - वस्तु पूरी तरह से प्रारंभिक है; सर्वर से प्रतिक्रिया मिली।

यह ऑब्जेक्ट की तत्परता की स्थिति पर आधारित है कि आप आगंतुक को इस बारे में जानकारी प्रदान कर सकते हैं कि सर्वर के साथ डेटा के आदान-प्रदान की प्रक्रिया किस स्तर पर है और संभवतः उसे नेत्रहीन रूप से सूचित करें।

XMLHttpRequest ऑब्जेक्ट बनाना

जैसा कि ऊपर उल्लेख किया गया है, प्रत्येक प्रकार के ब्राउज़र के लिए यह ऑब्जेक्ट बनाना एक अनूठी प्रक्रिया है।


उदाहरण के लिए, गेको-संगत ब्राउज़र, कोनेकर और सफारी में एक ऑब्जेक्ट बनाने के लिए, आपको निम्नलिखित अभिव्यक्ति का उपयोग करने की आवश्यकता है:


var Request = new XMLHttpRequest();



और इंटरनेट एक्सप्लोरर के लिए, निम्नलिखित का उपयोग किया जाता है:


var Request = new ActiveXObject("Microsoft.XMLHTTP");



या


var Request = new ActiveXObject("Msxml2.XMLHTTP");



अब, क्रॉस-ब्राउज़र संगतता प्राप्त करने के लिए, सभी कार्यों को एक में जोड़ना आवश्यक है:

 function CreateRequest() { var Request = false; if (window.XMLHttpRequest) { //Gecko- , Safari, Konqueror Request = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet explorer try { Request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (CatchException) { Request = new ActiveXObject("Msxml2.XMLHTTP"); } } if (!Request) { alert("  XMLHttpRequest"); } return Request; } 

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

सर्वर अनुरोध

सर्वर अनुरोध एल्गोरिथ्म इस तरह दिखता है:

• XMLHttpRequest के लिए जाँच करें।
• सर्वर कनेक्शन शुरू करना।
• सर्वर के लिए एक अनुरोध भेजा जा रहा है।
• प्रसंस्करण डेटा प्राप्त किया।

सर्वर के लिए एक अनुरोध बनाने के लिए, हम एक छोटा फ़ंक्शन बनाएंगे, जो कार्यक्षमता के आधार पर, GET और POST अनुरोधों के लिए कार्यों को संयोजित करेगा।

 /*        r_method -  : GET  POST r_path -    r_args -   a=1&b=2&c=3... r_handler - -    */ function SendRequest(r_method, r_path, r_args, r_handler) { //  var Request = CreateRequest(); //     if (!Request) { return; } //   Request.onreadystatechange = function() { //    if (Request.readyState == 4) { //    r_handler(Request); } } //,    GET- if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //  Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") { //  POST- //  Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //  Request.send(r_args); } else { //  GET- // - Request.send(null); } } 

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

 function ReadFile(filename, container) { //   var Handler = function(Request) { document.getElementById(container).innerHTML = Request.responseText; } //  SendRequest("GET",filename,"",Handler); } 

यह सर्वर के साथ सहभागिता कैसे होती है।

प्रतिक्रिया प्रसंस्करण

पिछले उदाहरण में, हमने एक सर्वर अनुरोध फ़ंक्शन किया। लेकिन यह, वास्तव में, असुरक्षित है, क्योंकि हम ऑब्जेक्ट की स्थिति और सर्वर से प्रतिक्रिया की स्थिति की प्रक्रिया नहीं करते हैं।


हम अपने कोड को पूरक करते हैं ताकि यह लोडिंग प्रक्रिया के बारे में एक दृश्य सूचना प्रदर्शित कर सके।

 ... Request.onreadystatechange = function() { //    if (Request.readyState == 4) { //    r_handler(Request); } else { //    } } ... 

जैसा कि आप पहले से ही जानते हैं, XMLHttpRequest ऑब्जेक्ट आपको सर्वर से प्रतिक्रिया की स्थिति का पता लगाने की अनुमति देता है। इस अवसर को लें।

 ... Request.onreadystatechange = function() { //    if (Request.readyState == 4) { if (Request.status == 200) { //    r_handler(Request); } else { //     } } else { //    } } ... 

सर्वर प्रतिक्रिया विकल्प

सर्वर से कई प्रकार के डेटा प्राप्त किए जा सकते हैं:

• सादा पाठ
• एक्सएमएल
• JSON

यदि आपको सादा पाठ प्राप्त होता है, तो आप इसे तुरंत कंटेनर में भेज सकते हैं, अर्थात् आउटपुट के लिए। XML में डेटा प्राप्त करते समय, आपको DOM फ़ंक्शंस का उपयोग करके डेटा प्रोसेस करना होगा, और HTML का उपयोग करके परिणाम प्रस्तुत करना होगा।


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


नमूना JSON कोड:

 { "data": { "misc": [ { "name" : "JSON- ", "type" : " 1" }, { "name" : "JSON- ", "type" : " 2" } ] } } 

ऐसा कोड प्राप्त होने पर, हम निम्नलिखित कार्रवाई करते हैं:


var responsedata = eval("(" + Request.responseText + ")")



इस कोड को अंजाम देने के बाद, रिस्पेक्टेड ऑब्जेक्ट आपके लिए उपलब्ध होगा।

सर्वर प्रोग्रामिंग भाषाओं के साथ काम करें

ऐसा काम सामान्य से अलग नहीं है। उदाहरण के लिए, मैं PHP को सर्वर भाषा के रूप में ले जाऊंगा। क्लाइंट भाग में कुछ भी नहीं बदला है, लेकिन सर्वर हिस्सा अब एक PHP फ़ाइल द्वारा दर्शाया गया है।


परंपरा से, चलो हमारी अद्भुत दुनिया को नमस्कार करते हैं:

 echo "Hello, World!"; 

इस फ़ाइल को एक्सेस करते समय, स्ट्रिंग हैलो, वर्ल्ड क्लाइंट को वापस कर दी जाएगी। जैसा कि आप जानते हैं, यह अनुप्रयोगों के निर्माण की व्यापक संभावनाओं को प्रस्तुत करता है। XMLHttpRequest का उपयोग कर सर्वर को इनवॉइस करते समय पास होने वाले तर्कों के आधार पर, आउटपुट को पैरामीटर करना संभव है, जिससे वेब एप्लिकेशन के लिए व्यापक कार्यक्षमता प्रदान की जा सकती है।


PHP के अलावा, आप किसी अन्य सर्वर-साइड प्रोग्रामिंग भाषा का उपयोग कर सकते हैं।

संबंधित साहित्य

• पेशेवरों के लिए अजाक्स
• कार्रवाई में अजाक्स

लेख को नए लोगों को अंदर से AJAX के काम के बारे में बताने के लक्ष्य के साथ लिखा गया था। अगर यह आपको लगता है कि कुछ गलत या गलत तरीके से लिखा गया है, तो कृपया मुझे एक साथ एक योग्य लेख बनाने के लिए सही करें।


बेशक, यदि संभव हो तो, यह मौजूदा रूपरेखाओं का उपयोग करने के लायक है, मुझे लगता है। लेकिन यह कैसे काम करता है यह जानना अभी भी आवश्यक है।