मेरे पास मेरे वेब ऐप की जड़ में एक टेक्स्ट फ़ाइल है http: //localhost/foo.txt और मैं इसे जावास्क्रिप्ट में एक चर में लोड करना चाहूंगा .. ग्रूवी में मैं यह करूंगा:
def fileContents = 'http://localhost/foo.txt'.toURL().text;
println fileContents;
मैं जावास्क्रिप्ट में एक समान परिणाम कैसे प्राप्त कर सकता हूं?
जवाबों:
XMLHttpRequest, यानी AJAX, बिना XML के।
आपके द्वारा ऐसा किया जाने वाला सटीक तरीका इस बात पर निर्भर करता है कि आप किस जावास्क्रिप्ट फ्रेमवर्क का उपयोग कर रहे हैं, लेकिन अगर हम इंटरऑपरेबिलिटी के मुद्दों की उपेक्षा करते हैं, तो आपका कोड कुछ इस तरह दिखाई देगा:
var ग्राहक = नया XMLHttpRequest ();
client.open ('GET', '/foo.txt');
client.onreadystatechange = function () {
चेतावनी (client.responseText);
}
client.send ();
आम तौर पर, हालांकि, XMLHttpRequest सभी प्लेटफार्मों पर उपलब्ध नहीं है, इसलिए कुछ धोखाधड़ी की जाती है। एक बार फिर, आपका सबसे अच्छा शर्त यह है कि AJAX फ्रेमवर्क का उपयोग करें जैसे jQuery।
एक अतिरिक्त विचार: यह केवल तब तक काम करेगा जब तक foo.txt एक ही डोमेन पर है। यदि यह एक अलग डोमेन पर है, तो समान-मूल सुरक्षा नीतियाँ आपको परिणाम पढ़ने से रोकेंगी।
if (client.readyState === 4){ }
client.onloadendऔर बस पूरा डेटा प्राप्त कर सकते हैं
client.readyStateसंपत्ति के मूल्य के लिए जाँच को शामिल करने के लिए उत्तर को फिर से तैयार किया जाना चाहिए । मैं इसे कम कर रहा हूं जब तक कि यह नहीं है, लोगों को जवाब पढ़ने के लिए टिप्पणियों को पढ़ने के लिए नहीं जा रहे हैं केवल आंशिक रूप से सही है।
यहां बताया गया है कि मैंने इसे कैसे किया:
jQuery.get('http://localhost/foo.txt', function(data) {
alert(data);
});
file://अर्थात्: file:///example.com/foo.html। फ़ायरफ़ॉक्स एक सिंटैक्स त्रुटि और क्रोम ब्लॉकों की शिकायत करता है क्योंकि यह इसे क्रॉस-ओरिजिन अनुरोध के रूप में मानता है।
dataTypeपैरामीटर निर्दिष्ट करते हैं तो @pufferfish सादे डेटा के साथ काम करेगी , api.jquery.com/jQuery.get/
http://...भाग को छोड़ देते हैं , क्योंकि यह एक ही डोमेन पर रहता है, तो यह काम करेगा, उदा jQuery.get("foo.txt", ...)।
fetch('http://localhost/foo.txt')
.then(response => response.text())
.then((data) => {
console.log(data)
})
response.okआपके कोड में कहीं (या समतुल्य) रखना संभव होगा ? मैं बहुत अनुभवी नहीं हूं fetch, इसलिए मुझे इसे स्थापित करने की सही जगह का पता नहीं है।
यदि आप केवल पाठ फ़ाइल से एक निरंतर स्ट्रिंग चाहते हैं, तो आप इसे जावास्क्रिप्ट के रूप में शामिल कर सकते हैं:
// This becomes the content of your foo.txt file
let text = `
My test text goes here!
`;<script src="foo.txt"></script>
<script>
console.log(text);
</script>फ़ाइल से लोड की गई स्ट्रिंग लोड होने के बाद जावास्क्रिप्ट के लिए सुलभ हो जाती है। आपके टेक्स्ट ब्लॉक में "और" वर्ण दोनों के लिए अनुमति देता है, (बैकटिक) वर्ण एक टेम्पलेट शाब्दिक शुरू होता है और समाप्त होता है ।
जब आप किसी फ़ाइल को स्थानीय रूप से लोड करने का प्रयास कर रहे हों, तो यह दृष्टिकोण अच्छी तरह से काम करता है, क्योंकि Chrome इस file://योजना के साथ URL पर AJAX की अनुमति नहीं देगा ।
एक बात का ध्यान रखें कि जावास्क्रिप्ट क्लाइंट पर चलता है, न कि सर्वर पर। आप जावास्क्रिप्ट में सर्वर से वास्तव में "फ़ाइल लोड नहीं" कर सकते हैं। क्या होता है कि जावास्क्रिप्ट सर्वर के लिए एक अनुरोध भेजता है, और सर्वर अनुरोधित फ़ाइल की सामग्री को वापस भेजता है। जावास्क्रिप्ट को सामग्री कैसे प्राप्त होती है? यही कॉलबैक फ़ंक्शन के लिए है। एडवर्ड के मामले में, वह है
client.onreadystatechange = function() {और दानब के मामले में, यह है
function(data) {जब भी डेटा आने के लिए होता है तो यह फ़ंक्शन कहलाता है। JQuery संस्करण अव्यवस्थित रूप से अजाक्स का उपयोग करता है, यह सिर्फ पुस्तकालय में उस कोड को इनकैप्सुलेट करके कोडिंग को आसान बनाता है।
const response = await fetch('http://localhost/foo.txt');
const data = await response.text();
console.log(data);
ध्यान दें कि awaitकेवल एक asyncफ़ंक्शन में उपयोग किया जा सकता है । एक लंबा उदाहरण हो सकता है
async function loadFileAndPrintToConsole(url) {
try {
const response = await fetch(url);
const data = await response.text();
console.log(data);
} catch (err) {
console.error(err);
}
}
loadFileAndPrintToConsole('https://threejsfundamentals.org/LICENSE');यह लगभग सभी ब्राउज़रों में काम करना चाहिए:
var xhr=new XMLHttpRequest();
xhr.open("GET","https://12Me21.github.io/test.txt");
xhr.onload=function(){
console.log(xhr.responseText);
}
xhr.send();इसके अतिरिक्त, नया FetchAPI है:
fetch("https://12Me21.github.io/test.txt")
.then( response => response.text() )
.then( text => console.log(text) )JQuery के साथ काम करते समय jQuery.get, उपयोग करने के बजाय , जैसे
jQuery.get("foo.txt", undefined, function(data) {
alert(data);
}, "html").done(function() {
alert("second success");
}).fail(function(jqXHR, textStatus) {
alert(textStatus);
}).always(function() {
alert("finished");
});आप उपयोग कर सकते हैं .loadजो आपको बहुत अधिक संघनित रूप प्रदान करता है:
$("#myelement").load("foo.txt");.loadआपको आंशिक पृष्ठ लोड करने का विकल्प भी देता है जो काम में आ सकता है, api.jquery.com/load/ देखें ।
यदि आपका इनपुट XML के रूप में संरचित था, तो आप importXMLफ़ंक्शन का उपयोग कर सकते हैं । (अधिक जानकारी यहाँ quirksmode पर )।
यदि यह XML नहीं है, और सादे पाठ को आयात करने के लिए एक समान कार्य नहीं है, तो आप इसे एक छिपे हुए iframe में खोल सकते हैं और फिर वहां से सामग्री पढ़ सकते हैं।