আমার জাভাস্ক্রিপ্টে একটি HTTP জিইটি অনুরোধ করা দরকার । এটি করার সর্বোত্তম উপায় কী?
আমাকে একটি ম্যাক ওএস এক্স ড্যাশকোড উইজেটে এটি করা দরকার।
উত্তর:
ব্রাউজারগুলি (এবং ড্যাশকোড) একটি এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্ট সরবরাহ করে যা জাভাস্ক্রিপ্ট থেকে এইচটিটিপি অনুরোধ করতে ব্যবহৃত হতে পারে:
function httpGet(theUrl)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}যাইহোক, সিঙ্ক্রোনাস অনুরোধগুলি নিরুৎসাহিত করা হয়েছে এবং এর লাইনগুলিতে একটি সতর্কতা উত্পন্ন করবে:
দ্রষ্টব্য: গেকো ৩০.০ (ফায়ারফক্স ৩০.০ / থান্ডারবার্ড ৩০.০ / সিমনকি ২.২27) দিয়ে শুরু করে, ব্যবহারকারীর অভিজ্ঞতার নেতিবাচক প্রভাবের কারণে মূল থ্রেডের সিঙ্ক্রোনাস অনুরোধগুলি প্রত্যাখ্যান করা হয়েছে ।
আপনার একটি অ্যাসিঙ্ক্রোনাস অনুরোধ করা উচিত এবং ইভেন্ট হ্যান্ডলারের ভিতরে প্রতিক্রিয়াটি পরিচালনা করা উচিত।
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}JQuery এ :
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);উপরে প্রচুর দুর্দান্ত পরামর্শ, তবে খুব বেশি পুনরায় ব্যবহারযোগ্য নয় এবং খুব সহজেই ডিওএম ননসেন্স এবং অন্যান্য ফ্লাফ দিয়ে ভরা হয় যা সহজ কোডটি আড়াল করে।
এখানে একটি জাভাস্ক্রিপ্ট ক্লাস তৈরি করা হয়েছে যা পুনরায় ব্যবহারযোগ্য এবং সহজেই ব্যবহারযোগ্য। বর্তমানে এটির জন্য কেবল একটি জিইটি পদ্ধতি রয়েছে তবে এটি আমাদের পক্ষে কার্যকর। একটি পোস্ট যোগ করা কারও দক্ষতা ট্যাক্স করা উচিত নয়।
var HttpClient = function() {
this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open( "GET", aUrl, true );
anHttpRequest.send( null );
}
}এটি ব্যবহার করা যেমন সহজ:
var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
// do something with response
});ReferenceError: XMLHttpRequest is not defined
নতুন window.fetchএপিআই হ'ল একটি ক্লিনার প্রতিস্থাপন XMLHttpRequestযা ইএস 6 প্রতিশ্রুতি ব্যবহার করে। এখানে একটি দুর্দান্ত ব্যাখ্যা রয়েছে , তবে এটি ফোটে (নিবন্ধ থেকে):
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function() {
console.log("Booo");
});ব্রাউজার সমর্থন এখন সর্বশেষতম রিলিজ (ক্রোম, ফায়ারফক্স, এজ (v14), সাফারি (v10.1), অপেরা, সাফারি আইওএস (v10.3), অ্যান্ড্রয়েডের জন্য ব্রাউজার এবং ক্রোমে কাজ করে) ভাল, তবে আইই সম্ভবত সরকারী সমর্থন পাবেন না। গিটহাবের একটি পলিফিল উপলব্ধ রয়েছে যা পুরানো ব্রাউজারগুলিকে এখনও প্রচুর পরিমাণে ব্যবহারের জন্য সুপারিশ করা হয় (সাফারি সংস্করণের সংস্করণ এবং একই সময়ের মোবাইল ব্রাউজারগুলি 2017)।
আমি অনুমান করি যে এটি jQuery বা XMLHttpRequest এর চেয়ে বেশি সুবিধাজনক কিনা বা প্রকল্পের প্রকৃতির উপর নির্ভর করে না।
এখানে অনুমানটির একটি লিঙ্ক https://fetch.spec.whatwg.org/
সম্পাদনা করুন :
ব্যবহার ES7 ASYNC / অপেক্ষা করে আছি এই কেবল (তার উপর ভিত্তি করে হয়ে এই সারকথা ):
async function fetchAsync (url) {
let response = await fetch(url);
let data = await response.json();
return data;
}fetch(url, { credentials:"include" })
window.fetchকোনও এক্সএমএল পার্সার নিয়ে আসে না, তবে আপনি যদি প্রতিক্রিয়াটিকে পাঠ্য হিসাবে পরিচালনা করেন তবে আপনি প্রতিক্রিয়াটি পার্স করতে পারেন (উপরের উদাহরণের মতো জসন নয়)। উদাহরণস্বরূপ stackoverflow.com/a/37702056/66349 দেখুন
কলব্যাক ছাড়াই একটি সংস্করণ
var i = document.createElement("img");
i.src = "/your/GET/url?params=here";setIntervalকল এ এটি মোড়ানো ।
এটি সরাসরি জাভাস্ক্রিপ্ট দিয়ে করার কোড। তবে, যেমন পূর্বে উল্লিখিত হয়েছে, আপনি একটি জাভাস্ক্রিপ্ট লাইব্রেরি সহ আরও ভাল হতে চাই। আমার প্রিয় jQuery হয়।
নীচের ক্ষেত্রে, একটি এএসপিএক্স পৃষ্ঠা (যা একজন দরিদ্র ব্যক্তির আরইএসটি পরিষেবা হিসাবে পরিবেশন করছে) একটি জাভাস্ক্রিপ্ট জেএসএন বস্তুটি ফিরিয়ে আনার জন্য কল করা হচ্ছে।
var xmlHttp = null;
function GetCustomerInfo()
{
var CustomerNumber = document.getElementById( "TextBoxCustomerNumber" ).value;
var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = ProcessRequest;
xmlHttp.open( "GET", Url, true );
xmlHttp.send( null );
}
function ProcessRequest()
{
if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 )
{
if ( xmlHttp.responseText == "Not found" )
{
document.getElementById( "TextBoxCustomerName" ).value = "Not found";
document.getElementById( "TextBoxCustomerAddress" ).value = "";
}
else
{
var info = eval ( "(" + xmlHttp.responseText + ")" );
// No parsing necessary with JSON!
document.getElementById( "TextBoxCustomerName" ).value = info.jsonData[ 0 ].cmname;
document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1;
}
}
}একটি অনুলিপি-আধুনিক সংস্করণ ( আনতে ব্যবহার করে) এবং তীর ফাংশন ) :
//Option with catch
fetch( textURL )
.then(async r=> console.log(await r.text()))
.catch(e=>console.error('Boo...' + e));
//No fear...
(async () =>
console.log(
(await (await fetch( jsonURL )).json())
)
)();একটি অনুলিপি-ক্লাসিক সংস্করণ:
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
document.body.className = 'ok';
console.log(this.responseText);
} else if (this.response == null && this.status === 0) {
document.body.className = 'error offline';
console.log("The computer appears to be offline.");
} else {
document.body.className = 'error';
}
}
};
request.open("GET", url, true);
request.send(null);সংক্ষিপ্ত এবং পরিষ্কার:
const http = new XMLHttpRequest()
http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()
http.onload = () => console.log(http.responseText)IE লোডিংটি দ্রুত করার জন্য ইউআরএলগুলি ক্যাশে করবে, তবে আপনি যদি বলুন যে নতুন তথ্য পাওয়ার চেষ্টা করার বিরতিতে কোনও সার্ভারে পোলিং করা হচ্ছে, আইই সেই ইউআরএলকে ক্যাশে করবে এবং সম্ভবত আপনি সর্বদা একই ডেটা সেটটি ফিরে আসবেন।
আপনি আপনার জিইটি অনুরোধটি কীভাবে শেষ করবেন না - ভ্যানিলা জাভাস্ক্রিপ্ট, প্রোটোটাইপ, জকিউয়ারি ইত্যাদি - নিশ্চিত করুন যে আপনি ক্যাচিংয়ের লড়াইয়ের জন্য কোনও ব্যবস্থা রেখেছেন to এটির বিরুদ্ধে লড়াই করার জন্য, আপনি যে URL টি মারতে চলেছেন তার শেষে একটি অনন্য টোকেন যুক্ত করুন। এটি দ্বারা করা যেতে পারে:
var sURL = '/your/url.html?' + (new Date()).getTime();এটি ইউআরএল শেষে একটি অনন্য টাইমস্ট্যাম্প সংযোজন করবে এবং কোনও ক্যাচিং ঘটতে বাধা দেবে।
প্রোটোটাইপ এটিকে মৃতকে সহজ করে তোলে
new Ajax.Request( '/myurl', {
method: 'get',
parameters: { 'param1': 'value1'},
onSuccess: function(response){
alert(response.responseText);
},
onFailure: function(){
alert('ERROR');
}
});পুরানো ব্রাউজারগুলিকে সমর্থন করার একটি সমাধান:
function httpRequest() {
var ajax = null,
response = null,
self = this;
this.method = null;
this.url = null;
this.async = true;
this.data = null;
this.send = function() {
ajax.open(this.method, this.url, this.asnyc);
ajax.send(this.data);
};
if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP.6.0");
}
catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
catch(error) {
self.fail("not supported");
}
}
}
if(ajax == null) {
return false;
}
ajax.onreadystatechange = function() {
if(this.readyState == 4) {
if(this.status == 200) {
self.success(this.responseText);
}
else {
self.fail(this.status + " - " + this.statusText);
}
}
};
}কিছুটা ওভারকিল হতে পারে তবে আপনি অবশ্যই এই কোডটি সহ নিরাপদে চলে যান।
ব্যবহার:
//create request with its porperties
var request = new httpRequest();
request.method = "GET";
request.url = "https://example.com/api?parameter=value";
//create callback for success containing the response
request.success = function(response) {
console.log(response);
};
//and a fail callback containing the error
request.fail = function(error) {
console.log(error);
};
//and finally send it away
request.send();আমি ম্যাক ওএস ড্যাশকোড উইজেটগুলির সাথে পরিচিত নই, তবে তারা যদি আপনাকে জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে এবং এক্সএমএলএইচটিপিআরকোয়েস্টগুলি সমর্থন করতে দেয় তবে আমি jQuery ব্যবহার করব এবং এরকম কিছু করব:
var page_content;
$.get( "somepage.php", function(data){
page_content = data;
});আপনার উইজেটের তথ্য.পলিট ফাইলে, আপনার AllowNetworkAccessকীটি সত্যতে সেট করতে ভুলবেন না ।
সেরা উপায় হ'ল এজেএক্স ব্যবহার করা (আপনি এই পৃষ্ঠা টিজাগে একটি সাধারণ টিউটোরিয়াল খুঁজে পেতে পারেন )। কারণটি হ'ল আপনি যে কোনও প্রযুক্তি ব্যবহার করতে পারেন তার জন্য আরও কোডের প্রয়োজন, এটি পুনরায় কাজ না করে ক্রস ব্রাউজারে কাজ করার গ্যারান্টিযুক্ত নয় এবং আপনার ডেটা পার্সিং করে ফ্রেমগুলিতে লুকিয়ে থাকা পৃষ্ঠাগুলি খোলার মাধ্যমে তাদের আরও ক্লায়েন্ট মেমোরি ব্যবহার করা প্রয়োজন। এজেএক্স এই পরিস্থিতিতে যাওয়ার উপায়। আমার জাভাস্ক্রিপ্ট ভারি বিকাশের দুই বছর।
যারা AngularJs ব্যবহার করেন তাদের ক্ষেত্রে এটি $http.get:
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});আপনি দুটি উপায়ে একটি HTTP অনুরোধ পেতে পারেন:
এক্সএমএল ফর্ম্যাট ভিত্তিক এই পদ্ধতির। অনুরোধের জন্য আপনাকে URL টি পাস করতে হবে।
xmlhttp.open("GET","URL",true);
xmlhttp.send();এই এক jQuery উপর ভিত্তি করে। আপনি কল করতে চান এমন URL এবং ফাংশন_নাম আপনাকে নির্দিষ্ট করতে হবে specify
$("btn").click(function() {
$.ajax({url: "demo_test.txt", success: function_name(result) {
$("#innerdiv").html(result);
}});
}); জাভা স্ক্রিপ্ট প্রতিশ্রুতি ব্যবহার করে এই আনুন এপিআই করার জন্য প্রস্তাবিত পন্থা। এক্সএমএলএইচটিপিআরকোয়েস্ট (এক্সএইচআর), আইফ্রেম অবজেক্ট বা গতিশীল ট্যাগগুলি পুরানো (এবং ক্লানকিয়ার) পদ্ধতির are
<script type=“text/javascript”>
// Create request object
var request = new Request('https://example.com/api/...',
{ method: 'POST',
body: {'name': 'Klaus'},
headers: new Headers({ 'Content-Type': 'application/json' })
});
// Now use it!
fetch(request)
.then(resp => {
// handle response })
.catch(err => {
// handle errors
}); </script>এখানে দুর্দান্ত আনার ডেমো এবং MDN ডক্স রয়েছে
function get(path) {
var form = document.createElement("form");
form.setAttribute("method", "get");
form.setAttribute("action", path);
document.body.appendChild(form);
form.submit();
}
get('/my/url/')পোস্ট অনুরোধের জন্য একই জিনিস করা যেতে পারে।
এই লিঙ্কটি একবার দেখুন একটি ফর্ম জমা মত জাভাস্ক্রিপ্ট পোস্ট অনুরোধ
সাধারণ অ্যাসিঙ্ক অনুরোধ:
function get(url, callback) {
var getRequest = new XMLHttpRequest();
getRequest.open("get", url, true);
getRequest.addEventListener("readystatechange", function() {
if (getRequest.readyState === 4 && getRequest.status === 200) {
callback(getRequest.responseText);
}
});
getRequest.send();
}প্রোটোটাইপ বা জিকুয়ের মতো লাইব্রেরি ব্যবহার করে আপনি সেরা হবেন ।
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'restUrl', true)
request.onload = function () {
// Begin accessing JSON data here
}
// Send request
request.send()আপনি যদি কোনও ড্যাশবোর্ড উইজেটের কোড ব্যবহার করতে চান এবং আপনি তৈরি প্রতিটি উইজেটে জাভাস্ক্রিপ্ট লাইব্রেরি অন্তর্ভুক্ত করতে চান না, তবে আপনি সাফারি স্থানীয়ভাবে সমর্থন করে এমন বস্তু XMLHttpRequest ব্যবহার করতে পারেন।
অ্যান্ড্রু হেজেস হিসাবে রিপোর্ট করা হয়েছে, একটি উইজেটের ডিফল্টরূপে কোনও নেটওয়ার্কে অ্যাক্সেস নেই; আপনার সেই সেটিংটি উইজেটের সাথে সম্পর্কিত তথ্য.পল্লিস্টে পরিবর্তন করতে হবে।
প্রতিশ্রুতি সহ জওনের কাছ থেকে সেরা উত্তরে রিফ্রেশ করা আমার কোড:
let httpRequestAsync = (method, url) => {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status == 200) {
resolve(xhr.responseText);
}
else {
reject(new Error(xhr.responseText));
}
};
xhr.send();
});
}আপনি খাঁটি জেএসের সাহায্যেও এটি করতে পারেন:
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Make the actual CORS request.
function makeCorsRequest() {
// This is a sample server that supports CORS.
var url = 'http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
alert('Response from CORS request to ' + url + ': ' + text);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}আরও তথ্যের জন্য দেখুন: এইচটিএমএল 5 রকস টিউটোরিয়াল
<button type="button" onclick="loadXMLDoc()"> GET CONTENT</button>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
var url = "<Enter URL>";``
xmlhttp.onload = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == "200") {
document.getElementById("demo").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>আপনার ফাইলগুলিকে একটি বস্তু হিসাবে লোড করতে খুব দ্রুত এবং দ্রুত একটি উপায়ে বৈশিষ্ট্য অ্যাক্সেস করার জন্য এক্সএমএল ফাইলগুলির বিকল্প রয়েছে is
এক্সএমএল একটি গাছ ঠিক আছে হিসাবে কাজ করে? পরিবর্তে লেখার
<property> value <property> এই জাতীয় একটি সহজ ফাইল লিখুন:
Property1: value
Property2: value
etc.আপনার ফাইল সংরক্ষণ করুন .. এখন ফাংশন কল করুন ....
var objectfile = {};
function getfilecontent(url){
var cli = new XMLHttpRequest();
cli.onload = function(){
if((this.status == 200 || this.status == 0) && this.responseText != null) {
var r = this.responseText;
var b=(r.indexOf('\n')?'\n':r.indexOf('\r')?'\r':'');
if(b.length){
if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/gi,'');}
r=j.split(b);
r=r.filter(function(val){if( val == '' || val == NaN || val == undefined || val == null ){return false;}return true;});
r = r.map(f => f.trim());
}
if(r.length > 0){
for(var i=0; i<r.length; i++){
var m = r[i].split(':');
if(m.length>1){
var mname = m[0];
var n = m.shift();
var ivalue = m.join(':');
objectfile[mname]=ivalue;
}
}
}
}
}
cli.open("GET", url);
cli.send();
}এখন আপনি দক্ষতার সাথে আপনার মান পেতে পারেন।
getfilecontent('mesite.com/mefile.txt');
window.onload = function(){
if(objectfile !== null){
alert (objectfile.property1.value);
}
}গ্রুপে প্রতিযোগিতা করার জন্য এটি কেবল একটি ছোট্ট উপহার। আপনার মত ধন্যবাদ :)
আপনি যদি স্থানীয়ভাবে আপনার পিসিতে ফাংশনটি পরীক্ষা করতে চান তবে নিম্নলিখিত কমান্ডটি দিয়ে আপনার ব্রাউজারটি পুনরায় চালু করুন (সাফারি বাদে সমস্ত ব্রাউজার দ্বারা সমর্থিত):
yournavigator.exe '' --allow-file-access-from-files