Ajax परिचय. JavaScript - सिंक्रोनस AJAX विनंती (XMLHttpRequest)

परतावा: jqXHR

असिंक्रोनस HTTP (Ajax) विनंती करते

• आवृत्ती जोडली: 1.5 jQuery.ajax(url [, सेटिंग्ज])

  url
  प्रकार: स्ट्रिंग
  ज्या URL वर Ajax विनंती पाठवली जाईल

  सेटिंग्ज
  प्रकार: ऑब्जेक्ट
  Ajax विनंती कॉन्फिगर करणारा की/मूल्य पॅरामीटर्सचा संच. सर्व सेटिंग्ज ऐच्छिक आहेत. डीफॉल्टनुसार, सेटिंग्ज वरून घेतल्या जातात. खाली सर्व सेटिंग्जची संपूर्ण यादी आहे.

• आवृत्ती जोडली: 1.0 jQuery.ajax(सेटिंग्ज)

  सेटिंग्ज
  प्रकार: ऑब्जेक्ट
  Ajax विनंती कॉन्फिगर करणारा की/मूल्य पॅरामीटर्सचा संच. सर्व सेटिंग्ज ऐच्छिक आहेत. डीफॉल्टनुसार, सेटिंग्ज वरून घेतल्या जातात.

सेटिंग्ज:

सेटिंग्ज	डेटा प्रकार
स्वीकारतो डीफॉल्ट: डेटा प्रकारावर अवलंबून असते Ajax विनंती करताना, शीर्षलेख सर्व्हरकडून अपेक्षित अनुमत सामग्री प्रकार सूचित करतात. या प्रकारांची मूल्ये स्वीकारलेल्या पॅरामीटरमधून घेतली जातील. तुम्हाला ते बदलायचे असल्यास, $.ajaxSetup() पद्धत वापरून ते करणे चांगले आहे.	एक वस्तू
async डीफॉल्ट: खरे डीफॉल्टनुसार, सर्व विनंत्या असिंक्रोनसपणे पाठवल्या जातात (या पॅरामीटरचे मूल्य सत्य आहे). तुम्हाला सिंक्रोनस विनंत्यांची आवश्यकता असल्यास, async पॅरामीटर असत्य वर सेट करा. क्रॉस-डोमेन विनंत्या आणि डेटा प्रकार: "jsonp" समकालिकपणे अंमलात आणल्या जात नाहीत. कृपया लक्षात ठेवा की विनंती अंमलात आणली जात असताना समकालिक विनंत्या ब्राउझरला अवरोधित करू शकतात.	तार्किक
beforeSend(jqXHR jqXHR, सेटिंग्ज ऑब्जेक्ट) एक फंक्शन जे सर्व्हरला अजाक्स विनंती पाठवण्यापूर्वी लगेच कॉल केले जाईल. हे jqXHR ऑब्जेक्ट सुधारण्यासाठी वापरले जाऊ शकते (पूर्वीच्या आवृत्त्यांमध्ये, jQuery 1.4.x पूर्वी, XMLHttpRequest वापरला जात होता). हेडर इत्यादी बदलण्यासाठी देखील वापरले जाऊ शकते. jqXHR प्रकारचे ऑब्जेक्ट आणि सेटिंग्ज ऑब्जेक्ट वितर्क म्हणून पास केले जातात. बिफोरसेंड फंक्शनमध्ये फॉल्स रिटर्न केल्याने अजाक्स रिक्वेस्ट रद्द केली जाईल. jQuery 1.5 पासून, विनंती प्रकाराकडे दुर्लक्ष करून beforeSend सक्रिय होईल.	कार्य
कॅशे डीफॉल्ट: सत्य , "स्क्रिप्ट" आणि "jsonp" डेटा प्रकारांसाठी असत्य असत्य असल्यास, विनंती केलेले पृष्ठ ब्राउझरद्वारे कॅश केले जाणार नाही.	तार्किक
पूर्ण (jqXHR jqXHR, स्ट्रिंग मजकूर स्थिती) एजॅक्स रिक्वेस्ट पूर्ण झाल्यानंतर कॉल केले जाणारे फंक्शन (यश आणि एरर हँडलर फंक्शन्स नंतर फायर होते). फंक्शन दोन आर्ग्युमेंट घेते: jqXHR प्रकाराचा ऑब्जेक्ट (आधीच्या आवृत्त्यांमध्ये, jQuery 1.4.x पूर्वी, XMLHttpRequest वापरला होता) आणि विनंतीची स्थिती दर्शविणारी स्ट्रिंग ("यश", "नही बदललेले", "एरर", "टाइमआउट) ", "गर्भपात", किंवा "पार्सर त्रुटी"). jQuery 1.5 नुसार, पूर्ण फंक्शन्सची ॲरे स्वीकारू शकते.	फंक्शन किंवा ॲरे
सामग्री पॅरामीटर फॉरमॅट (स्ट्रिंग:रेग्युलर एक्सप्रेशन) मध्ये निर्दिष्ट केले आहे आणि jQuery सर्व्हरवरील प्रतिसादाचे विश्लेषण कसे करेल, त्याच्या प्रकारानुसार ते निर्धारित करते. (आवृत्ती 1.5 मध्ये जोडलेले)	एक वस्तू
सामग्री प्रकार डीफॉल्ट: "application/x-www-form-urlencoded; charset=UTF-8" Ajax विनंती पाठवताना, डेटा या पॅरामीटरमध्ये निर्दिष्ट केलेल्या फॉर्ममध्ये प्रसारित केला जातो. डीफॉल्ट "application/x-www-form-urlencoded; charset=UTF-8" आहे. तुम्ही स्वतः मूल्य सेट केल्यास, ते सर्व्हरला पाठवले जाईल. एन्कोडिंग निर्दिष्ट न केल्यास, सर्व्हरवर डीफॉल्ट एन्कोडिंग सेट वापरला जाईल.	ओळ
संदर्भ विनंती पूर्ण झाल्यानंतर संदर्भ होईल असा ऑब्जेक्ट (या व्हेरिएबलला दिलेले मूल्य). उदाहरणार्थ, तुम्ही संदर्भ म्हणून DOM घटक निर्दिष्ट केल्यास, सर्व ajax विनंती हँडलर देखील या DOM घटकाच्या संदर्भात कार्यान्वित केले जातील. या उदाहरणात, या कीवर्डमध्ये document.body असेल: $.ajax(( url: "test.html", संदर्भ: document.body, यश: function())( $(this).addClass("पूर्ण"); ) ));	एक वस्तू
कन्व्हर्टर्स डीफॉल्ट: ("*text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML) मूल्ये एका प्रकारातून दुसऱ्या प्रकारात रूपांतरित करण्यासाठी कोणती कार्ये वापरली जातील हे निर्धारित करते. (आवृत्ती 1.5 मध्ये जोडलेले)	एक वस्तू
क्रॉसडोमेन डीफॉल्ट: समान डोमेनसाठी असत्य, क्रॉस-डोमेन क्वेरीसाठी सत्य. तुम्हाला त्याच डोमेनवर क्रॉस-डोमेन विनंती (उदाहरणार्थ, JSONP) करायची असल्यास, क्रॉसडोमेन सेटिंग सत्यावर सेट करा. हे, उदाहरणार्थ, सर्व्हरला दुसऱ्या डोमेनवर पुनर्निर्देशन करण्यास अनुमती देते. (आवृत्ती 1.5 मध्ये जोडलेले)	तार्किक
डेटा डेटा जो सर्व्हरवर हस्तांतरित केला जाईल. डेटा स्ट्रिंग नसल्यास, ते क्वेरी स्ट्रिंगमध्ये रूपांतरित केले जाते. GET विनंत्यांसाठी, डेटा URL शी संलग्न केला जातो. ऑब्जेक्टमध्ये की/मूल्य जोड्यांचा समावेश असणे आवश्यक आहे. जर मूल्य ॲरे असेल, तर jQuery पारंपारिक सेटिंगवर अवलंबून मूल्यांची ऑर्डर देते. डीफॉल्टनुसार, उदाहरणार्थ, (foo:["bar1", "bar2"]) &foo=bar1&foo=bar2 होते.	ऑब्जेक्ट किंवा स्ट्रिंग
डेटाफिल्टर (स्ट्रिंग डेटा, स्ट्रिंग प्रकार) सर्व्हरकडून प्राप्त झालेल्या XMLHttpRequest प्रकाराच्या कच्च्या डेटावर प्रक्रिया करण्यासाठी वापरले जाणारे कार्य. तुमच्या फंक्शनने फिल्टर म्हणून काम केले पाहिजे आणि साफ केलेली स्ट्रिंग परत करावी. फंक्शनमध्ये दोन पॅरामीटर्स पास केले जातात: प्राप्त डेटा आणि डेटाटाइप पॅरामीटरचे मूल्य.	कार्य
डेटा प्रकार डीफॉल्ट: ऑटो-डिटेक्टेड स्ट्रिंग (xml, json, स्क्रिप्ट, किंवा html) सर्व्हरकडून अपेक्षित डेटा प्रकार. पर्याय निर्दिष्ट न केल्यास, jQuery प्रतिसादाच्या MIME प्रकारावर आधारित प्रकार निश्चित करण्याचा प्रयत्न करेल.	ओळ
त्रुटी(jqXHR jqXHR, स्ट्रिंग टेक्स्ट स्टेटस, स्ट्रिंग एरर थ्रोऊन) विनंती अयशस्वी झाल्यास कार्यान्वित केले जाते. 3 वितर्क घेते: एक jqXHR ऑब्जेक्ट (पूर्वी XMLHttpRequest), त्रुटीचे वर्णन करणारी स्ट्रिंग आणि ती फेकल्यास अपवाद स्ट्रिंग. दुसऱ्या युक्तिवादात खालील मूल्ये असू शकतात: शून्य, "टाइमआउट", "एरर", "अबर्ट", आणि "पार्सरएरर". HTTP त्रुटी आढळल्यास, तिची मजकूर स्थिती तिसऱ्या युक्तिवादावर लिहिली जाईल. उदाहरणार्थ, "नॉट फाउंड" किंवा "इंटर्नल सर्व्हर एरर." jQuery 1.5 नुसार, एका फंक्शनऐवजी, हे पॅरामीटर फंक्शन्सची ॲरे स्वीकारू शकते. डेटाटाइप स्क्रिप्ट किंवा JSONP च्या बरोबरीचा असतो तेव्हा एरर इव्हेंट होत नाही.	फंक्शन किंवा ॲरे
जागतिक डीफॉल्ट: खरे. या विनंतीसाठी (जसे की ajaxStart किंवा ajaxStop) जागतिक Ajax इव्हेंट हँडलर्सना कॉल करायचा की नाही.	तार्किक
शीर्षलेख डीफॉल्ट: () येथे तुम्ही अतिरिक्त विनंती शीर्षलेख निर्दिष्ट करू शकता. या सेटिंगची मूल्ये BeforeSend फंक्शन कॉल करण्यापूर्वी प्रविष्ट केली जातील, जेथे शीर्षलेखांमध्ये अंतिम बदल केले जाऊ शकतात. (आवृत्ती 1.5 मध्ये जोडलेले)	एक वस्तू
जर सुधारित केले डीफॉल्ट: असत्य शेवटच्या विनंतीनंतर प्रतिसाद डेटा बदलला असेल तरच विनंती यशस्वी मानली जाईल. अंतिम-सुधारित शीर्षलेख वापरून तपासणी केली जाते. डीफॉल्टनुसार, हा पर्याय अक्षम आहे. jQuery 1.4 मध्ये, डेटा बदलला आहे की नाही हे ट्रॅक करण्यासाठी "etag" मूल्य देखील तपासले जाते.	तार्किक
स्थानिक आहे डीफॉल्ट: वर्तमान स्थानावर अवलंबून पॅरामीटर हे निर्धारित करते की वेब पृष्ठ स्थानिक पातळीवर चालत आहे (उदाहरणार्थ, फाइल, *-विस्तार आणि विजेट प्रोटोकॉल वापरणे) किंवा नाही (उदाहरणार्थ, HTTP प्रोटोकॉल वापरणे). $.ajaxSetup() पद्धत वापरून ही सेटिंग बदलणे चांगले. (आवृत्ती 1.5 मध्ये जोडलेले)	तार्किक
jsonp JSONP विनंती url मध्ये जोडलेल्या पॅरामीटरचे नाव परिभाषित करते (डीफॉल्टनुसार, "कॉलबॅक" वापरले जाते). उदाहरणार्थ, सेटिंग (jsonp:"onJSONPLoad") "onJSONPLoad=?" स्ट्रिंगच्या url भागामध्ये रूपांतरित केली जाते. आवृत्ती 1.5 पासून, या पॅरामीटरमध्ये असत्य निर्दिष्ट केल्याने url मध्ये अतिरिक्त पॅरामीटर जोडण्यास प्रतिबंध होतो. या प्रकरणात, तुम्हाला jsonpCallback सेटिंग मूल्य सेट करणे आवश्यक आहे. उदाहरणार्थ: (jsonp:false, jsonpCallback:"callbackName").	ओळ
jsonpCallback जेव्हा सर्व्हर JSONP विनंतीला प्रतिसाद देईल तेव्हा एक कार्य कॉल केले जाईल. डीफॉल्टनुसार, jQuery या फंक्शनसाठी एक सानुकूल अद्वितीय नाव व्युत्पन्न करते, जे श्रेयस्कर आहे. तुम्हाला GET रिक्वेस्टचे कॅशिंग वापरायचे असल्यास फंक्शनचे नाव स्वतः एंटर करा. आवृत्ती 1.5 पासून प्रारंभ करून, सर्व्हर प्रतिसादावर प्रक्रिया करण्यासाठी तुम्ही एक कार्य निर्दिष्ट करू शकता.	स्ट्रिंग किंवा फंक्शन
mime प्रकार येथे तुम्ही डेटा प्रकार निर्दिष्ट करू शकता ज्यामध्ये XHR ऐवजी सर्व्हरकडून प्रतिसाद अपेक्षित आहे. (आवृत्ती 1.5.1 मध्ये जोडलेले)	ओळ
पासवर्ड HTTP प्रवेश प्रमाणीकरण विनंतीला प्रतिसाद म्हणून वापरला जाणारा पासवर्ड (आवश्यक असल्यास)	ओळ
वापरकर्तानाव HTTP प्रवेश प्रमाणीकरण विनंतीला प्रतिसाद म्हणून वापरले जाणारे वापरकर्ता नाव (आवश्यक असल्यास)	ओळ
प्रक्रिया डेटा डीफॉल्ट: खरे ; डीफॉल्टनुसार, सर्व्हरला दिलेला डेटा ऑब्जेक्टमधून क्वेरी स्ट्रिंगमध्ये रूपांतरित केला जातो आणि "application/x-www-form-urlencoded" म्हणून पाठविला जातो. जर तुम्हाला DOM दस्तऐवज किंवा अन्य डेटा पाठवायचा असेल जो रूपांतरित केला जाऊ शकत नाही, तर processData पर्याय असत्य वर सेट करा.	तार्किक
scriptCharset फक्त "JSONP" आणि "script" प्रकारांच्या Ajax GET विनंत्यांना लागू होते. तृतीय-पक्ष डोमेनवरील सर्व्हर आपल्यापेक्षा भिन्न एन्कोडिंग वापरत असल्यास, आपण तृतीय-पक्ष सर्व्हरचे एन्कोडिंग निर्दिष्ट करणे आवश्यक आहे.	ओळ
स्थिती कोड डीफॉल्ट: () जोड्यांचा एक संच ज्यामध्ये विनंती अंमलबजावणी कोड कॉल केले जातील अशा फंक्शन्सशी संबंधित आहेत. उदाहरणार्थ, कोड 404 साठी (पृष्ठे अस्तित्वात नाहीत), आपण स्क्रीनवर संदेश प्रदर्शित करू शकता: $.ajax(( स्टेटसकोड:( 404:फंक्शन())( अलर्ट("पृष्ठ सापडले नाही"); ) ) )); जर विनंती यशस्वी झाली, तर पॅरामीटर म्हणून, निनावी फंक्शन यशासाठी समान पॅरामीटर्स घेईल. एरर असल्यास, ते एरर हँडलर फंक्शन प्रमाणेच घेईल. (आवृत्ती 1.5 मध्ये जोडले)	एक वस्तू
यश (डेटा ऑब्जेक्ट, टेक्स्ट स्टेटस स्ट्रिंग, jqXHR ऑब्जेक्ट) विनंती यशस्वीरित्या पूर्ण झाल्यास एक कार्य कॉल केले जाईल. 3 युक्तिवाद घेते - सर्व्हरद्वारे पाठविलेला डेटा आणि पूर्व-प्रक्रिया; अंमलबजावणी स्थितीसह स्ट्रिंग (टेक्स्ट स्टेटस); jqXHR ऑब्जेक्ट (1.5 पूर्वीच्या आवृत्त्यांमध्ये, jqXHR ऐवजी XMLHttpRequest वापरला जातो). jQuery 1.5 नुसार, एका फंक्शनऐवजी, हे पॅरामीटर फंक्शन्सची ॲरे स्वीकारू शकते.	फंक्शन किंवा ॲरे
वेळ संपला मिलिसेकंदांमध्ये सर्व्हरकडून प्रतिसादाची प्रतीक्षा करण्याची वेळ. $.ajaxSetup() मध्ये समान पॅरामीटरची जागतिक सेटिंग ओव्हरराइट करते. ही वेळ ओलांडल्यास, विनंती अयशस्वी होईल आणि "टाइमआउट" स्थितीसह एक त्रुटी घटना घडेल.	संख्या
पारंपारिक डीफॉल्ट: असत्य पारंपारिक क्रमिकीकरण शैली वापरण्यासाठी हे पॅरामीटर सत्य वर सेट करा.	तार्किक
प्रकार डीफॉल्ट: GET विनंती GET किंवा POST आहे हे निर्धारित करते. तुम्ही इतर HTTP विनंत्या देखील वापरू शकता (जसे की PUT किंवा DELETE), परंतु लक्षात ठेवा की सर्व ब्राउझर त्यांना समर्थन देत नाहीत.	ओळ
url डीफॉल्ट: वर्तमान पृष्ठ. ज्या पृष्ठावर विनंती पाठवली जाईल.	ओळ
xhr डीफॉल्टनुसार IE मध्ये ActiveXObject, इतर ब्राउझरमध्ये XMLHttpRequest. XMLHttpRequest ऑब्जेक्ट तयार करण्यासाठी कॉलबॅक फंक्शन. तुमचे फंक्शन तयार करून, तुम्ही ऑब्जेक्ट तयार करण्याची संपूर्ण जबाबदारी घेता.	कार्य
xhrफील्ड XMLHttpRequest ऑब्जेक्टच्या संबंधित फील्डची मूल्ये बदलण्यासाठी फॉर्मची एक ऑब्जेक्ट (नाव:मूल्य). $.ajax(( url: a_cross_domain_url, xhrFields: ( क्रेडेन्शियल्ससह: खरे ) )); (आवृत्ती 1.5.1 मध्ये जोडलेले)	नकाशा

$.ajax(( प्रकार: "POST", url: "some.php", डेटा: ( नाव: "जॉन", स्थान: "बोस्टन" ) )).done(function(msg) ( alert("डेटा सेव्ह केला: " + संदेश); ​​));

HTML पृष्ठाची नवीनतम आवृत्ती मिळवा

$.ajax(( url: "test.html", cache: false )).done(function(html) ( $("#results").append(html); ));

आम्ही डेटा म्हणून XML दस्तऐवज प्रसारित करतो. प्रोसेसडेटा सेटिंग असत्य वर सेट करून आम्ही डेटाचे नियमित स्ट्रिंगमध्ये स्वयंचलित रूपांतरण अक्षम करतो:

Var xmlDocument = ; var xmlRequest = $.ajax(( url: "page.php", processData: false, data: xmlDocument )); xmlRequest.done(handleResponse);

Var menuId = $("ul.nav").first().attr("id"); var विनंती = $.ajax(( url: "script.php", प्रकार: "POST", डेटा: (id: menuId), dataType: "html" )); request.done(function(msg) ( $("#log").html(msg); )); request.fail(function(jqXHR, textStatus) ( अलर्ट("विनंती अयशस्वी: " + textStatus); ));

JavaScript फाइल लोड आणि कार्यान्वित करा:

$.ajax(( प्रकार: "GET", url: "test.js", dataType: "script" ));

JQuery एक जावास्क्रिप्ट लायब्ररी आहे ज्याचे ध्येय "कमी लिहा, अधिक करा." jQuery तुमच्या साइटशी कनेक्ट करणे आणि वापरणे सुरू करणे सोपे आहे. jQuery तुमच्या साइटवर जावास्क्रिप्ट वापरणे खूप सोपे करते.

jQuery जावास्क्रिप्ट कोडच्या अनेक ओळी काढून टाकते आणि तुम्हाला या संपूर्ण ओळी फक्त एका पद्धतीने अंमलात आणण्याची परवानगी देते.

AJAX म्हणजे काय?

AJAX असिंक्रोनस आहे (म्हणजे, ब्राउझर विनंती पाठवल्यानंतर त्याला हवे ते करू शकतो, जसे की प्रतिसादाची प्रतीक्षा करणारा संदेश दर्शवणे, पृष्ठ स्क्रोल करणे इ.) JavaScript आणि XML. हे डायनॅमिक आणि जलद वेब पृष्ठे तयार करण्यासाठी वापरले जाते. AJAX आम्हाला संपूर्ण पृष्ठ रीलोड न करता वेब पृष्ठाचा काही भाग अद्यतनित करण्याची परवानगी देतो.

jQuery आणि AJAX बद्दल काय?

jQuery आणि AJAX चे संयोजन शक्तिशाली कार्यक्षमता प्रदान करते. jquery आणि ajax सह, तुम्ही विनंती करू शकता आणि XML, HTML आणि अगदी साध्या मजकुरासह विविध स्वरूपांमध्ये माहिती प्राप्त करू शकता. डेटाची देवाणघेवाण करण्यासाठी तुम्ही JSON फॉरमॅट वापरू शकता. आम्ही आमच्या एचटीएमएल पृष्ठावर ajax विनंतीद्वारे प्राप्त केलेला डेटा वापरू शकतो.

jQuery विद्यमान ब्राउझर Ajax API अधिक शक्तिशाली आणि वापरण्यास सुलभ बनवते. जावास्क्रिप्टचा वापर करून Ajax कॉल करणे हे थोडे अवघड आहे: XMLHttpRequest ऑब्जेक्ट तयार करण्यासाठी वेगवेगळ्या ब्राउझरला वेगवेगळ्या पध्दतींची आवश्यकता असते हे तुम्हाला लक्षात घ्यावे लागेल. याव्यतिरिक्त, फॉर्ममधून डेटा सबमिट करणे, जर तुम्ही AJAX कॉलसाठी नियमित जावास्क्रिप्ट वापरत असाल तर ते अधिक कठीण होते.

jQuery साधी आणि शक्तिशाली कार्यक्षमता प्रदान करते जी javascript च्या AJAX पद्धतींचा विस्तार करते आणि अधिक लवचिक दृष्टीकोन प्रदान करते.

या छोट्या लेखात मी तुम्हाला jQuery आणि AJAX साध्या php फॉर्ममध्ये कसे वापरायचे ते दाखवणार आहे. चला सुरुवात करूया... jQuery आणि AJAX वापरण्यासाठी आम्हाला दोन फाइल्स लागतील, पहिल्या फाइलमध्ये html/php कोड असेल ज्याद्वारे AJAX विनंती केली जाईल. दुसऱ्या फाईलमध्ये आम्ही ajax विनंतीवर प्रक्रिया करू आणि निकाल पहिल्या पृष्ठावर परत करू.

पायरी 1: एक school.php फाइल तयार करा आणि त्यात खालील कोड पेस्ट करा:

वरील कोडमध्ये आम्हाला विद्यार्थ्याचे नाव आणि क्रमांक मिळत आहे आणि jquery आणि ajax वापरून आम्ही त्यांना details.php वर पाठवत आहोत.

फंक्शन getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( प्रकार: "POST", url: " तपशील .php", डेटा: (fname:name, id:rno) )).done(कार्य(परिणाम) ( $("#msg").html("रोल क्रमांकाचा पत्ता " +rno +" हा "+परिणाम आहे. );));

तुमचे नाव:
हजेरी क्रमांक:

पायरी 2: details.php तयार करा आणि त्यात खालील कोड ठेवा:

वरील कोडमध्ये, आम्हाला अनुक्रम क्रमांक आणि त्याचे नाव वापरून विद्यार्थ्याचा पत्ता मिळतो.

या उदाहरणासाठी, तुम्हाला शाळेचा डेटाबेस आणि विद्यार्थी टेबल तयार करणे आवश्यक आहे. विद्यार्थी तक्त्यामध्ये नावे, अनुक्रम क्रमांक आणि पत्ते असलेली फील्ड असतात.

मला आशा आहे की तुम्हाला हा लेख उपयुक्त वाटला.

AJAX हे एक संक्षिप्त रूप आहे ज्याचा अर्थ असिंक्रोनस Javascript आणि XML आहे. खरं तर, AJAX हे नवीन तंत्रज्ञान नाही, कारण Javascript आणि XML दोन्ही बऱ्याच काळापासून आहेत आणि AJAX हे नियुक्त तंत्रज्ञानाचे संश्लेषण आहे. AJAX बहुतेक वेळा वेब 2.0 या शब्दाशी संबंधित आहे आणि नवीनतम वेब अनुप्रयोग म्हणून ओळखले जाते.

AJAX वापरताना, प्रत्येक वेळी संपूर्ण पृष्ठ रीफ्रेश करण्याची आवश्यकता नाही, कारण त्यातील केवळ विशिष्ट भाग अद्यतनित केला जातो. हे अधिक सोयीस्कर आहे, कारण प्रत्येकाकडे अमर्यादित इंटरनेट नसल्यामुळे तुम्हाला जास्त वेळ प्रतीक्षा करावी लागत नाही आणि अधिक किफायतशीर आहे. खरे आहे, या प्रकरणात, विकसकाने हे सुनिश्चित करणे आवश्यक आहे की वापरकर्त्यास पृष्ठावर काय घडत आहे याची जाणीव आहे. हे लोडिंग इंडिकेटर आणि मजकूर संदेश वापरून लागू केले जाऊ शकते जे सूचित करतात की सर्व्हरसह डेटाची देवाणघेवाण केली जात आहे. तुम्ही हे देखील समजून घेतले पाहिजे की सर्व ब्राउझर AJAX (ब्राउझरच्या जुन्या आवृत्त्या आणि मजकूर ब्राउझर) चे समर्थन करत नाहीत. प्लस Javascript वापरकर्त्याद्वारे अक्षम केले जाऊ शकते. म्हणून, एखाद्याने तंत्रज्ञानाचा गैरवापर करू नये आणि वेबसाइटवर माहिती सादर करण्याच्या पर्यायी पद्धतींचा अवलंब करू नये.

चला AJAX चे फायदे सारांशित करूया:

• सोयीस्कर वेब इंटरफेस तयार करण्याची क्षमता
• सक्रिय वापरकर्ता परस्परसंवाद
• वापरणी सोपी

AJAX वेब पृष्ठासह कार्य करण्याच्या दोन पद्धती वापरते: वेब पृष्ठ रीलोड न करता बदलणे आणि डायनॅमिकपणे सर्व्हरशी संपर्क साधणे. दुसरे अनेक प्रकारे केले जाऊ शकते, विशेषतः, XMLHttpRequest, ज्याबद्दल आपण बोलू, आणि लपविलेले फ्रेम डेटा एक्सचेंज वापरून

डेटाची देवाणघेवाण करण्यासाठी, पृष्ठावर एक XMLHttpRequest ऑब्जेक्ट तयार करणे आवश्यक आहे, जे वापरकर्त्याचे ब्राउझर आणि सर्व्हर (चित्र 1) मधील एक प्रकारचा मध्यस्थ आहे. XMLHttpRequest वापरून, तुम्ही सर्व्हरला विनंती पाठवू शकता आणि विविध प्रकारच्या डेटाच्या स्वरूपात प्रतिसाद देखील प्राप्त करू शकता.

सर्व्हरसह डेटाची देवाणघेवाण करण्याचे दोन मार्ग आहेत. पहिली पद्धत GET विनंती आहे. या विनंतीमध्ये, तुम्ही सर्व्हरवरील दस्तऐवजात प्रवेश करता, URL द्वारेच युक्तिवाद पास करता. या प्रकरणात, क्लायंटच्या बाजूने Javascript एस्केप फंक्शन वापरणे तर्कसंगत असेल जेणेकरून काही डेटा विनंतीमध्ये व्यत्यय आणू नये.

Javascript मध्ये लिहिलेल्या क्लायंटचा भाग, सर्व्हरसह सुरक्षित देवाणघेवाण करण्यासाठी आवश्यक कार्यक्षमता प्रदान करणे आणि वरीलपैकी कोणत्याही प्रकारे डेटाची देवाणघेवाण करण्याच्या पद्धती प्रदान करणे आवश्यक आहे. सर्व्हरच्या भागाने इनपुट डेटावर प्रक्रिया करणे आवश्यक आहे, आणि त्यावर आधारित, नवीन माहिती व्युत्पन्न करणे (उदाहरणार्थ, डेटाबेससह कार्य करणे), आणि क्लायंटला परत पाठवणे. उदाहरणार्थ, सर्व्हरकडून माहितीची विनंती करण्यासाठी, आपण अनेक लहान पॅरामीटर्सच्या हस्तांतरणासह नियमित GET विनंती वापरू शकता, परंतु माहिती अद्यतनित करण्यासाठी किंवा नवीन माहिती जोडण्यासाठी, आपल्याला POST विनंती वापरण्याची आवश्यकता असेल, कारण ती आपल्याला मोठ्या प्रमाणात हस्तांतरित करण्याची परवानगी देते. डेटाचे प्रमाण.

आधीच नमूद केल्याप्रमाणे, AJAX एसिंक्रोनस डेटा ट्रान्सफर वापरते. याचा अर्थ डेटा हस्तांतरित होत असताना, वापरकर्ता इतर आवश्यक क्रिया करू शकतो. यावेळी, वापरकर्त्याला सूचित केले पाहिजे की काही प्रकारचे डेटा एक्सचेंज होत आहे, अन्यथा वापरकर्त्याला असे वाटेल की काहीतरी चुकीचे झाले आहे आणि तो साइट सोडू शकतो किंवा "फ्रोझन" असे त्याला वाटत असलेल्या फंक्शनला पुन्हा कॉल करू शकतो. वेब 2.0 ऍप्लिकेशनमधील संप्रेषणादरम्यानचे संकेत खूप महत्त्वाची भूमिका बजावतात: अभ्यागतांना अद्याप पृष्ठ अद्यतनित करण्याच्या या पद्धतीची सवय नसावी.

तंत्रज्ञानाच्या नावाप्रमाणे सर्व्हरचा प्रतिसाद केवळ XML असू शकत नाही. XML व्यतिरिक्त, तुम्ही प्रतिसाद साध्या मजकुरात किंवा JSON (Javascript Object Notation) मध्ये प्राप्त करू शकता. जर प्रतिसाद साध्या मजकुरात प्राप्त झाला असेल तर तो पृष्ठावरील कंटेनरमध्ये त्वरित प्रदर्शित केला जाऊ शकतो. XML स्वरूपात प्रतिसाद प्राप्त करताना, प्राप्त झालेल्या XML दस्तऐवजावर सहसा क्लायंटच्या बाजूने प्रक्रिया केली जाते आणि डेटा (X)HTML मध्ये रूपांतरित केला जातो. JSON फॉरमॅटमध्ये प्रतिसाद प्राप्त करताना, क्लायंटला पूर्ण जावास्क्रिप्ट ऑब्जेक्ट प्राप्त करण्यासाठी फक्त प्राप्त केलेला कोड (Javascript चे eval function) कार्यान्वित करणे आवश्यक आहे. परंतु येथे आपण सावधगिरी बाळगणे आवश्यक आहे आणि या तंत्रज्ञानाचा वापर करून दुर्भावनायुक्त कोड प्रसारित केला जाऊ शकतो हे लक्षात घेणे आवश्यक आहे, म्हणून सर्व्हरवरून प्राप्त कोड कार्यान्वित करण्यापूर्वी, आपण काळजीपूर्वक तपासा आणि त्यावर प्रक्रिया केली पाहिजे. "निष्क्रिय" विनंती म्हणून अशी प्रथा आहे, ज्यामध्ये सर्व्हरकडून कोणताही प्रतिसाद मिळत नाही, फक्त सर्व्हरच्या बाजूचा डेटा बदलला जातो.

वेगवेगळ्या ब्राउझरमध्ये, या ऑब्जेक्टमध्ये भिन्न गुणधर्म आहेत, परंतु सर्वसाधारणपणे ते समान आहे.

XMLHttpRequest ऑब्जेक्ट पद्धती

लक्षात घ्या की पद्धतीची नावे इतर Javascript फंक्शन्स प्रमाणेच कॅमल-शैलीमध्ये लिहिली आहेत. त्यांचा वापर करताना काळजी घ्या.

रद्द करा()- सर्व्हरला सध्याची विनंती रद्द करणे.

AllResponseHeaders मिळवा()- सर्व्हरवरून सर्व प्रतिसाद शीर्षलेख मिळवा.

getResponseHeader("header_name")- निर्दिष्ट शीर्षलेख मिळवा.

उघडा("request_type", "URL", "असिंक्रोनस", "वापरकर्तानाव", "पासवर्ड")- सर्व्हरला विनंती सुरू करणे, विनंती पद्धत निर्दिष्ट करणे. विनंती प्रकार आणि URL आवश्यक पॅरामीटर्स आहेत. तिसरा युक्तिवाद बुलियन मूल्य आहे. सहसा सत्य नेहमी निर्दिष्ट केले जाते किंवा अजिबात निर्दिष्ट केलेले नसते (डीफॉल्ट सत्य असते). चौथा आणि पाचवा वितर्क प्रमाणीकरणासाठी वापरला जातो (स्क्रिप्टमध्ये प्रमाणीकरण डेटा संग्रहित करणे खूप असुरक्षित आहे, कारण स्क्रिप्ट कोणत्याही वापरकर्त्याद्वारे पाहिली जाऊ शकते).

पाठवा("सामग्री")- सर्व्हरला HTTP विनंती पाठवा आणि प्रतिसाद प्राप्त करा.

setRequestHeader("header_name", "value")- विनंती शीर्षलेख मूल्ये सेट करा.

XMLHttpRequest ऑब्जेक्टचे गुणधर्म

ऑन रेडीस्टेट बदल- XMLHttpRequest ऑब्जेक्टच्या सर्वात महत्वाच्या गुणधर्मांपैकी एक. या गुणधर्माचा वापर करून, एक हँडलर निर्दिष्ट केला जातो ज्याला जेव्हा जेव्हा ऑब्जेक्टची स्थिती बदलते तेव्हा म्हणतात.

तयार राज्य- ऑब्जेक्टची स्थिती दर्शविणारी संख्या.

प्रतिसाद मजकूर- साधा मजकूर (स्ट्रिंग) म्हणून सर्व्हर प्रतिसादाचे प्रतिनिधित्व.

प्रतिसाद XML- सर्व्हरकडून प्राप्त DOM शी सुसंगत दस्तऐवज ऑब्जेक्ट.

स्थिती- सर्व्हरकडून प्रतिसादाची स्थिती.

स्टेटस टेक्स्ट- सर्व्हरकडून प्रतिसाद स्थितीचे मजकूर प्रतिनिधित्व.

तुम्ही रेडीस्टेट मालमत्तेकडे बारकाईने लक्ष द्यावे:

• 0 - ऑब्जेक्ट प्रारंभ केलेला नाही.
• 1 - ऑब्जेक्ट डेटा लोड करत आहे.
• 2 - ऑब्जेक्टने त्याचा डेटा लोड केला आहे.
• 3 - ऑब्जेक्ट पूर्णपणे लोड केलेला नाही, परंतु वापरकर्त्याद्वारे संवाद साधला जाऊ शकतो.
• 4 - ऑब्जेक्ट पूर्णपणे आरंभ केला आहे; सर्व्हरकडून प्रतिसाद मिळाला.

हे ऑब्जेक्टच्या तयारीच्या स्थितीवर आधारित आहे की आपण अभ्यागताला सर्व्हरसह डेटा एक्सचेंजची प्रक्रिया कोणत्या टप्प्यावर आहे याबद्दल माहिती देऊ शकता आणि शक्यतो, XMLHttpRequest ऑब्जेक्ट तयार करणे याबद्दल त्याला सूचित करू शकता

वर नमूद केल्याप्रमाणे, प्रत्येक प्रकारच्या ब्राउझरसाठी हा ऑब्जेक्ट तयार करणे ही एक अद्वितीय प्रक्रिया आहे.

उदाहरणार्थ, Gecko-compatible ब्राउझर, Konqueror आणि Safari मध्ये ऑब्जेक्ट तयार करण्यासाठी, तुम्हाला खालील अभिव्यक्ती वापरण्याची आवश्यकता आहे:

वर विनंती = नवीन XMLHttpRequest();

आणि इंटरनेट एक्सप्लोररसाठी खालील वापरले जाते:

Var विनंती = नवीन ActiveXObject("Microsoft.XMLHTTP");

Var विनंती = नवीन ActiveXObject("Msxml2.XMLHTTP");

आता, क्रॉस-ब्राउझर सुसंगतता प्राप्त करण्यासाठी, तुम्हाला सर्व फंक्शन्स एकामध्ये एकत्र करणे आवश्यक आहे:

फंक्शन CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-compatible browsers, Safari, Konqueror Request = new XMLHttpRequest(); ) अन्यथा (window.ActiveXObject) ( //इंटरनेट एक्सप्लोरर प्रयत्न करा ( विनंती = new ActiveXObject("Microsoft.XMLHTTP"); पकड (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) जर (!Request) ( अलर्ट ("XMLHttpRequest तयार करू शकत नाही");) रिटर्न रिक्वेस्ट;

हे सर्व केल्यानंतर, आपण हा ऑब्जेक्ट तयार करू शकता आणि लोकप्रिय ब्राउझरवरील कार्यप्रदर्शनाबद्दल काळजी करू नका. परंतु तुम्ही वेगवेगळ्या ठिकाणी एखादी वस्तू तयार करू शकता. जर तुम्ही ते जागतिक स्तरावर तयार केले, तर ठराविक वेळी सर्व्हरला फक्त एक विनंती करणे शक्य होईल. प्रत्येक वेळी सर्व्हरला विनंती केल्यावर तुम्ही ऑब्जेक्ट तयार करू शकता (हे जवळजवळ पूर्णपणे समस्येचे निराकरण करेल).

सर्व्हरला विनंती

सर्व्हर विनंती अल्गोरिदम असे दिसते:

• XMLHttpRequest चे अस्तित्व तपासत आहे.
• सर्व्हरशी कनेक्शन सुरू करत आहे.
• सर्व्हरला विनंती पाठवत आहे.
• प्राप्त डेटावर प्रक्रिया करणे.

सर्व्हरला विनंती तयार करण्यासाठी, आम्ही एक लहान फंक्शन तयार करू जे GET आणि POST विनंत्यांसाठी कार्यशीलतेमध्ये एकत्रित करेल.

/* सर्व्हरवर फाईलला विनंती पाठवण्याचे कार्य r_method - विनंती प्रकार: GET किंवा POST r_path - फाईलचा मार्ग r_args - a=1&b=2&c=3... r_handler - कडून प्रतिसाद हाताळणारे फंक्शन सर्व्हर */ फंक्शन SendRequest(r_method , r_path, r_args, r_handler) ( // विनंती तयार करा var Request = CreateRequest(); // विनंतीचे अस्तित्व पुन्हा तपासा जर (! विनंती) ( परत करा; ) // कस्टम नियुक्त करा handler Request.onreadystatechange = function() ( // डेटा एक्सचेंज पूर्ण झाल्यास (Request.readyState == 4) ( // वापरकर्ता हँडलरकडे नियंत्रण पास करा r_handler(Request); ) ) // ते आवश्यक आहे का ते तपासा एक GET विनंती करा जर (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "+ r_args; इनिशियल करा Request.open(r_method, r_path, true); r_method.toLowerCase() == "पोस्ट") ( //हे POST- विनंती असल्यास // शीर्षलेख सेट करा Request.setRequestHeader("सामग्री-प्रकार","application/x-www-form-urlencoded; charset=utf- 8"); // विनंती पाठवा Request.send(r_args); ) इतर ( // ही GET विनंती असल्यास // एक शून्य विनंती पाठवा Request.send(null); ) )

विनंती तयार करणे खूप सोपे झाले आहे. उदाहरणार्थ, एक फंक्शन लिहू जे सर्व्हरवर फाइलची सामग्री प्राप्त करेल आणि कंटेनरमध्ये आउटपुट करेल.

फंक्शन रीडफाइल(फाइलनाव, कंटेनर) ( //एक हँडलर फंक्शन तयार करा var हँडलर = फंक्शन(विनंती) ( document.getElementById(container).innerHTML = Request.responseText; ) // विनंती पाठवा SendRequest("GET",फाइलनाव," ", हँडलर);

अशा प्रकारे सर्व्हरशी परस्परसंवाद होतो.

प्रतिसादावर प्रक्रिया करत आहे

मागील उदाहरणात, आम्ही सर्व्हरला विनंती कार्य केले. परंतु हे मूलत: असुरक्षित आहे, कारण आम्ही ऑब्जेक्टची स्थिती आणि सर्व्हरकडून प्रतिसादाच्या स्थितीवर प्रक्रिया करत नाही.

चला आमच्या कोडमध्ये जोडू या जेणेकरून ते लोडिंग प्रक्रियेबद्दल दृश्य सूचना प्रदर्शित करू शकेल.

Request.onreadystatechange = function() ( // डेटा एक्सचेंज पूर्ण झाल्यास (Request.readyState == 4) ( // वापरकर्ता हँडलर r_handler(Request) कडे नियंत्रण पास करा; ) अन्यथा ( // वापरकर्त्याला डाउनलोडबद्दल सूचित करा ) ) ...

तुम्हाला आधीच माहिती आहे, XMLHttpRequest ऑब्जेक्ट तुम्हाला सर्व्हरकडून प्रतिसादाची स्थिती जाणून घेण्याची परवानगी देतो. या संधीचा फायदा घेऊया.

Request.onreadystatechange = function() ( // जर डेटा एक्सचेंज पूर्ण झाला असेल तर (Request.readyState == 4) ( जर (Request.status == 200) ( // वापरकर्ता हँडलर r_handler(Request); ) इतर ( // आम्ही वापरकर्त्याला झालेल्या त्रुटीबद्दल सूचित करतो) ) अन्यथा (// वापरकर्त्याला डाउनलोडबद्दल सूचित करा) ) ...

सर्व्हर प्रतिसाद पर्याय

तुम्ही सर्व्हरवरून अनेक प्रकारचा डेटा प्राप्त करू शकता:

• साधा मजकूर

जर तुम्हाला साधा मजकूर प्राप्त झाला, तर तुम्ही ताबडतोब कंटेनरवर पाठवू शकता, म्हणजेच आउटपुटवर. XML म्हणून डेटा प्राप्त करताना, आपण DOM फंक्शन्स वापरून डेटावर प्रक्रिया करणे आवश्यक आहे आणि HTML वापरून निकाल सादर करणे आवश्यक आहे.

JSON Javascript ऑब्जेक्ट नोटेशन आहे. त्याच्या मदतीने, तुम्ही एखाद्या वस्तूला स्ट्रिंग म्हणून प्रस्तुत करू शकता (येथे तुम्ही सीरियलायझेशन फंक्शनसह एक साधर्म्य देऊ शकता). जेव्हा तुम्हाला JSON डेटा प्राप्त होतो, तेव्हा तुम्ही पूर्ण Javascript ऑब्जेक्ट मिळवण्यासाठी आणि त्यावर आवश्यक ऑपरेशन्स करण्यासाठी ते कार्यान्वित केले पाहिजे. कृपया लक्षात ठेवा की असा डेटा ट्रान्समिशन आणि अंमलबजावणी सुरक्षित नाही. अंमलबजावणीसाठी काय येते याचा मागोवा ठेवावा लागेल.

नमुना JSON कोड:
( "डेटा": ( "मिस्क": [ ( "नाव" : "JSON घटक एक", "प्रकार" : "उपशीर्षक 1"), ( "नाव" : "जेएसओएन घटक दोन", "प्रकार" : " उपशीर्षक 2 ") ]))

असा कोड प्राप्त करताना, खालील क्रिया करा:

Var प्रतिसाद डेटा = eval("(" + Request.responseText + ")")

हा कोड कार्यान्वित केल्यानंतर, ऑब्जेक्ट आपल्यासाठी उपलब्ध होईल प्रतिसाद डेटा.

सर्व्हर-साइड प्रोग्रामिंग भाषांसह कार्य करणे

या प्रकारचे काम सामान्य कामापेक्षा वेगळे नाही. उदाहरणांसाठी, मी PHP ही सर्व्हर-साइड भाषा म्हणून घेईन. क्लायंटच्या बाजूने काहीही बदललेले नाही, परंतु सर्व्हरची बाजू आता PHP फाइलद्वारे दर्शविली जाते.

परंपरेनुसार, आपल्या अद्भुत जगाला शुभेच्छा देऊन सुरुवात करूया:

इको "हॅलो, वर्ल्ड!";

या फाईलमध्ये प्रवेश करताना, हॅलो, वर्ल्ड ही स्ट्रिंग क्लायंटला परत केली जाईल. जसे आपण कल्पना करू शकता, हे अनुप्रयोग तयार करण्यासाठी प्रचंड संधी सादर करते. XMLHttpRequest वापरून सर्व्हरला कॉल करताना युक्तिवाद पास करून, तुम्ही आउटपुटचे पॅरामीटराइज करू शकता, ज्यामुळे वेब अनुप्रयोगाला विस्तृत कार्यक्षमता प्रदान करता येईल.

PHP व्यतिरिक्त, तुम्ही इतर कोणतीही सर्व्हर-साइड प्रोग्रामिंग भाषा वापरू शकता.

स्ट्रिंग मिळवा

विनंती कार्यान्वित करताना डेटा प्रसारित करण्यासाठी HTTP पद्धत. सामान्यतः GET किंवा POST वापरले जातात. तुम्ही PUT आणि DELETE पद्धती देखील वापरू शकता, परंतु ते सर्व ब्राउझरद्वारे समर्थित नसल्यामुळे याची शिफारस केलेली नाही.

$.ajax(( //... प्रकार: "POST", //... ));

url स्ट्रिंग चालू पान

$.ajax(( //... url: "/path/to/script", //... ));

डेटा स्ट्रिंग | वस्तू

सर्व्हरला विनंतीसह डेटा पाठवला. ते क्वेरी स्ट्रिंगमध्ये रूपांतरित केले जातात आणि, डीफॉल्टनुसार, URL सारख्या फॉर्ममध्ये एन्कोड केले जातात (URL फॉरमॅटमध्ये स्वयंचलित एन्कोडिंगसाठी पॅरामीटर जबाबदार आहे).

विनंती GET पद्धत वापरून केली असल्यास स्ट्रिंग URL क्वेरी स्ट्रिंगमध्ये जोडली जाते. जर विनंती POST पद्धत वापरून केली गेली असेल, तर डेटा विनंतीच्या मुख्य भागामध्ये प्रसारित केला जातो.

$.ajax(( //... डेटा: "value1=1&value2=2&value3=3", //... ));

जर दिलेले पॅरामीटर प्रॉपर्टी_नाम/मूल्य जोड्यांचा संच म्हणून एक ऑब्जेक्ट असेल आणि मूल्य ॲरे असेल, तर jQuery ऑब्जेक्टला एकाच कीसह एकाधिक मूल्यांच्या क्रमाने क्रमबद्ध करते.

(Foo: ["bar1", "bar2"])

&Foo=bar1&Foo=bar2

async बुलियन खरे

असिंक्रोनस विनंत्या अंमलात आणण्यासाठी ध्वजांकित करा.

$.ajax(( //... async: असत्य, //... ));

डेटा प्रकार स्ट्रिंग सर्व्हर प्रतिसादात अपेक्षित डेटा प्रकाराचे नाव निर्दिष्ट करणारी स्ट्रिंग. डेटा प्रकार निर्दिष्ट न केल्यास, सर्व्हर प्रतिसादाच्या MIME प्रकारावर आधारित jQuery स्वतः ते निर्धारित करण्याचा प्रयत्न करते. वैध मूल्ये: xml, html, स्क्रिप्ट, json, jsonp, मजकूर. (डेटाफिल्टर फंक्शनद्वारे रिक्वेस्ट रिस्पॉन्समध्ये प्राप्त झालेल्या डेटावर सक्सेस कॉलबॅक फंक्शनमध्ये पास होण्यापूर्वी त्यावर प्रक्रिया करण्याची पद्धत निश्चित करणे आवश्यक आहे.) कॅशे बुलियन खरे

प्रतिसाद कॅशिंग ध्वज.

मजकूर, xml, html, json डेटा प्रकारांसाठी सत्य वर डीफॉल्ट. स्क्रिप्ट आणि jsonp डेटा प्रकारांसाठी डीफॉल्ट मूल्य असत्य आहे.

सामग्री प्रकार स्ट्रिंग application/x-www-form-urlencoded विनंतीमधील सामग्रीचा प्रकार (सर्व्हरला डेटा पाठवताना). संदर्भ वस्तू हा ऑब्जेक्ट या ajax विनंतीशी संबंधित सर्व कॉलबॅक फंक्शन्ससाठी संदर्भ (हे) बनेल (उदाहरणार्थ, यश किंवा त्रुटी कार्यांसाठी) $.ajax(( url: "test.html", संदर्भ: document.body, यश: फंक्शन ()( $(this).addClass("पूर्ण"); ) )); जागतिक बुलियन खरे ajax विनंतीच्या विविध टप्प्यांवर जागतिक इव्हेंट हँडलर्सना कॉल करणे, उदाहरणार्थ, ajaxStart किंवा ajaxStop फंक्शन्स जर सुधारित केले बुलियन खोटे

सत्य वर सेट केल्यास, शेवटच्या विनंतीपासून प्रतिसादातील डेटा बदलला असेल तरच विनंती यशस्वी मानली जाते (जेक्वेरी ब्राउझर कॅशेमधील घटक सर्व्हरवर असलेल्या गोष्टीशी जुळतो की नाही हे अंतिम-सुधारित शीर्षलेख तपासून शेवटची सामग्री बदल, आणि jQuery 1.4 मध्ये Etag शीर्षलेख देखील तपासला जातो - घटक आवृत्तीसह एक स्ट्रिंग). डीफॉल्ट मूल्य असत्य आहे, उदा. विनंतीचे यश हेडर किंवा प्रतिसादातील बदलांवर अवलंबून नाही.

वापरकर्तानाव स्ट्रिंग

वापरकर्तानाव जे सर्व्हरवर HTTP अधिकृततेसाठी वापरले जाईल.

पासवर्ड स्ट्रिंग पासवर्ड जो सर्व्हरवर HTTP अधिकृतता विनंतीला प्रतिसाद म्हणून वापरला जाईल. प्रक्रिया डेटा बुलियन खरे

पॅरामीटरमध्ये सर्व्हरला दिलेला डेटा ॲप्लिकेशन/X-WWW-forms-urlencoded आणि encoded या सामग्री प्रकारासह क्वेरी स्ट्रिंगमध्ये रूपांतरित केला जातो. जर ही प्रक्रिया इच्छित नसेल (जेव्हा इतर डेटा सर्व्हरवर पाठविला जाणे आवश्यक आहे, जसे की DOMDocument किंवा xml ऑब्जेक्ट), तर हे पॅरामीटर असत्य वर सेट करून ते बायपास केले जाऊ शकते.

scriptCharset स्ट्रिंग

jsonp किंवा स्क्रिप्ट डेटा लक्ष्यित GET विनंत्या आणि विनंत्या करत असताना, विनंती वर्ण एन्कोडिंग निर्दिष्ट करते (उदाहरणार्थ, UTF-8 किंवा CP1251). क्लायंट-साइड आणि सर्व्हर-साइड एन्कोडिंगमधील फरकांसाठी उपयुक्त.

वेळ संपला पूर्णांक

सर्व्हर प्रतिसादाची प्रतीक्षा करण्यासाठी मिलिसेकंदांमध्ये कमाल वेळ सेट करते. $.AjaxSetup द्वारे जागतिक कालबाह्य मर्यादा सेटिंगवर अग्रक्रम घेते. कालबाह्य मर्यादा ओलांडल्यास, विनंती रद्द केली जाते आणि त्रुटी हाताळणी कार्य त्रुटी (स्थापित असल्यास) कॉल केली जाते.

नाव पॅरामीटर्स वर्णन

त्रुटी	XHR, मजकूर स्थिती, त्रुटी थ्रोऊन	विनंती अयशस्वी झाल्यावर फायर होते. फंक्शन तीन वितर्क पास केले आहे: मजकूर स्थिती - उद्भवलेल्या त्रुटीच्या प्रकाराचे वर्णन करणारी स्ट्रिंग (कालबाह्य, त्रुटी, सुधारित न केलेली किंवा पार्सर त्रुटी) एररथ्रॉन - पर्यायी पॅरामीटर, अपवाद ऑब्जेक्ट, जर असेल तर (XHR ऑब्जेक्टच्या उदाहरणाद्वारे परत केले गेले) $.ajax(( //... त्रुटी: फंक्शन() ( अलर्ट("एरर!"); //... ));
यश	डेटा, मजकूर स्थिती, XHR	विनंती यशस्वी झाल्यावर फायर होते. फंक्शन तीन वितर्क पास केले आहे: डेटा - प्रतिसादात सर्व्हरद्वारे परत केलेला डेटा, पॅरामीटर मूल्यानुसार डेटाफिल्टर फंक्शनद्वारे पूर्व-प्रक्रिया केलेला मजकूर स्थिती - यश दर्शविणारी स्थिती कोड असलेली स्ट्रिंग XHR - XMLHttpRequest ऑब्जेक्टचे एक उदाहरण $.ajax(( //... यश: फंक्शन() ( इशारा("यश!"), //... ));
आधी पाठवा	XHR	विनंती पाठवण्यापूर्वी आग लागते. हे XHR ऑब्जेक्ट (XMLHttpRequest) चे एकमेव वितर्क म्हणून दिले जाते. फंक्शन असत्य परत करत असल्यास, विनंती रद्द केली जाते. $.ajax(( //... beforeSend: function() ( alert("BeforeSend worked!"); //... ));
पूर्ण	XHR, मजकूर स्थिती	विनंतीच्या शेवटी फायर, त्याचे यश किंवा अयशस्वी (आणि नंतर आणि फंक्शन्स, जर ते निर्दिष्ट केले असतील तर) विचारात न घेता. फंक्शन दोन युक्तिवाद घेते: XHR ऑब्जेक्टचे एक उदाहरण (XMLHttpRequest) आणि यश किंवा त्रुटी स्थिती दर्शविणारी स्ट्रिंग (विनंती प्रतिसादातील स्थिती कोडनुसार)

तपशीलवार उदाहरण:

फंक्शन टेस्टAjax(id, pid) ( $.ajax(( प्रकार: "POST", डेटा: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", यश: फंक्शन(डेटा) ( var obj = $.parseJSON(डेटा); //सर्व्हर प्रतिसादाचे json रूपांतरित करा जर (obj.error == 0) ( alert("विनंती यशस्वी झाली"); ) else ( इशारा (obj.error) ) ) ) यशस्वी विनंती
त्रुटीसह विनंती

PHP स्क्रिप्ट (test.php):

भिन्न प्रतिसाद आउटपुटसह दुसरे उदाहरण:

फंक्शन टेस्टAjax(id, pid) ( $.ajax(( प्रकार: "POST", डेटा: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", यश: फंक्शन(डेटा) ( $("#सामग्री").html(डेटा); ) ) सत्य परत करा;
त्रुटीसह विनंती

उत्तर:

PHP स्क्रिप्ट (test.php):

अधिक माहिती येथे मिळू शकते: http://api.jquery.com/jquery.ajax/

एक धडा ज्यामध्ये आम्ही AJAX तंत्रज्ञानासह कसे कार्य करावे हे समजून घेण्यासाठी सोप्या उदाहरणांचा वापर करू, म्हणजे, सर्व्हरला समकालिक HTTP विनंत्या तयार करण्यासाठी XMLHttpRequest ऑब्जेक्ट (थोडक्यात XHR) कसे वापरावे आणि त्यावरून प्रतिसाद कसा मिळवावा.

एक उदाहरण बघून (नवशिक्यांसाठी) AJAX तंत्रज्ञानाचा परिचय करून देऊ जे सर्व्हरकडून सिंक्रोनस विनंतीद्वारे माहितीची विनंती करेल.

सिंक्रोनस विनंती, ॲसिंक्रोनसच्या विपरीत, वेब पृष्ठ पाठविल्यानंतर आणि प्रतिसाद प्राप्त होण्यापूर्वी ते गोठवते, उदा. वापरकर्त्यासाठी ते अगम्य बनवते. सिंक्रोनस विनंत्या वेबसाइट्सवर क्वचितच वापरल्या जातात, परंतु नवशिक्यांसाठी त्यांच्यासह AJAX तंत्रज्ञान शिकणे चांगले आहे.

उदाहरण तयार करण्याआधी, AJAX तंत्रज्ञानानुसार कार्य करणाऱ्या पृष्ठाचा तुकडा विकसित करण्यात गुंतलेल्या मुख्य पायऱ्या पाहू या. या प्रकरणात, पृष्ठावरील कोणतीही घटना घडल्यानंतर (वापरकर्त्याने बटणावर क्लिक केले इ.) नंतर सर्व क्रिया प्रामुख्याने JavaScript कोडमध्ये केल्या जातात आणि त्यात खालील चरण असतात:

पृष्ठ किंवा फॉर्ममधून काही माहिती (डेटा) पुनर्प्राप्त करणे (आवश्यक असल्यास)

वेब सर्व्हरला विनंती पाठवत आहे

वेब सर्व्हरकडून प्रतिसाद प्राप्त होत आहे

प्रतिसाद यशस्वी झाल्यास पृष्ठावर परिणाम प्रदर्शित करा.

सिंक्रोनस AJAX विनंत्या तयार करण्याच्या मूलभूत गोष्टी उदाहरण 1: सिंक्रोनस AJAX विनंती तयार करणे

XMLHttpRequest पद्धत वापरून सर्व्हरला सिंक्रोनस AJAX विनंती कार्यान्वित करण्याचे उदाहरण पाहू. या उदाहरणात, आम्ही सर्व्हरवरील data.txt फाइलमध्ये असलेल्या डेटाची विनंती करू आणि स्पॅन घटकातील पृष्ठावर प्रदर्शित करू.

उदाहरणामध्ये index.html , script.js आणि data.txt फायली असतील, ज्या साधेपणासाठी सर्व्हरवर एकाच निर्देशिकेत असू शकतात.

एक HTML पेज तयार करून डेव्हलपमेंट सुरू करूया ज्यावर आपण script.js फाइल कनेक्ट करू. ही फाइल, किंवा त्याऐवजी त्यातील सामग्री, सर्व मुख्य कार्य करेल. परंतु आपण त्याच्या विकासाकडे जाण्यापूर्वी, पृष्ठावर div आणि span घटक तयार करूया. div घटक एक बटण म्हणून कार्य करेल, जे क्लिक केल्यावर AJAX विनंती कार्यान्वित करेल. आणि स्पॅन घटक कंटेनर म्हणून काम करेल ज्यामध्ये सर्व्हरकडून येणारा प्रतिसाद असेल.

याव्यतिरिक्त, आम्ही पृष्ठ थोडे सजवण्यासाठी अधिक CSS शैली जोडू. परिणामी, आमच्याकडे खालील HTML कोड असावा:

JavaScript AJAX #myDiv (उंची: 30px; रुंदी: 100px; पार्श्वभूमी-रंग: फिकट हिरवा; )

प्रतिसाद (AJAX):

त्यानंतर, data.txt फाइल उघडा आणि त्यात “हॅलो, वर्ल्ड!” असा मजकूर टाका. चला फाईल सेव्ह आणि बंद करूया.

शेवटी, script.js फाईल तयार करण्याकडे वळू. या फाईलची सामग्री सर्व मूलभूत क्रिया करेल, उदा. सर्व्हरला ajax विनंती पाठवा, सर्व्हरकडून प्रतिसाद प्राप्त करा आणि पृष्ठ सामग्री अद्यतनित करा (स्पॅन घटकामध्ये प्रतिसाद ठेवा).

ही फाईल स्टेप बाय स्टेप तयार करूया:

JavaScript AJAX

फिकट हिरव्या ब्लॉकवर क्लिक करा आणि सर्व्हरकडून प्रतिसाद प्राप्त करा “उदाहरण, जग!”

प्रतिसाद (AJAX):

// id="myDiv" var myDiv = document.getElementById("myDiv") असलेले घटक मिळवा; // या घटकाच्या myDiv.addEventListener("क्लिक", फंक्शन() च्या क्लिक इव्हेंटची सदस्यता घ्या ( // एक XMLHttpRequest ऑब्जेक्ट var विनंती तयार करा = नवीन XMLHttpRequest(); // विनंती कॉन्फिगर करा: GET - पद्धत, data.txt - URL ज्याद्वारे विनंती पाठविली जाईल, असत्य - सिंक्रोनस विनंती विनंती. उघडा ("GET","data.txt",false // send method request.send(); जर प्रतिसादाची स्थिती 200 असेल (ओके); तर जर (request.status==200) (// id="answer" document.getElementById("answer").innerHTML = विनंती असलेल्या घटकामध्ये सर्व्हर प्रतिसाद प्रदर्शित करा .responseText; ) ))

हॅलो वर्ल्ड!

उदाहरण २: PHP वापरून सर्व्हरवर सिंक्रोनस AJAX विनंतीवर प्रक्रिया करणे

एक उदाहरण जे पॅरामीटर असलेल्या सर्व्हरला विनंती पाठवण्यासाठी आणि पृष्ठावर प्रतिसाद प्रदर्शित करण्यासाठी AJAX तंत्रज्ञानाचा वापर करेल.

या उदाहरणात, पृष्ठामध्ये 3 बटणे असतील. पहिल्या बटणावर मजकूर 1, दुसऱ्या बटणावर मजकूर 2 आणि तिसऱ्या बटणावर मजकूर 3 असेल. कोणत्याही बटणावर क्लिक केल्याने सर्व्हरला समकालिक विनंती केली जाईल. आम्ही विनंती ट्रान्समिशन पद्धत म्हणून GET चा वापर करू. आणि ज्या पत्त्यावर आम्ही विनंती आणि ajax.php पॅरामीटर्स पाठवू. आम्हाला HTTP GET व्हेरिएबल ($_GET) वापरून क्लायंटने सर्व्हरवर पाठवलेला डेटा प्राप्त होईल. यानंतर, आम्ही सर्व्हरवर प्राप्त डेटावर प्रक्रिया करू आणि क्लायंटला प्रतिसाद (स्ट्रिंग) परत करू.

JavaScript AJAX स्पॅन (फॉन्ट-वजन: ठळक; रंग: लाल; )

एका बटणावर क्लिक करा आणि AJAX तंत्रज्ञान वापरून सर्व्हरकडून प्रतिसाद प्राप्त करा.

1 2 3

प्रतिसाद (AJAX):

// पृष्ठावरील सर्व बटण घटक मिळवा var buttons = document.getElementsByTagName("button"); // (var i=0; i. साठी सर्व घटक बटणाच्या क्लिक इव्हेंटची सदस्यता घ्या