जेएस ट्यूटोरियल

जेएस होम जे एस परिचय जे एस कहाँ करने के लिए जेएस आउटपुट जेएस स्टेटमेंट्स जेएस सिंटेक्स जे एस टिप्पणियाँ जेएस चर जे एस लेट जेएस कॉन्स्ट जेएस ऑपरेटर्स जे एस अंकगणित जेएस असाइनमेंट जेएस डेटा प्रकार जे एस कार्य जेएस ऑब्जेक्ट्स जेएस इवेंट्स जे एस स्ट्रिंग्स जे एस स्ट्रिंग तरीके जे एस स्ट्रिंग खोज जे एस स्ट्रिंग टेम्पलेट्स जेएस नंबर जेएस संख्या के तरीके जे एस सरणी जेएस सरणी के तरीके जेएस ऐरे सॉर्ट जेएस सरणी पुनरावृत्ति जेएस ऐरे कॉन्स्ट जे एस तिथियाँ जेएस तिथि प्रारूप जेएस तिथि प्राप्त करने के तरीके JS दिनांक सेट विधियाँ जे एस मठ जे एस रैंडम जे एस बूलियन्स जेएस तुलना जे एस शर्तें जे एस स्विच जेएस लूप फॉर In . के लिए JS लूप ओएफ के लिए जेएस लूप जेएस लूप जबकि जेएस ब्रेक जेएस Iterables जेएस सेट जेएस मैप्स जेएस टाइपोफ जे एस प्रकार रूपांतरण जेएस बिटवाइज जेएस रेगएक्सपी जे एस त्रुटियाँ जेएस स्कोप जे एस उत्थापन जेएस सख्त मोड जेएस यह कीवर्ड जेएस एरो फंक्शन जेएस क्लासेस जेएस JSON जेएस डिबगिंग जेएस स्टाइल गाइड जेएस सर्वोत्तम अभ्यास जेएस गलतियाँ जेएस प्रदर्शन जेएस आरक्षित शब्द

जेएस संस्करण

जेएस संस्करण जेएस 2009 (ES5) जेएस 2015 (ईएस6) जेएस 2016 जेएस 2017 जेएस 2018 जेएस आईई / एज जेएस इतिहास

जेएस ऑब्जेक्ट्स

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

जे एस कार्य

फ़ंक्शन परिभाषाएँ फंक्शन पैरामीटर्स समारोह आमंत्रण फंक्शन कॉल समारोह लागू करें फंक्शन क्लोजर

जेएस क्लासेस

कक्षा परिचय वर्ग वंशानुक्रम क्लास स्टेटिक

जे एस एसिंक

जेएस कॉलबैक जे एस अतुल्यकालिक जे एस वादा जे एस एसिंक/प्रतीक्षा

जेएस एचटीएमएल डोम

डोम परिचय डोम तरीके डोम दस्तावेज़ डोम तत्व डोम एचटीएमएल डोम फॉर्म डोम सीएसएस डोम एनिमेशन डोम घटनाक्रम डोम इवेंट श्रोता डोम नेविगेशन डोम नोड्स डोम संग्रह डोम नोड सूचियाँ

जेएस ब्राउज़र बीओएम

जेएस विंडो जेएस स्क्रीन जेएस स्थान जेएस इतिहास जेएस नेविगेटर जेएस पॉपअप अलर्ट जेएस टाइमिंग जे एस कुकीज़

जेएस वेब एपीआई

वेब एपीआई परिचय वेब फॉर्म एपीआई वेब इतिहास एपीआई वेब संग्रहण API वेब वर्कर एपीआई वेब फ़ेच एपीआई वेब जियोलोकेशन एपीआई

जे एस अजाक्स

AJAX परिचय अजाक्स एक्सएमएलएचटीपी अजाक्स अनुरोध अजाक्स प्रतिक्रिया अजाक्स एक्सएमएल फ़ाइल अजाक्स पीएचपी अजाक्स एएसपी AJAX डेटाबेस अजाक्स अनुप्रयोग अजाक्स उदाहरण

जेएस JSON

JSON परिचय JSON सिंटैक्स जेएसओएन बनाम एक्सएमएल JSON डेटा प्रकार JSON पार्स JSON स्ट्रिंगिफ़ाई JSON ऑब्जेक्ट्स JSON सरणियाँ JSON सर्वर जेएसओएन पीएचपी जेएसओएन एचटीएमएल जेएसओएन जेएसओएनपी

जेएस बनाम jQuery

jQuery चयनकर्ता jQuery एचटीएमएल jQuery सीएसएस jQuery डोम

जेएस ग्राफिक्स

जेएस ग्राफिक्स जेएस कैनवास जे एस प्लॉटली जेएस चार्ट.जेएस जेएस गूगल चार्ट जेएस डी3.जेएस

जेएस उदाहरण

जेएस उदाहरण जेएस एचटीएमएल डोम जेएस एचटीएमएल इनपुट जेएस एचटीएमएल ऑब्जेक्ट्स जेएस एचटीएमएल इवेंट्स जेएस ब्राउज़र जे एस संपादक जे एस व्यायाम जे एस प्रश्नोत्तरी जेएस प्रमाणपत्र

जे एस संदर्भ

जावास्क्रिप्ट ऑब्जेक्ट्स एचटीएमएल डोम ऑब्जेक्ट्स


JSONP


JSONP क्रॉस-डोमेन मुद्दों की चिंता किए बिना JSON डेटा भेजने की एक विधि है।

JSONP XMLHttpRequestवस्तु का उपयोग नहीं करता है।

JSONP <script>इसके बजाय टैग का उपयोग करता है।


JSONP परिचय

JSONP का मतलब पैडिंग के साथ JSON है।

क्रॉस-डोमेन नीति के कारण किसी अन्य डोमेन से फ़ाइल का अनुरोध करने से समस्याएँ हो सकती हैं।

किसी अन्य डोमेन से बाहरी स्क्रिप्ट का अनुरोध करने से यह समस्या नहीं होती है।

XMLHttpRequestJSONP इस लाभ का उपयोग करता है, और ऑब्जेक्ट के बजाय स्क्रिप्ट टैग का उपयोग करके फ़ाइलों का अनुरोध करता है।

<script src="demo_jsonp.php">

सर्वर फ़ाइल

सर्वर पर फ़ाइल फ़ंक्शन कॉल के अंदर परिणाम लपेटती है:

उदाहरण

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

परिणाम एक पैरामीटर के रूप में JSON डेटा के साथ "myFunc" नामक फ़ंक्शन पर कॉल लौटाता है।

सुनिश्चित करें कि फ़ंक्शन क्लाइंट पर मौजूद है।

जावास्क्रिप्ट फ़ंक्शन

"myFunc" नामक फ़ंक्शन क्लाइंट पर स्थित है, और JSON डेटा को संभालने के लिए तैयार है:

उदाहरण

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}


एक डायनामिक स्क्रिप्ट टैग बनाना

ऊपर दिया गया उदाहरण "myFunc" फ़ंक्शन निष्पादित करेगा जब पृष्ठ लोड हो रहा है, इस आधार पर कि आपने स्क्रिप्ट टैग कहां रखा है, जो बहुत संतोषजनक नहीं है।

स्क्रिप्ट टैग केवल तभी बनाया जाना चाहिए जब आवश्यक हो:

उदाहरण

बटन क्लिक होने पर <script> टैग बनाएं और डालें:

function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
}

गतिशील JSONP परिणाम

उपरोक्त उदाहरण अभी भी बहुत स्थिर हैं।

जेएसओएन को PHP फ़ाइल में भेजकर उदाहरण को गतिशील बनाएं, और PHP फ़ाइल को प्राप्त जानकारी के आधार पर एक JSON ऑब्जेक्ट वापस करने दें।

पीएचपी फ़ाइल

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";
?>

पीएचपी फ़ाइल समझाया:

  • PHP फ़ंक्शन json_decode() का उपयोग करके अनुरोध को किसी ऑब्जेक्ट में कनवर्ट करें
  • डेटाबेस तक पहुंचें, और अनुरोधित डेटा के साथ एक सरणी भरें।
  • किसी ऑब्जेक्ट में सरणी जोड़ें।
  • json_encode() फ़ंक्शन का उपयोग करके सरणी को JSON में कनवर्ट करें ।
  • वापसी वस्तु के चारों ओर "myFunc ()" लपेटें।

जावास्क्रिप्ट उदाहरण

php फ़ाइल से "myFunc" फ़ंक्शन को कॉल किया जाएगा:

const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) {
    txt += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}

कॉलबैक फ़ंक्शन

जब सर्वर फ़ाइल पर आपका कोई नियंत्रण नहीं होता है, तो आप सर्वर फ़ाइल को सही फ़ंक्शन को कॉल करने के लिए कैसे प्राप्त करते हैं?

कभी-कभी सर्वर फ़ाइल एक पैरामीटर के रूप में कॉलबैक फ़ंक्शन प्रदान करती है:

उदाहरण

php फ़ाइल उस फ़ंक्शन को कॉल करेगी जिसे आप कॉलबैक पैरामीटर के रूप में पास करते हैं:

let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);