আমার ওয়েব অ্যাপ্লিকেশন HTTP: //localhost/foo.txt এর মূলে আমার কাছে একটি পাঠ্য ফাইল রয়েছে এবং আমি এটি জাভাস্ক্রিপ্টের একটি ভেরিয়েবলের মধ্যে লোড করতে চাই .. গ্রোভিতে আমি এটি করব:
def fileContents = 'http://localhost/foo.txt'.toURL().text;
println fileContents;
আমি কীভাবে জাভাস্ক্রিপ্টে অনুরূপ ফলাফল পেতে পারি?
উত্তর:
এক্সএমএলএইচটিপিআরকোয়েস্ট, অর্থাত্ এজেএক্স, এক্সএমএল ছাড়াই।
আপনি যা করছেন ঠিক সেই পদ্ধতিটি আপনি কী জাভাস্ক্রিপ্ট কাঠামোটি ব্যবহার করছেন তার উপর নির্ভরশীল তবে আমরা যদি আন্তঃব্যবহারযোগ্যতা বিষয়গুলিকে উপেক্ষা করি তবে আপনার কোডটি এমন কিছু দেখবে:
var ক্লায়েন্ট = নতুন এক্সএমএলএইচটিপিআরকোয়েস্ট ();
client.open ('GET', '/foo.txt');
ক্লায়েন্ট.অনডিস্টেটচেঞ্জ = ফাংশন () {
সতর্কতা (client.responseText);
}
client.send ();
সাধারণভাবে বলতে গেলে, যদিও সমস্ত প্ল্যাটফর্মগুলিতে এক্সএমএলএইচটিপিআরকোয়েস্ট পাওয়া যায় না, তাই কিছু জালিয়াতি সম্পন্ন হয়। আবারও, আপনার সেরা বেট হ'ল 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প্যারামিটারটি নির্দিষ্ট করে দিলে এটি সরল তথ্য দিয়ে কাজ করবে , 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>ফাইলটি থেকে লোড স্ট্রিংটি লোড হওয়ার পরে জাভাস্ক্রিপ্টে অ্যাক্সেসযোগ্য হয়ে ওঠে। `(ব্যাকটিক) অক্ষরটি আপনার পাঠ্য ব্লকটিতে" এবং "অক্ষর উভয়ের জন্য মঞ্জুরি দিয়ে একটি টেম্পলেটটি আক্ষরিক শুরু হয় এবং শেষ হয় ।
আপনি যখন স্থানীয়ভাবে কোনও ফাইল লোড করার চেষ্টা করছেন তখন এই পদ্ধতিটি ভালভাবে কাজ করে, কারণ ক্রিমটি file://স্কিম সহ ইউআরএলগুলিতে এজেএক্সকে অনুমতি দেবে না ।
একটি বিষয় মনে রাখবেন যে জাভাস্ক্রিপ্ট ক্লায়েন্টের উপর চালায়, সার্ভারে নয়। আপনি জাভাস্ক্রিপ্টে সার্ভার থেকে সত্যই "একটি ফাইল লোড" করতে পারবেন না। যা ঘটে তা হ'ল জাভাস্ক্রিপ্ট সার্ভারে একটি অনুরোধ প্রেরণ করে এবং সার্ভারটি অনুরোধ করা ফাইলের সামগ্রীগুলি ফেরত পাঠায়। জাভাস্ক্রিপ্ট কীভাবে বিষয়বস্তু গ্রহণ করবে? কলব্যাক ফাংশনটি এটাই। এডওয়ার্ডের ক্ষেত্রে, এটি
client.onreadystatechange = function() {এবং ড্যানব এর ক্ষেত্রে, এটি হয়
function(data) {এই ফাংশনটি ডাকা হয় যখনই ডেটা উপস্থিত হয়। JQuery সংস্করণটি স্পষ্টভাবে Ajax ব্যবহার করে, এটি কেবল লাইব্রেরিতে কোডটি আবদ্ধ করে কোডিংটিকে সহজ করে তোলে।
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();অতিরিক্তভাবে, নতুন Fetchএপিআই রয়েছে:
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/ ।
যদি আপনার ইনপুটটি এক্সএমএল হিসাবে কাঠামোযুক্ত হয় তবে আপনি importXMLফাংশনটি ব্যবহার করতে পারেন । (আরও তথ্য এখানে quirksmode এ )।
যদি এটি এক্সএমএল না হয় এবং প্লেইন পাঠ্য আমদানির জন্য সমতুল্য কার্যকারিতা না থাকে তবে আপনি এটি কোনও লুকানো আইফ্রেমে খুলতে পারেন এবং সেখান থেকে সামগ্রীগুলি পড়তে পারেন।