आधुनिक वेबच्या युगात, बहुतेक साइट्स अधिकाधिक परस्परसंवादी होत आहेत. जर पूर्वी, अद्ययावत डेटा प्राप्त करण्यासाठी, आम्हाला संपूर्ण पृष्ठ अद्ययावत करावे लागले, आता तंत्रज्ञान दिसू लागले आहे जे पृष्ठ पूर्णपणे लोड होऊ देत नाही, परंतु त्याचा फक्त एक वेगळा भाग आहे. या बदल्यात, हे वापरकर्ते आणि सर्व्हर मालक दोघांसाठी सोयी प्रदान करते, कारण वापरकर्त्यासाठी, पृष्ठ लोडिंग जलद होईल, कारण पृष्ठाचा फक्त एक वेगळा भाग लोड केला जातो आणि सर्व्हरला प्रत्येक वेळी पृष्ठ व्युत्पन्न करण्याची आणि ते देण्याची आवश्यकता नसते. वापरकर्त्याला. php आणि ajax वापरून ही वैशिष्ट्ये लागू करणे सोपे आहे.
संकल्पना कशी कार्य करते हे अधिक चांगल्या प्रकारे समजून घेण्यासाठी आज आपण एका लहान उदाहरणाचे विश्लेषण करू. AJAX. काहीवेळा नवशिक्यांसाठी php आणि ajax एकमेकांशी कसे संवाद साधतात हे समजणे कठीण आहे, बरेच लोक संपूर्ण पृष्ठ रीलोड न करता फ्लायवर फॉर्म कसे प्रमाणित करायचे याचे उदाहरण शोधत आहेत. हे कसे केले जाते ते मी तुम्हाला थोडक्यात दाखवतो जेणेकरून तुम्हाला मूलभूत गोष्टी आणि तत्त्वे समजू शकतील ज्यामुळे तुम्हाला भविष्यात इतर साधनांमध्ये त्वरीत प्रभुत्व मिळू शकेल आणि तुमच्या स्वतःच्या स्क्रिप्ट्स लिहू शकाल.
चला स्वतःसाठी एक लहान कार्य घेऊन येऊ, आम्ही php आणि ajax वापरून पृष्ठ रीलोड न करता डेटाबेसमध्ये ईमेल पत्त्याची उपस्थिती तपासू. ब्राउझरमध्ये पृष्ठ रीलोड न करता आम्ही सर्व्हरशी कसे संवाद साधू शकतो हे अशा उदाहरणावरून चांगले दिसून येईल, आणि हे देखील अनेकदा वापरकर्ता फॉर्म प्रमाणीकरणाच्या विविध प्रकारांमध्ये वापरले जाते. index.php , email.php , validate.js नावाच्या रूट डिरेक्ट्रीमध्ये ३ फाईल्स बनवू.
पृष्ठ निर्मिती
चला एका फॉर्मसह एक साधे पृष्ठ तयार करू ज्यामध्ये ईमेल प्रविष्ट करण्यासाठी फक्त एक फील्ड आहे.
index.php फाइलचा सिंटॅक्स
सह काम करण्याचा सर्वात सोपा मार्ग AJAXफ्रेमवर्क कनेक्ट करण्यासाठी आहे jQueryजे मी केले तेच आहे. jQueryसबमिट करण्यासाठी आम्हाला समजण्यास आणि कार्य करण्यास सोपे वाक्यरचना प्रदान करते AJAXविनंत्या, याचा फायदा का घेऊ नये?
js स्क्रिप्ट तयार करणे
validate.js फाइल सिंटॅक्स
$(document).ready(function()( var email = ""; $("#email").keyup(function()( var value = $(this).val(); $.ajax(( type: "POST", url:"email.php", data:"email="+value, success:function(msg)( if(msg == "valid")( $("#message").html(" हा ईमेल वापरता येईल.हा ईमेल आधीच घेतला आहे."); ) ) )); )); $("#submit").क्लिक(function()( if(email == "")( अलर्ट("कृपया, सर्व ईमेलवर डेटा टाका"); )तर( $.ajax(( प्रकार: "POST", url:"email.php", data:"add_email="+email, success:function(msg)( $("#message").html(msg); ) ) );) ));));
php हँडलर
ही स्क्रिप्ट प्राप्त होईल पोस्टक्लायंटकडून विनंती करा, त्यावर प्रक्रिया करा आणि निकाल परत करा. AJAXनिकाल वाचतो आणि त्यावर आधारित निर्णय घेतो.
email.php फाइलचा सिंटॅक्स
$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["email"]) && $_POST["email"] != "")( $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); जर (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "invalid"; )else( $sql = "ईमेल पासून आयडी निवडा जेथे ईमेल="$email""; $result = mysqli_query($connection,$sql); if( mysqli_num_rows($result) == 1)( echo "invalid"; )else( echo "valid"; ) ) ) if(isset($_POST["add_email"]) && $_POST["add_email"] != "" )( $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "ईमेलमध्ये घाला(ईमेल) मूल्ये("$email")"; if(mysqli_query($connection,$sql))( प्रतिध्वनी यश"; )इतर (इको" त्रुटी"; } }
आमच्या php स्क्रिप्टमध्ये, सर्वात सामान्य कोड जो पोस्ट विनंतीवर प्रक्रिया करतो आणि पृष्ठावरील विशिष्ट मजकूर मुद्रित करतो. परिणामी AJAX php स्क्रिप्टला विनंती पाठवते, स्क्रिप्ट त्यावर प्रक्रिया करते आणि निकाल देते, AJAXपरिणाम वाचतो आणि रिअल टाइममध्ये पृष्ठ बदलतो.
AJAX कोडच्या या तुकड्यासह स्क्रिप्टला POST विनंती पास करते:
$.ajax(( प्रकार:"POST", url:"email.php", data:"email="+value, success:function(msg)( if(msg == "valid")( $("#message) ").html(" हा ईमेल वापरता येईल."); ईमेल = मूल्य; )इतर( $("#message").html(" हा ईमेल आधीच घेतला आहे."); } } });
प्रकार - विनंती प्रकार, POST किंवा GET. आमच्या बाबतीत POST;
url - स्क्रिप्टचा पत्ता ज्यावर विनंती पाठवली जाते;
डेटा - विनंतीमध्ये प्रसारित केलेला डेटा;
यश - यशस्वी विनंतीच्या परिणामी काय करावे. आमच्या बाबतीत, फंक्शन म्हणतात;
स्क्रिप्टमध्येच, प्रत्येक वेळी ईमेल फील्डमध्ये वर्ण प्रविष्ट केल्यावर डेटाबेसमध्ये ईमेलची उपस्थिती तपासली जाते. स्क्रिप्टमध्ये, विभाग $("#email").keyup(function()()); इनपुटवर प्रक्रिया करण्यासाठी जबाबदार आहे. , जे फील्डवर id = "email" सह की दाबण्यासाठी तपासते.
तुम्ही बघू शकता, कोड अगदी सोपा आहे आणि त्याला समजून घेण्यासाठी विशेष कौशल्ये आवश्यक नाहीत, सर्व काही इव्हेंट हाताळणीशी जोडलेले आहे कीअप () - की दाबणे, क्लिक करा () - घटकावर माउस क्लिक करणे. त्यानंतर AJAXस्क्रिप्टमधून विनंती आणि प्रतिसाद. अशा प्रकारे, php आणि ajax वापरून, आपण परस्पर पृष्ठे तयार करण्यासाठी जवळजवळ अमर्यादित शक्यता मिळवू शकता.
हा कोड उच्च गुणवत्तेचा असल्याचे भासवत नाही, परंतु आपण तो विकसित केल्यास, क्लायंट आणि सर्व्हर स्तरांवर योग्य प्रमाणीकरण जोडा, css प्रविष्ट करा, नंतर आपण ते आपल्या प्रकल्पांमध्ये वापरू शकता.
आपल्याला काही प्रश्न असल्यास, टिप्पण्या लिहायला मोकळ्या मनाने.
मी तुम्हाला दिवस चांगला जावो आणि लवकरच भेटू इच्छितो 🙂
पद्धत $.ajax()खालील पर्यायांना समर्थन देते:
- "xml"- परतावा XMLएक दस्तऐवज ज्यावर jQuery सह प्रक्रिया केली जाऊ शकते.
- "html"- परतावा HTMLजसे साधा मजकूर, टॅग
येथे मी या उदाहरणाचे तपशीलवार वर्णन करणार नाही, कारण. आम्ही मागील लेखात (फक्त post() पद्धत वापरून याबद्दल तपशीलवार चर्चा केली आहे. मी फक्त लक्षात घेईन की येथे, टाइप व्यतिरिक्त, आम्ही आणखी काही पॅरामीटर्स वापरले. आधी वर्णन केलेले url पॅरामीटर POST विनंतीचा उद्देश निर्दिष्ट करण्यासाठी वापरला जातो. पाठवायचा डेटा डेटा पॅरामीटर वापरून निर्दिष्ट केला जातो, ज्याचे मूल्य मागील लेखात वर्णन केलेल्या serialize() पद्धती वापरून सेट केले जाते. सर्व्हरकडून प्राप्त झालेल्या डेटाचा प्रकार dataType पॅरामीटरमध्ये निर्दिष्ट केला आहे.
Ajax कार्यक्रमांसह कार्य करणे
अनेक पर्याय तुम्हाला इव्हेंट-हँडलिंग फंक्शन्स निर्दिष्ट करण्याची परवानगी देतात जी Ajax विनंतीच्या जीवनचक्रादरम्यान काढली जाऊ शकतात. अशा प्रकारे तुम्ही कॉलबॅक फंक्शन्स निर्दिष्ट कराल जे Ajax विनंत्यांमध्ये अशी महत्त्वाची भूमिका बजावतात. मागील उदाहरणातील यशाच्या मापदंडाचा विचार करताना तुम्ही त्यापैकी एकाला आधीच भेटले आहे. इव्हेंटशी संबंधित पॅरामीटर्सची यादी, त्यांच्या संक्षिप्त वर्णनांसह, खालील तक्त्यामध्ये दर्शविली आहे:
यशस्वी विनंत्या हाताळणे
वरील उदाहरणांमध्ये, सक्सेस पॅरामीटर वापरताना, फंक्शन कॉलमधून दोन वितर्क वगळण्यात आले - विनंतीच्या परिणामाचे वर्णन करणारा संदेश आणि jqXHR ऑब्जेक्ट. हे युक्तिवाद स्वीकारणारे फंक्शन वापरण्याचे उदाहरण खाली दर्शविले आहे:
$(function() ( $.ajax(( url: "mydata.json", यश: फंक्शन(डेटा, स्थिती, jqxhr) ( console.log("स्थिती: " + स्थिती); console.log("jqXHR स्थिती: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var टेम्पलेट = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1");template.tmpl(data.slice(3)).appendTo("#row2"); ) )); ));
स्थिती युक्तिवाद ही विनंतीच्या परिणामाचे वर्णन करणारी एक स्ट्रिंग आहे. आम्ही सक्सेस पॅरामीटर वापरून सेट केलेले कॉलबॅक फंक्शन केवळ यशस्वी विनंत्यांसाठी कार्यान्वित केले जाते आणि म्हणूनच या युक्तिवादाचे मूल्य सहसा यश असते. अपवाद म्हणजे जेव्हा तुम्ही पुढे वर्णन केलेले ifModified पर्याय वापरता.
सर्व Ajax इव्हेंटसाठी कॉलबॅक फंक्शन्स समान पॅटर्नचे अनुसरण करतात, परंतु हा युक्तिवाद इतर अनेक इव्हेंटसाठी सर्वात उपयुक्त आहे.
शेवटचा युक्तिवाद jqXHR ऑब्जेक्ट आहे. आपण या ऑब्जेक्टसह कार्य करण्यास प्रारंभ करण्यापूर्वी आपल्याला विनंतीची स्थिती तपासण्याची आवश्यकता नाही, कारण आपल्याला माहित आहे की जेव्हा विनंती यशस्वी होते तेव्हाच फंक्शन कार्यान्वित केले जाते. या उदाहरणामध्ये, jqXHR ऑब्जेक्टचा वापर विनंतीची स्थिती आणि सर्व्हरने प्रतिसादात समाविष्ट केलेल्या शीर्षलेखांबद्दल माहिती मिळविण्यासाठी आणि ती माहिती कन्सोलवर मुद्रित करण्यासाठी वापरली जाते.
या प्रकरणात, परिणाम असा दिसतो (तुम्ही कोणता सर्व्हर वापरत आहात यावर अवलंबून, तुमच्याकडे शीर्षलेखांचा वेगळा संच असू शकतो):
प्रक्रिया करताना त्रुटी
विनंती अयशस्वी झाल्यावर कॉल करण्यासाठी फंक्शन निर्दिष्ट करण्यासाठी एरर पॅरामीटर वापरला जातो. संबंधित उदाहरण खाली दर्शविले आहे:
त्रुटी (रंग: लाल; सीमा: मध्यम घन लाल; पॅडिंग: 4px; समास: स्वयं; रुंदी: 200px; मजकूर-संरेखित: मध्यभागी)
$(function() ( $.ajax(( url: "NoSuchFile.json", यश: फंक्शन(डेटा) ( var टेम्पलेट = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), त्रुटी: कार्य(jqxhr, स्थिती, errorMsg) ( $("
") .मजकूर ("स्थिती: " + स्थिती + " त्रुटी: " + errorMsg) .insertAfter("h1"); ) )); ));हे सर्व्हरवर अस्तित्वात नसलेल्या NoSuchFile.json फाइलची विनंती करत आहे, आणि त्यामुळे विनंती निश्चितपणे अयशस्वी होईल, ज्यामुळे त्रुटी पॅरामीटरसह निर्दिष्ट केलेले कार्य कॉल केले जाईल. या फंक्शनचे वितर्क jqXHR ऑब्जेक्ट आणि त्रुटी स्थिती संदेश आणि सर्व्हरच्या प्रतिसादात प्राप्त त्रुटी संदेश आहेत. या फंक्शनच्या आत, आकृतीमध्ये दर्शविल्याप्रमाणे स्थिती आणि errorMsg वितर्कांची मूल्ये प्रदर्शित करण्यासाठी डॉक्युमेंटमध्ये एक div घटक जोडला जातो:
त्यांना पाठवण्यापूर्वी विनंती पर्याय सेट करणे
BeforeSend पॅरामीटर तुम्हाला विनंत्या पाठवण्यापूर्वी कॉल केले जाणारे फंक्शन निर्दिष्ट करण्याची परवानगी देतो. हे तुम्हाला शेवटच्या क्षणी ajax() पद्धतीत पास केलेले पॅरामीटर्स जोडून किंवा पुनर्स्थित करून विनंती कॉन्फिगर करण्याची परवानगी देते (जे विशेषतः उपयुक्त ठरू शकते जर आवश्यक पॅरामीटर मूल्ये असलेली समान ऑब्जेक्ट अनेक विनंत्यांसाठी वापरली गेली असेल). ही पद्धत वापरण्याचे उदाहरण खाली दिले आहे:
$(function() ( $.ajax(( यश: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); ), त्रुटी: function(jqxhr, status, errorMsg) ( $("
") .text("स्थिती: " + स्थिती + " त्रुटी: " + errorMsg) .insertAfter("h1"); ), beforeSend: function(jqxhr, सेटिंग्ज) ( settings.url = "mydata.json"; ) ) );));या फंक्शनचे वितर्क jqXHR ऑब्जेक्ट आहेत (जे विनंती शीर्षलेख सेट करण्यासाठी किंवा विनंती पाठवण्यापूर्वी रद्द करण्यासाठी उपयुक्त असू शकते) आणि ajax() पद्धतीला पास केलेले पॅरामीटर्स असलेले ऑब्जेक्ट. या उदाहरणात, Ajax विनंतीसाठी URL beforeSend पॅरामीटर वापरून सेट केली आहे.
एकाधिक इव्हेंट हँडलर निर्दिष्ट करत आहे
मागील उदाहरणांमध्ये, आम्ही एकाच फंक्शनला कॉल करून Ajax इव्हेंट्सवर प्रतिक्रिया दिली आहे, परंतु यश, त्रुटी, पूर्ण आणि बिफोरसेंड फंक्शन्सच्या अॅरेवर सेट केले जाऊ शकते, ज्यापैकी प्रत्येक संबंधित इव्हेंट फायर झाल्यावर कार्यान्वित होईल. याचे साधे उदाहरण खाली दिले आहे.
$(function() ( $.ajax(( यश: , beforeSend: function(jqxhr, सेटिंग्ज) ( settings.url = "mydata.json"; ) )); कार्य प्रक्रिया डेटा(डेटा, स्थिती, jqxhr) ( var टेम्पलेट = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1");template.tmpl(data.slice(3)).appendTo("#row2"); ) कार्य अहवाल स्थिती(डेटा, स्थिती, jqxhr) ( console.log("स्थिती: " + स्थिती + " परिणाम कोड: " + jqxhr.status); ) ));
या उदाहरणात, यश पॅरामीटर दोन फंक्शन्स असलेल्या अॅरेवर सेट केले आहे, ज्यापैकी एक दस्तऐवजात घटक जोडण्यासाठी डेटा वापरतो आणि दुसरा कन्सोलवर माहिती प्रिंट करतो.
कार्यक्रमांसाठी संदर्भ सेट करणे
कॉन्टेक्स्ट पॅरामीटर तुम्हाला इव्हेंट हँडलरला कॉल केल्यावर या व्हेरिएबलला नेमून दिलेला घटक निर्दिष्ट करण्याची परवानगी देतो. हँडलर फंक्शनमध्ये न निवडता दस्तऐवजातील लक्ष्य घटकांचा संदर्भ घेण्यासाठी याचा वापर केला जाऊ शकतो. संबंधित उदाहरण खाली दर्शविले आहे:
$(function() ( $.ajax(( यश: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); ), beforeSend: function(jqxhr, सेटिंग्ज) ( settings.url = "mydata.json"; ), संदर्भ: $("h1 "), पूर्ण: कार्य(jqxhr, स्थिती) ( var रंग = स्थिती == "यश" ? "हिरवा" : "लाल"; this.css("बॉर्डर", "जाड घन" + रंग); )); ));
येथे, संदर्भ पॅरामीटर दस्तऐवजाचे h1 घटक असलेल्या jQuery ऑब्जेक्टवर सेट केले आहे. संपूर्ण पॅरामीटरने परिभाषित केलेल्या फंक्शनमध्ये, आम्ही jQuery ऑब्जेक्टवर (याद्वारे संदर्भित) css() पद्धत कॉल करून निवडलेल्या घटकांना (या प्रकरणात, घटक, दस्तऐवजात फक्त एक h1 घटक असल्याने) फ्रेम करतो. विनंतीच्या स्थितीवर आधारित सीमा रंग निर्धारित केला जातो.
संदर्भ पॅरामीटर कोणत्याही ऑब्जेक्टचा संदर्भ म्हणून सेट करण्यासाठी वापरला जाऊ शकतो आणि केवळ त्या ऑब्जेक्टवर परवानगी असलेल्या ऑपरेशन्स करणे ही आपली जबाबदारी आहे. उदाहरणार्थ, जर तुम्ही HTMLElement घटकासाठी संदर्भ सेट केला असेल, तर तुम्ही ते ऑब्जेक्ट $() फंक्शनमध्ये पास करणे आवश्यक आहे त्यावर कोणतीही jQuery पद्धती कॉल करण्यापूर्वी.
मूलभूत Ajax विनंती सेटिंग्ज कॉन्फिगर करत आहे
पॅरामीटर्सचा एक गट आहे ज्याद्वारे तुम्ही Ajax विनंतीचे मूलभूत कॉन्फिगरेशन करू शकता (त्यापैकी काही, url आणि प्रकार, आम्ही वर चर्चा केली आहे). उपलब्ध सर्व पर्यायांपैकी, हे सर्वात कमी मनोरंजक आहेत आणि त्यांची नावे मुख्यतः स्वतःसाठी बोलतात. प्रश्नातील पॅरामीटर्स खालील तक्त्यामध्ये दर्शविले आहेत:
मूलभूत Ajax विनंती कॉन्फिगरेशन पॅरामीटर्स
पॅरामीटर वर्णन स्वीकारतो विनंती शीर्षलेख स्वीकार हेडरवर सेट करते, जे ब्राउझरद्वारे समर्थित MIME प्रकार निर्दिष्ट करते. डीफॉल्टनुसार, हे मूल्य dataType पॅरामीटरद्वारे निर्धारित केले जाते कॅशे खोट्याचे मूल्य सूचित करते की विनंतीची सामग्री सर्व्हरद्वारे कॅश केली जाऊ नये. डीफॉल्टनुसार, स्क्रिप्ट आणि jsonp वगळता सर्व डेटा प्रकार कॅशे केले जातात सामग्री प्रकार विनंतीसाठी सामग्री-प्रकार शीर्षलेखाचे मूल्य सेट करते डेटा प्रकार सर्व्हरकडून कोणत्या प्रकारच्या डेटाची अपेक्षा आहे ते निर्दिष्ट करते. हा पर्याय वापरल्यास, jQuery सर्व्हरद्वारे विनंती प्रकाराविषयी दिलेल्या माहितीकडे दुर्लक्ष करेल. शीर्षलेख विनंतीमध्ये समाविष्ट करण्यासाठी अतिरिक्त शीर्षलेख आणि मूल्ये निर्दिष्ट करते jsonp JSONP विनंत्या (क्रॉस-डोमेन विनंत्या) करताना कॉलबॅक फंक्शनऐवजी वापरण्यासाठी स्ट्रिंग निर्दिष्ट करते. या सेटिंगसाठी सर्व्हरशी करार आवश्यक आहे jsonpCallback jQuery च्या डीफॉल्ट स्वयं-व्युत्पन्न यादृच्छिक नावाऐवजी वापरल्या जाणार्‍या कॉलबॅक फंक्शनचे नाव निर्दिष्ट करते पासवर्ड प्रमाणीकरण प्रक्रिया पार करताना विनंतीमध्ये वापरण्यासाठी पासवर्ड निर्दिष्ट करते scriptCharset विनंती केलेली JavaScript सामग्री एन्कोड करताना कोणते वर्ण सेट वापरायचे ते jQuery ला सांगते वेळ संपला विनंतीसाठी कालबाह्य कालावधी (मिलिसेकंदांमध्ये) निर्दिष्ट करते वापरकर्तानाव प्रमाणीकरण प्रक्रिया पास करताना विनंतीमध्ये वापरण्यासाठी वापरकर्तानाव निर्दिष्ट करते कालबाह्य आणि शीर्षलेख सेट करणे
वापरकर्त्यांना अनेकदा माहिती नसते की Ajax विनंत्या केल्या जात आहेत, म्हणून वाजवी कालबाह्य सेट करणे ही एक चांगली कल्पना आहे, कारण यामुळे वापरकर्त्यांना काही प्रक्रियेची प्रतीक्षा करण्याचा त्रास वाचतो ज्याची त्यांना पूर्ण माहिती नसते. विनंतीसाठी कालबाह्य सेट करण्याचे उदाहरण खाली दर्शविले आहे:
$(function() ( $.ajax(( कालबाह्य: 5000, शीर्षलेख: ( "X-HTTP-Method-Override": "PUT"), यश: फंक्शन(डेटा) ( var टेम्पलेट = $("#flowerTmpl") ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), त्रुटी: function(jqxhr , स्थिती, errorMsg) ( console.log("त्रुटी: " + स्थिती); ) )); ));
या उदाहरणात, कालबाह्य पॅरामीटर कमाल कालबाह्य कालावधी 5 सेकंदांवर सेट करते. या वेळेत विनंती पूर्ण न झाल्यास, त्रुटी पॅरामीटरसह निर्दिष्ट केलेल्या कार्यास कॉल केला जाईल आणि स्थिती पॅरामीटरने निर्दिष्ट केलेला त्रुटी कोड प्रदर्शित केला जाईल.
ब्राउझरला विनंती पाठवल्याबरोबर टायमर सुरू होतो आणि बहुतेक ब्राउझर एकाच वेळी केलेल्या विनंत्यांच्या संख्येवर मर्यादा घालतात. याचा अर्थ असा धोका आहे की टाइमआउट कालबाह्य होईपर्यंत, विनंती देखील चालणार नाही. हे टाळण्यासाठी, तुम्हाला ब्राउझरच्या मर्यादा, तसेच इतर कोणत्याही Ajax विनंत्यांची व्हॉल्यूम आणि अपेक्षित कालावधी याची जाणीव असणे आवश्यक आहे.
याव्यतिरिक्त, खालील उदाहरण हेडर पॅरामीटर वापरते, जे विनंतीमध्ये शीर्षलेख जोडते. डेटा डिस्प्ले ऑब्जेक्ट हेडर निर्दिष्ट करण्यासाठी वापरला जातो. येथे वापरलेले शीर्षलेख REST आर्किटेक्चरल शैलीला समर्थन देणारे वेब ऍप्लिकेशन तयार करण्यासाठी उपयुक्त ठरू शकते, जोपर्यंत सर्व्हरने ते योग्यरित्या ओळखले आहे.
अतिरिक्त कॉन्फिगरेशन पॅरामीटर्स वापरणे
खालील विभाग सर्वात उपयुक्त आणि लक्षात घेण्याजोगे प्रगत पर्यायांचे वर्णन करतात जे Ajax विनंत्यांना लागू होतात. सहसा ते क्वचितच वापरले जातात, परंतु जेव्हा गरज उद्भवते तेव्हा ते अपरिहार्य असतात. हे पर्याय तुम्हाला jQuery Ajax शी कसे परस्परसंवाद साधते ते ट्यून करू देते.
सिंक्रोनस विनंत्या तयार करणे
क्वेरी एक्झिक्यूशन मोड वापरून नियंत्रित केला जातो async पॅरामीटर. या पॅरामीटरसाठी सत्याचे डीफॉल्ट मूल्य म्हणजे विनंती असिंक्रोनस मोडमध्ये कार्यान्वित केली जाईल, तर असत्य म्हणजे सिंक्रोनस मोडमध्ये.
सिंक्रोनस विनंतीसह, ajax() पद्धत सामान्य कार्याप्रमाणे वागते आणि विनंती पूर्ण झाल्यानंतर ब्राउझर इतर स्क्रिप्ट सूचनांकडे जातो.
अपरिवर्तित राहिलेल्या डेटाकडे दुर्लक्ष करणे
वापरून जर सुधारित पॅरामीटरशेवटच्या विनंतीनंतर डेटा बदलला असेल तरच प्राप्त होईल याची खात्री करणे शक्य आहे. हे वर्तन लास्ट-मॉडिफाईड हेडरद्वारे परिभाषित केले आहे. हे निरुपयोगी डेटा हस्तांतरण टाळते, जे वापरकर्त्यास त्याच्याकडे आधीपासून असलेल्या माहितीच्या तुलनेत कोणतीही नवीन माहिती देणार नाही. डीफॉल्टनुसार, ifModified पॅरामीटर असत्य वर सेट केले आहे, jQuery ला लास्ट-मॉडिफाईड हेडरकडे दुर्लक्ष करण्यास आणि तरीही डेटा प्रदान करण्यास सांगते.
हा पर्याय वापरण्याचे उदाहरण खाली दर्शविले आहे:
$(function() ( $("button").क्लिक(function(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status) ( if (status == " यश") ( $("#row1, #row2").children().remove(); var टेम्पलेट = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) अन्यथा (status == "notmodified") ( $("img").css("border") , "जाड घन हिरवा"); ) ) )); e.preventDefault(); ))) ));
या उदाहरणात, ifModified पॅरामीटरचे मूल्य सत्य वर सेट केले आहे. सक्सेस फंक्शन नेहमी कॉल केले जाते, परंतु जर शेवटच्या वेळी सामग्रीची विनंती केल्यापासून सामग्री बदलली नसेल, तर डेटा वितर्क अपरिभाषित असेल आणि स्थिती युक्तिवाद असेल. सुधारित मूल्य नाही.
या प्रकरणात, करायच्या क्रिया स्थिती युक्तिवादाच्या मूल्याद्वारे निर्धारित केल्या जातात. या युक्तिवादाचे मूल्य यशस्वी असल्यास, डेटा युक्तिवाद दस्तऐवजात घटक जोडण्यासाठी वापरला जातो. जर स्टेटस आर्ग्युमेंटमध्ये बदल केला नसेल, तर आम्ही css() पद्धतीचा वापर दस्तऐवजात आधीपासून असलेल्या घटकांना फ्रेम करण्यासाठी करतो.
बटणाशी संबंधित क्लिक इव्हेंटला प्रतिसाद म्हणून, ajax() पद्धत म्हणतात. आकृतीमध्ये दर्शविल्याप्रमाणे, ifModified पॅरामीटरचा प्रभाव प्रदर्शित करण्यासाठी हीच विनंती अनेक वेळा पुनरावृत्ती करणे शक्य करते:
हा पर्याय जितका उपयुक्त आहे, मी सावधगिरीने वापरण्याची शिफारस करतो. जर वापरकर्त्याच्या क्रियेच्या परिणामी विनंती पाठवली गेली असेल (उदाहरणार्थ, बटण क्लिक करणे), तर अशी शक्यता आहे की वापरकर्त्याने बटण क्लिक केले कारण मागील विनंती अपेक्षेप्रमाणे पूर्ण झाली नाही.
कल्पना करा की तुम्ही डेटाची विनंती करत आहात, परंतु यश पॅरामीटरमध्ये निर्दिष्ट केलेल्या पद्धतीमध्ये एक त्रुटी आहे जी दस्तऐवज सामग्री योग्यरित्या अद्यतनित होण्यापासून प्रतिबंधित करते. त्यानंतर तुमची पुढील क्रिया अपेक्षित परिणाम प्राप्त करण्यासाठी बटणावर पुन्हा क्लिक करण्याचा प्रयत्न करणे आहे. अनवधानाने ifModified पॅरामीटर वापरल्याने वापरकर्त्याच्या कृती ओव्हरराइड होऊ शकतात, ज्यामुळे त्यांना समस्येचे निराकरण करण्यासाठी अधिक गंभीर कारवाई करण्यास भाग पाडले जाते.
प्रतिसाद कोड हाताळत आहे
स्टेटसकोड पॅरामीटरतुम्हाला HTTP विनंत्यांसाठी प्रतिसाद कोडवर अवलंबून पुढील क्रियांसाठी पर्याय निवडण्याची परवानगी देते. हे यश आणि त्रुटी पॅरामीटर्सच्या जागी किंवा त्यांच्या व्यतिरिक्त वापरले जाऊ शकते. स्टेटसकोड पॅरामीटर स्वतः वापरण्याचे उदाहरण खाली दर्शविले आहे:
$(function() ( $.ajax(( url: "mydata.json", statusCode: ( 200: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), 404: function(jqxhr, status, errorMsg) ( $("
") .मजकूर ("स्थिती: " + स्थिती + " त्रुटी: " + errorMsg) .insertAfter("h1"); ) ) )); ));येथे, स्टेटसकोड पॅरामीटर एक ऑब्जेक्ट म्हणून निर्दिष्ट केला आहे जो HTTP विनंती प्रतिसाद कोड आणि सर्व्हरवर केल्या जाणार्‍या त्यांच्या संबंधित कार्यांमधील संबंध स्थापित करतो. फंक्शन्समध्ये कोणते वितर्क दिले जातात ते प्रतिसाद कोड यशस्वी विनंती किंवा त्रुटी प्रतिबिंबित करते यावर अवलंबून असते.
जर कोड (उदाहरणार्थ, 200) यशस्वी विनंतीशी संबंधित असेल, तर वितर्क यश पॅरामीटरने निर्दिष्ट केलेल्या फंक्शनला पास केले जातील सारखेच असतात. अन्यथा (उदाहरणार्थ, 404 प्रतिसाद कोडसह, म्हणजे विनंती केलेली फाईल सापडली नाही), वितर्क समान आहेत जे त्रुटी पॅरामीटरद्वारे निर्दिष्ट केलेल्या फंक्शनला पास केले जातील.
तुम्ही बघू शकता, हे साधन प्रतिसाद कोडबद्दल थेट माहिती देत नाही. ब्राउझर-सर्व्हर परस्परसंवाद डीबग करताना मी ते सहसा वापरतो, सहसा jQuery मला पाहिजे तसे का वागत नाही हे शोधण्यासाठी. असे करताना, मी यश आणि त्रुटी पॅरामीटर्स व्यतिरिक्त स्टेटसकोड पॅरामीटर वापरतो आणि कन्सोलवर माहिती मुद्रित करतो. जर हे पॅरामीटर्स एकत्र वापरले असतील, तर यश आणि त्रुटी फंक्शन्स प्रथम अंमलात आणली जातील आणि नंतर स्टेटसकोड पॅरामीटरने निर्दिष्ट केलेली फंक्शन्स.
प्रतिसाद डेटा प्रीक्लिअरन्स
वापरून डेटाफिल्टर पॅरामीटरआपण एक कार्य परिभाषित करू शकता ज्यासाठी कॉल केले जाईल पूर्व स्वच्छतासर्व्हरद्वारे परत केलेला डेटा. जेव्हा सर्व्हरने पाठवलेला डेटा आपल्यास अनुरूप नसेल अशा प्रकरणांमध्ये हे साधन अपरिहार्य आहे, कारण ते अयोग्यरित्या स्वरूपित केले गेले आहे किंवा आपण प्रक्रिया करू इच्छित नसलेल्या डेटामध्ये आहे.
जेएसओएन डेटामध्ये अतिरिक्त डेटा जोडणाऱ्या Microsoft ASP.NET सर्व्हरसह काम करताना हे साधन मला खूप मदत करते. डेटाफिल्टर पॅरामीटर वापरून असा डेटा काढून टाकण्यासाठी फक्त किमान प्रयत्न आवश्यक आहेत. डेटाफिल्टर पॅरामीटर वापरण्याचे उदाहरण खाली दर्शविले आहे:
$(function() ( $.ajax(( url: "mydata.json", यश: function(data) ( var टेम्पलेट = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), dataType: "json", dataFilter: function(data, dataType) ( if (dataType = = "json") ( var filteredData = $.parseJSON(data); filteredData.shift(); परत JSON.stringify(filteredData.reverse()); ) इतर (डेटा परत करा; ) )); ));
फंक्शनला सर्व्हरकडून मिळालेला डेटा आणि dataType पॅरामीटरचे मूल्य दिले जाते. जर dataType पॅरामीटर वापरला नसेल, तर दुसरा आर्ग्युमेंट अपरिभाषित वर सेट केला जाईल. फिल्टर केलेला डेटा परत करणे हे तुमचे कार्य आहे. या उदाहरणात, आमचे लक्ष JSON डेटावर आहे:
var filteredData = $.parseJSON(डेटा); filteredData.shift(); JSON.stringify(filteredData.reverse()) परत करा; ...
उदाहरणाची स्पष्टता वाढवण्यासाठी, त्यात काही अतिरिक्त ऑपरेशन्स केल्या जातात. प्रथम, JSON डेटा jQuery parseJSON पद्धत वापरून JavaScript अॅरेमध्ये रूपांतरित केला जातो. मग पहिला घटक shift() पद्धतीचा वापर करून अॅरेमधून काढून टाकला जातो आणि त्याच्या उर्वरित घटकांचा क्रम उलट () पद्धतीचा वापर करून उलट केला जातो.
सर्व फंक्शनला स्ट्रिंग रिटर्न करणे आवश्यक आहे, त्यामुळे यश फंक्शन कॉल करण्यापूर्वी jQuery डेटाला JavaScript ऑब्जेक्टमध्ये रूपांतरित करेल हे जाणून आम्ही JSON.stringify() पद्धतीला कॉल करतो. या उदाहरणाने अॅरेमधून घटक काढून टाकण्याची क्षमता दर्शविली, तथापि, परिस्थितीनुसार, आम्ही इतर कोणत्याही प्रकारची प्रक्रिया करू शकतो.
अंतिम परिणाम आकृतीमध्ये दर्शविला आहे:
डेटा ट्रान्सफॉर्मेशन व्यवस्थापन
मी शेवटच्यासाठी माझ्या आवडत्या सेटिंग्जपैकी एकाचे पुनरावलोकन जतन केले. तुमच्या लक्षात आले असेल की jQuery जेव्हा विशिष्ट प्रकारचा डेटा प्राप्त करते तेव्हा ती आपोआप काही सुलभ रूपांतरणे करते. उदाहरणार्थ, JSON डेटा प्राप्त करताना, jQuery एक यशस्वी फंक्शन प्रदान करते जे मूळ रॉ JSON स्ट्रिंगऐवजी JavaScript ऑब्जेक्ट वापरते.
अशा परिवर्तनांवर नियंत्रण ठेवण्यासाठी, वापरा कन्व्हर्टर्स पॅरामीटर. या पॅरामीटरचे मूल्य एक ऑब्जेक्ट आहे जे डेटा प्रकार आणि त्यावर प्रक्रिया करण्यासाठी वापरल्या जाणार्‍या फंक्शन्समधील पत्रव्यवहार स्थापित करते. HTML डेटा स्वयंचलितपणे jQuery ऑब्जेक्टमध्ये रूपांतरित करण्यासाठी हा पर्याय कसा वापरायचा हे खालील उदाहरण दाखवते:
$(function() ( $.ajax(( url: "flowers.html", // या उदाहरणात, आम्ही HTML मार्कअप लोड करत आहोत, JSON डेटा यश नाही: function(data, status, jqxhr) ( var elems = data. फिल्टर("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ), कन्व्हर्टर: ( "टेक्स्ट एचटीएमएल": फंक्शन(डेटा) ( परत करा $(डेटा); ) ) )); ));
हे उदाहरण टेक्स्ट html डेटा प्रकारासाठी फंक्शनची नोंदणी करते. निर्दिष्ट MIME प्रकाराच्या घटकांमधील जागा लक्षात घ्या (मजकूर/html नोटेशन फॉर्मच्या विरूद्ध). फंक्शन सर्व्हरकडून प्राप्त केलेला डेटा स्वीकारतो आणि रूपांतरित डेटा परत करतो. या प्रकरणात, डेटा ट्रान्सफॉर्मेशनमध्ये flowers.html फाईलमधील HTML तुकडा $() फंक्शनमध्ये पास करणे आणि परिणाम परत करणे समाविष्ट आहे. हे खालीलप्रमाणे आहे की सामान्य jQuery पद्धती यशस्वी कार्यासाठी डेटा युक्तिवाद म्हणून पास केलेल्या ऑब्जेक्टवर लागू होतात.
डेटा कन्व्हर्टरसह कार्य करणे खूप वाहून जाऊ शकते. मी नेहमी या फंक्शन्समध्ये माझ्यापेक्षा जास्त करण्याचा मोह टाळण्याचा प्रयत्न करतो. उदाहरणार्थ, काहीवेळा मला JSON डेटावर टेम्पलेट लागू करण्याचा आणि परिणामी HTML घटक परत करण्याचा मोह होतो. जरी हे तंत्र अतिशय सोयीस्कर असले तरी, इतर कोणीतरी तुमचा कोड वाढवण्याचा प्रयत्न करत असल्यास किंवा, उदाहरणार्थ, तुम्हाला नंतर त्याच्या मूळ स्वरूपात प्राप्त करण्यासाठी गहन डेटा प्रक्रिया आयोजित करण्याची आवश्यकता असल्यास ते नुकसान करेल.
Ajax विनंत्या सेट करणे आणि फिल्टर करणे
आता तुम्ही ajax() पद्धत आणि त्यासोबत काम करण्यासाठी उपलब्ध पर्यायांशी परिचित झाला आहात, आम्ही विनंत्या कस्टमाइझ करणे सोपे करण्यासाठी jQuery द्वारे प्रदान केलेल्या काही अतिरिक्त पद्धतींवर एक नजर टाकू शकतो.
डीफॉल्ट पर्याय परिभाषित करणे
ajaxSetup() पद्धततुम्हाला पॅरामीटर मूल्ये सेट करण्याची अनुमती देते जी सर्व Ajax विनंत्यांमध्ये डीफॉल्टनुसार लागू केली जाईल, ज्यामुळे तुम्हाला प्रत्येक विनंतीवर पॅरामीटर्स कॉन्फिगर करण्यापासून मुक्त केले जाईल. ही पद्धत वापरण्याचे उदाहरण खाली दिले आहे:
") .टेक्स्ट ("स्थिती: " + स्थिती + " त्रुटी: " + errorMsg) .insertAfter("h1"); ), रूपांतरक: ( "टेक्स्ट html": फंक्शन(डेटा) ( परत करा $(डेटा); ) ) )); $.ajax(( url: "flowers.html", यश: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice( 0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ) )); ));ajaxSetup() मेथडला jQuery $ फंक्शन वापरून कॉल केले जाते जसे की ajax() मेथड कॉल केली होती. ajaxSetup() पद्धतीचा युक्तिवाद हा एक ऑब्जेक्ट आहे ज्यामध्ये तुम्ही सर्व Ajax विनंत्यांसाठी डीफॉल्ट म्हणून वापरू इच्छित असलेल्या सेटिंग्जचा समावेश आहे. या उदाहरणात, आम्ही टाइमआउट, ग्लोबल, एरर आणि कन्व्हर्टर पॅरामीटर्ससाठी डीफॉल्ट मूल्ये सेट करतो.
ajaxSetup() मेथड कॉल केल्यानंतर, आम्हाला फक्त पॅरामीटर व्हॅल्यूजची व्हॅल्यूज डिफाईन करायची आहेत जी आम्हाला बदलायची आहेत किंवा जी डीफॉल्टनुसार प्रदान केलेली नाहीत. तुम्हाला समान पॅरामीटर मूल्यांसह अनेक विनंत्या कराव्या लागतील अशा प्रकरणांमध्ये हे महत्त्वपूर्ण वेळेची बचत प्रदान करते.
फिल्टरिंगची विनंती करा
ajaxSetup() पद्धत बेस कॉन्फिगरेशन पॅरामीटर मूल्ये परिभाषित करते जी सर्व Ajax विनंत्यांना लागू होते. वैयक्तिक Ajax विनंत्यांसाठी डायनॅमिकली पॅरामीटर्स सेट करण्याची क्षमता पद्धतीद्वारे प्रदान केली जाते ajaxPrefilter(). ही पद्धत वापरण्याचे उदाहरण खाली दिले आहे:
$(function() ( $.ajaxSetup(( कालबाह्य: 15000, वैश्विक: असत्य, त्रुटी: कार्य(jqxhr, स्थिती, errorMsg)) ( $("
") .टेक्स्ट ("स्थिती: " + स्थिती + " त्रुटी: " + errorMsg) .insertAfter("h1"); ), रूपांतरक: ( "टेक्स्ट html": फंक्शन(डेटा) ( परत करा $(डेटा); ) ) ). ) $.ajax(( url: "flowers.html", dataType: "html", success: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ) )); ));तुम्ही निर्दिष्ट केलेले कार्य प्रत्येक नवीन Ajax विनंतीसाठी कार्यान्वित केले जाईल. फंक्शनला दिलेले आर्ग्युमेंट्स म्हणजे विनंती पॅरामीटर्स (तुम्ही ajaxSetup() पद्धतीसह सेट केलेल्या कोणत्याही डीफॉल्टसह), तसेच ajax() पद्धतीवर पास केलेले प्रारंभिक पॅरामीटर्स (कोणतेही डीफॉल्ट्स वगळून) आणि jqXHR विनंती ऑब्जेक्ट.
उदाहरणात दाखविल्याप्रमाणे आम्ही प्रथम युक्तिवाद म्हणून पास केलेल्या ऑब्जेक्टमध्ये बदल करतो. या परिस्थितीमध्ये, ajax() पद्धतीला पास केलेल्या पॅरामीटर्समध्ये dataType पॅरामीटर उपस्थित असल्यास, कालबाह्य कालावधी दोन सेकंदांवर सेट केला जातो. इतर सर्व विनंत्या पाठवण्यापासून रोखण्यासाठी, abort() पद्धत jqXHR ऑब्जेक्टवर कॉल केली जाते.
या लेखात, आम्ही php सह ajax च्या परस्परसंवादाबद्दल बोलू. Ajax स्क्रिप्ट आणि php कोडचे काम कसे जोडायचे? वेब डेव्हलपमेंटमध्ये Ajax कसे वापरावे? आपल्याला अशा प्रश्नांमध्ये स्वारस्य असल्यास, आपल्याला आमच्या लेखात त्यांची उत्तरे सापडतील. आणि उदाहरणे देखील ajax phpकोड
ajax + php
आपल्याला php सह ajax ची अजिबात गरज आहे की नाही हे समजून घेण्यासाठी, ते कशासाठी उपयुक्त आहे ते पाहूया. ajax + php चा वापर भिन्न असू शकतो, फक्त एक गोष्ट अशी आहे की आपण या तंत्रज्ञानाचा वापर करून पृष्ठ घटक डिझाइन करू शकत नाही जे शोध इंजिनशी संबंधित आहेत. कारण जेव्हा js इव्हेंट्स कॉल केले जातात तेव्हा ते लोड केल्यानंतर Ajax पृष्ठ घटक लोड करते, परंतु आम्हाला माहित आहे की, शोध इंजिने जावास्क्रिप्ट कोड वाचू शकत नाहीत, म्हणून तुम्हाला php सह ajax वापरण्याची आवश्यकता कुठे आहे आणि कुठे वापरण्याची आवश्यकता नाही हे काळजीपूर्वक निवडणे आवश्यक आहे.
मी कुठे अर्ज करू शकतोajax +php?
1. नवीन टिप्पणी जोडत आहे
4. साइटवर शोधाची संस्था (स्वयं-पूर्ण)
5. साइटवर चरण-दर-चरण वापरकर्ता नोंदणी
6. ई-मेलची सदस्यता घ्या
7. फोटो पहा
आणि इतर…
जसे आपण पाहू शकता, ajax + php वापरण्यासाठी बरेच पर्याय आहेत. म्हणजेच, हे लागू केले जाऊ शकते जेथे पृष्ठ रीलोड करणे योग्य होणार नाही, जिथे तुम्हाला फक्त सर्व्हरसह डेटाची देवाणघेवाण करणे आवश्यक आहे.
कुठे वापरायचे नाहीajax +php
माझे मत वस्तुनिष्ठ आहे, कदाचित तुम्हाला अन्यथा वाटेल, परंतु माझ्या अनुभवावर आधारित मी म्हणेन की ajax + php वापरू नये:
1. मेनू लागू करण्यासाठी
2. पृष्ठावरील टॅबची अंमलबजावणी (उदाहरणार्थ: जेव्हा उत्पादन पृष्ठावरील ऑनलाइन स्टोअरमध्ये तुम्हाला पुनरावलोकन, माहिती, टिप्पण्या, फोटो, व्हिडिओ दिसतात ... हे टॅब स्विच करताना तुम्हाला डेटा लोड करण्याची आवश्यकता नाही.)
आणि इतर नकारात्मक उदाहरणे जी आपल्या पृष्ठाच्या सर्वोत्तम रँकिंगला हानी पोहोचवू शकतात.
php सह ajax संवाद
खरं तर, php स्क्रिप्ट्सशिवाय ajax तंत्रज्ञान अस्तित्वात असू शकत नाही, कारण ajax फक्त सर्व्हरला डेटा पाठवते आणि पृष्ठे रीलोड न करता परतावा प्रतिसाद प्राप्त करते. म्हणून, ajax आणि php चे कार्य कसे जोडायचे असा प्रश्न विचारणे अधिक योग्य आहे. परंतु आम्ही लेखाच्या पुढील परिच्छेदात याबद्दल बोलू (अजाक्स पीएचपी उदाहरण), आणि आता आम्ही अजाक्सच्या वैशिष्ट्यांसह व्यवहार करू.
सर्व्हरला डेटा पाठवण्यासाठी, तुम्हाला XMLHTTPRrequest ऑब्जेक्ट तयार करणे आवश्यक आहे. त्याचा वापर करून, url (php स्क्रिप्ट) उघडा, त्यावर डेटा पाठवा (POST किंवा GET पद्धत), प्रतिसाद मिळवा आणि मॉनिटरवर प्राप्त सर्व्हर प्रतिसाद प्रदर्शित करण्यासाठी js भाषेचे ज्ञान वापरा (प्रतिसाद कोणताही खंड असू शकतो. किंवा साइट पृष्ठाचा घटक).
स्पष्टीकरणासाठी, php सह ajax परस्परसंवाद स्पष्ट करण्यासाठी खालील आकृती पहा.
Ajax + php उदाहरण
php सह ajax परस्परसंवादाच्या उदाहरणासाठी, दोन फाईल्स तयार करूया:
1. ajax_page.html
2. get_ajax.php
चला प्रथम अनुप्रयोगाची वापरकर्ता बाजू पाहू, म्हणजे. ajax_पृष्ठhtml:
Ajax + PHP: उदाहरण | संकेतस्थळ येथे आम्हाला अजाक्स ऍप्लिकेशनच्या ऑपरेशन आणि सर्व्हरच्या प्रतिसादावरील अहवाल प्राप्त होतील.ajax_page.html:
या उदाहरणाच्या जावास्क्रिप्ट बाजूचे विश्लेषण करूया:
XMLHttp()- एक फंक्शन जे XMLHttpRequest () ऑब्जेक्ट तयार करते, ते शक्य तितके कॉम्पॅक्ट आणि क्रॉस-ब्राउझर लिहिले जाते.
ajax(params)- आमचा हँडलर, इव्हेंट (ऑनक्लिक) कॉल करताना, पॅराम अॅरेमध्ये आवश्यक डेटा प्राप्त करतो:
url - डेटा कुठे पाठवायचा आणि तो या फॉर्ममध्ये असू शकतो पृष्ठphp?पॅरामीटर =मूल्य, म्हणजेच GET पद्धतीचा वापर करून माहिती प्रसारित केली जाऊ शकते.
स्टेटबॉक्स - एचटीएमएल ब्लॉकचा आयडी जो ajax + php ऍप्लिकेशनचे परिणाम प्राप्त करेल.
पद्धत - डेटा पाठवण्याची पद्धत, POST किंवा GET असू शकते. आमच्या उदाहरणात, आम्ही POST पद्धत वापरतो, परंतु त्याच वेळी, GET पद्धत वापरून url द्वारे माहिती प्रसारित केली जाऊ शकते.
डेटा - हस्तांतरित डेटाची अॅरे. आमच्या उदाहरणामध्ये, डेटा स्वयंचलितपणे फील्ड 1 आणि 2 मधून घेतला जातो, जरी तुम्ही फक्त डेटा लिहू शकता: (नाव: "मूल्य").
यश - फंक्शन किंवा फंक्शनचे नाव, जे प्राप्त डेटा (मजकूर) वर प्रक्रिया करेल.
ajax फंक्शनला कॉल, जसे तुम्ही पाहू शकता, onclick=ajax() इव्हेंटद्वारे केले जाते.
आता ajax + php ऍप्लिकेशनच्या सर्व्हर साइडचे विश्लेषण करूया, म्हणजे फाइल मिळवाajaxphp:
"; असताना(सूची ($key, $val) = प्रत्येक ($_POST)) ( $val = iconv("UTF-8","CP1251", $_POST[$key]); echo " ".$key.": "."
".stripslashes($val)."
"; } ?>येथे सर्व काही खूप सोपे आहे. प्रथम, आम्ही हेडर वापरून आउटपुट डेटाचे एन्कोडिंग सेट करतो. आम्ही डेटा कॅशिंगवर बंदी घातली आहे. sleep(2) - स्क्रिप्टला 2 सेकंदांसाठी विराम देते, हे वेटिंग अॅनिमेशन wait.gif पाहण्यासाठी आहे. $_POST अॅरेचे सर्व घटक वाचताना आणि त्यांना इच्छित एन्कोडिंगमध्ये (सिरिलिकसाठी) रूपांतरित करताना आम्ही प्राप्त केलेला डेटा प्रदर्शित करतो.
आमचे ajax php ऍप्लिकेशन लाँच करण्यासाठी, आम्ही ajax_page.html पृष्ठ ब्राउझरमध्ये लोड करतो
जेव्हा मी TEST AJAX बटण क्लिक केले तेव्हा मला हे मिळाले:
get_ajax.php फाईलमधून मिळालेला हा प्रतिसाद आहे:
याबाबत अजूनही प्रश्न आहेतajax +php? त्यांना खालील टिप्पण्यांमध्ये पोस्ट करा...
स्वीकारतो(डिफॉल्ट: यावर अवलंबून आहे डेटा प्रकार).
प्रकार: PlainObject .
की/मूल्य जोड्यांचा संच ज्यांना पाठवला जातो स्वीकाराविनंती शीर्षलेख. हे शीर्षलेख सर्व्हरला सांगते की विनंतीला कोणत्या प्रकारचा प्रतिसाद मिळेल. मध्ये निर्दिष्ट केलेल्या पॅरामीटरचे मूल्य लक्षात घ्या डेटा प्रकार(आम्ही सर्व्हरकडून अपेक्षित असलेल्या डेटाचा प्रकार) पॅरामीटरमध्ये निर्दिष्ट केलेल्या डेटाशी जुळतो. याव्यतिरिक्त, सर्व्हरकडून प्रतिसादाच्या योग्य प्रक्रियेसाठी, हे पॅरामीटरमध्ये आवश्यक आहे कन्व्हर्टर्सरूपांतरित प्रतिसाद मूल्य परत करणारे फंक्शन निर्दिष्ट करा. उदाहरणार्थ: $.jax(( स्वीकारतो: (मायसानुकूल प्रकार: " अनुप्रयोग/x-some-custom-type"
}
,
// प्रतिसादावर प्रक्रिया कशी करायची ते निर्दिष्ट करा
कन्व्हर्टर्स: ( "मजकूर mycustomtype": कार्य ( परिणाम) {
// रूपांतरित प्रतिसाद मूल्य परत करानवीन परिणाम परत करा; ) ), // अपेक्षित डेटा प्रकार ("mycustomtype")
डेटा प्रकार: "mycustomtype" ) );
async(डिफॉल्ट: खरे).
प्रकार: बुलियन .
डीफॉल्टनुसार, सर्व विनंत्या असिंक्रोनसपणे पाठवल्या जातात, जर तुम्हाला समकालिक विनंत्या व्यवस्थित करायच्या असतील, तर हे पॅरामीटर असत्य वर सेट करा. कृपया लक्षात घ्या की क्रॉस-डोमेन विनंत्या आणि घटक, पॅरामीटर डेटा प्रकारजे महत्त्वाचे आहे jsonpसिंक्रोनस मोडमध्ये विनंत्यांना समर्थन देऊ नका. लक्षात घ्या की सिंक्रोनस विनंत्या वापरून तुम्ही विनंती सक्रिय असताना कोणतीही क्रिया अक्षम करून ब्राउझरला तात्पुरते ब्लॉक करू शकता.
AJAX विनंती करण्यापूर्वी कॉलबॅक कार्य केले जाईल. फंक्शन तुम्हाला jqXHR ऑब्जेक्ट (jQuery 1.4.x मध्ये XMLHTTPRrequest ऑब्जेक्ट) पाठवण्यापूर्वी बदलण्याची परवानगी देते. jqXHR ऑब्जेक्ट एक ऍड-ऑन आहे जो XMLHttpRequest ऑब्जेक्टचा विस्तार करतो, ऑब्जेक्टमध्ये अनेक गुणधर्म आणि पद्धती आहेत ज्या आपल्याला अधिक मिळविण्याची परवानगी देतात संपूर्ण माहितीसर्व्हर प्रतिसादाबद्दल, तसेच ऑब्जेक्टमध्ये वचन पद्धती समाविष्ट आहेत. फंक्शन असल्यास आधी पाठवाअसत्य परत करते, नंतर AJAX विनंती रद्द केली जाईल. आवृत्तीपासून सुरू होत आहे jQuery 1.5कार्य आधी पाठवाविनंती प्रकाराकडे दुर्लक्ष करून कॉल केला जाईल.
कॅशे(डिफॉल्ट: खरे, साठी डेटा प्रकार "स्क्रिप्ट"आणि jsonpखोटे).
प्रकार: बुलियन .
असत्य वर सेट केल्यास, हे विनंती केलेली पृष्ठे ब्राउझरद्वारे कॅश न करण्याची सक्ती करेल. लक्षात घ्या की असत्य केवळ योग्यरित्या कार्य करेल डोकेआणि मिळवाविनंत्या
पूर्ण.
प्रकार: फंक्शन(jqXHR jqXHR, स्ट्रिंग मजकूर स्थिती).
विनंती संपल्यावर कॉल केले जाणारे फंक्शन (AJAX इव्हेंटनंतर फंक्शन कार्यान्वित केले जाते "यश"किंवा "त्रुटी"). फंक्शनमध्ये दोन पॅरामीटर्स पास केले जातात: jqXHR(jQuery 1.4.x ऑब्जेक्टमध्ये XMLHTTPR विनंती) आणि विनंतीच्या स्थितीशी संबंधित स्ट्रिंग ( "यश", "सुधारित नाही", "सामग्री नाही", "त्रुटी", "वेळ संपला", "गर्भपात", किंवा "पार्सर एरर"). jQuery 1.5 सह प्रारंभ, पॅरामीटर पूर्णफंक्शन्सचा अॅरे घेऊ शकतो ज्याला बदलून कॉल केले जाईल.
सामग्री.
प्रकार: PlainObject .
स्ट्रिंग/रेजेक्स जोड्यांचा समावेश असलेला ऑब्जेक्ट जो सामग्री प्रकारावर अवलंबून प्रतिसादावर jQuery कशी प्रक्रिया करेल (विश्लेषण) कसे करेल हे परिभाषित करते. jQuery 1.5 मध्ये जोडले.
सामग्री प्रकार(डिफॉल्ट: "application/x-www-form-urlencoded; charset=UTF-8").
प्रकार: बुलियन , किंवा स्ट्रिंग .
सर्व्हरला डेटा पास करताना विनंतीमध्ये निर्दिष्ट केलेल्या सामग्रीचा प्रकार निर्दिष्ट करते. jQuery 1.6 नुसार, खोटे मूल्य निर्दिष्ट करण्याची परवानगी आहे, अशा परिस्थितीत jQuery हेडरमधील फील्ड पास करत नाही. सामग्री-प्रकारअजिबात.
संदर्भ.
प्रकार: PlainObject .
AJAX कॉलबॅक फंक्शन्स कार्यान्वित करताना, त्यांच्या अंमलबजावणीचा संदर्भ विंडो ऑब्जेक्ट आहे. पॅरामीटर संदर्भतुम्हाला फंक्शनच्या अंमलबजावणीचा संदर्भ सेट करण्याची परवानगी देते जेणेकरून $(हा ) विशिष्ट DOM घटक किंवा ऑब्जेक्टचा संदर्भ देईल. उदाहरणार्थ: $.jax(( url: "test.html" संदर्भ: $(".myClass"), // नवीन कार्य अंमलबजावणी संदर्भ
यश:कार्य()( // विनंती यशस्वी झाल्यास, फंक्शनला कॉल करा$(हा .html("सर्व काही ठीक आहे"); // class.myClass सह घटकामध्ये मजकूर सामग्री जोडा
}
}
);
कन्व्हर्टर्स
मुलभूत मुल्य:
( "* मजकूर ": विंडो. स्ट्रिंग, // कोणत्याही प्रकारचा मजकूर"text html ": true , // text to html "text json": jQuery.parseJSON, // मजकूर ते JSON "text xml": jQuery.parseXML // मजकूर ते XML ) टाइप करा: PlainObject .
रूपांतरित करण्याचा डेटा प्रकार आणि ते कसे रूपांतरित करायचे ते समाविष्ट असलेली ऑब्जेक्ट. प्रत्येक कनवर्टरचे मूल्य हे एक कार्य आहे जे रूपांतरित प्रतिसाद मूल्य परत करते. jQuery 1.5 मध्ये जोडले.
क्रॉसडोमेन(डिफॉल्ट: समान डोमेनमधील विनंत्यांसाठी खोटे, क्रॉस-डोमेन विनंत्यांसाठी खरे).
प्रकार: बुलियन .
तुम्हाला समान डोमेनवर असताना क्रॉस-डोमेन विनंती करायची असल्यास (उदाहरणार्थ, jsonp विनंती), तर हे पॅरामीटर true वर सेट करा. हे, उदाहरणार्थ, आपल्या सर्व्हरवरून दुसर्‍या डोमेनवर विनंती पुनर्निर्देशित करण्यास अनुमती देईल. jQuery 1.5 मध्ये जोडले.
प्रकार: PlainObject , किंवा String , किंवा Array .
सर्व्हरला पाठवायचा डेटा. ते स्ट्रिंग नसल्यास, ते क्वेरी स्ट्रिंगमध्ये रूपांतरित केले जातात. च्या साठी मिळवा URL मध्ये विनंती स्ट्रिंग जोडली जाईल. स्वयंचलित प्रक्रिया टाळण्यासाठी, आपण पॅरामीटर वापरू शकता प्रक्रिया डेटाअसत्य मूल्यासह. जर डेटा ऑब्जेक्टचा भाग म्हणून पास केला असेल, तर त्यात की/मूल्य जोड्यांचा समावेश असणे आवश्यक आहे. जर मूल्य अॅरे असेल, तर jQuery एकाच कीसह एकाधिक मूल्ये अनुक्रमित करेल (पॅरामीटरच्या मूल्यावर अवलंबून पारंपारिक, जे तुम्हाला $.param पद्धतीवर आधारित पारंपारिक अनुक्रमीकरण प्रकार वापरण्याची परवानगी देते).
डेटा फिल्टर.
प्रकार: फंक्शन(स्ट्रिंग डेटा, स्ट्रिंग प्रकार) => काहीही.
फंक्शनला यशस्वी AJAX विनंतीनंतर कॉल केले जाते आणि तुम्हाला सर्व्हर प्रतिसादातून प्राप्त झालेल्या "रॉ" डेटावर प्रक्रिया करण्याची परवानगी देते. डेटा प्रक्रिया केल्यानंतर लगेच परत करणे आवश्यक आहे. फंक्शन दोन वितर्क घेते: डेटा- स्ट्रिंग म्हणून सर्व्हरकडून प्राप्त केलेला डेटा आणि प्रकार- या डेटाचा प्रकार (पॅरामीटर मूल्य डेटा प्रकार).
डेटा प्रकार(डिफॉल्ट: xml, json, स्क्रिप्ट, किंवा html).
प्रकार: स्ट्रिंग.
तुम्हाला सर्व्हरकडून प्राप्त होणार्‍या डेटाचा प्रकार निर्दिष्ट करते. जर डेटा प्रकार निर्दिष्ट केला नसेल, तर jQuery प्रतिसादातून MIME प्रकारावर आधारित ते निर्धारित करण्याचा प्रयत्न करेल ( XMLप्रकार MIME jQuery 1.4 नुसार XML मध्ये परिणाम होईल jsonएक वस्तू देईल JavaScript, स्क्रिप्टस्क्रिप्ट कार्यान्वित करेल आणि इतर सर्व गोष्टी स्ट्रिंग म्हणून परत केल्या जातील).
मूलभूत प्रकार (परिणाम कॉलबॅक फंक्शनचा पहिला युक्तिवाद म्हणून पास केला जातो यश):