मुझे जावास्क्रिप्ट में HTTP GET अनुरोध करने की आवश्यकता है । ऐसा करने का सबसे अच्छा तरीका क्या है?
मुझे मैक ओएस एक्स डैशकोड विजेट में ऐसा करने की आवश्यकता है।
जवाबों:
ब्राउज़र्स (और डैशकोड) XMLHttpRequest ऑब्जेक्ट प्रदान करते हैं जिसका उपयोग जावास्क्रिप्ट से HTTP अनुरोध करने के लिए किया जा सकता है:
function httpGet(theUrl)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}हालाँकि, समकालिक अनुरोधों को हतोत्साहित किया जाता है और इसकी तर्ज पर एक चेतावनी उत्पन्न की जाएगी:
नोट: जेको 30.0 (फ़ायरफ़ॉक्स 30.0 / थंडरबर्ड 30.0 / सीमॉन्की 2.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);
}$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);ऊपर बहुत सारी सलाह, लेकिन बहुत पुन: प्रयोज्य नहीं है, और अक्सर डोम बकवास और अन्य फुल से भरा होता है जो आसान कोड को छुपाता है।
यहाँ एक जावास्क्रिप्ट क्लास बनाया गया है जो पुन: प्रयोज्य और उपयोग में आसान है। वर्तमान में इसमें केवल GET पद्धति है, लेकिन यह हमारे लिए काम करती है। POST जोड़ने से किसी के कौशल पर कर नहीं लगना चाहिए।
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");
});नवीनतम रिलीज़ में ब्राउज़र समर्थन अब (Chrome, फ़ायरफ़ॉक्स, एज (v14), Safari (v10.1), ओपेरा, Safari iOS (v10.3), Android ब्राउज़र और Android के लिए Chrome में अच्छा है, हालाँकि IE आधिकारिक समर्थन नहीं मिलने की संभावना है। GitHub में एक पॉलीफ़िल उपलब्ध है जो पुराने ब्राउज़रों को अभी भी बड़े पैमाने पर उपयोग करने की सलाह देता है (मार्च 2017 से सफारी के पूर्व संस्करण और उसी अवधि के मोबाइल ब्राउज़र)।
मुझे लगता है कि यह jQuery या XMLHttpRequest से अधिक सुविधाजनक है या नहीं यह परियोजना की प्रकृति पर निर्भर करता है।
यहाँ कल्पना के लिए एक लिंक है https://fetch.spec.whatwg.org/
संपादित करें :
ES7 async / प्रतीक्षा का उपयोग करते हुए, यह बस ( इस Gist पर आधारित ) हो जाता है :
async function fetchAsync (url) {
let response = await fetch(url);
let data = await response.json();
return data;
}fetch(url, { credentials:"include" })
window.fetchXML पार्सर के साथ नहीं आता है, लेकिन यदि आप इसे टेक्स्ट के रूप में हैंडल करते हैं (तो ऊपर दिए उदाहरण में json नहीं)। एक उदाहरण के लिए stackoverflow.com/a/37702056/66349 देखें
बिना कॉलबैक के एक संस्करण
var i = document.createElement("img");
i.src = "/your/GET/url?params=here";setIntervalकॉल में लपेट दिया ।
यहाँ यह जावास्क्रिप्ट के साथ सीधे करने के लिए कोड है। लेकिन, जैसा कि पहले बताया गया है, आप जावास्क्रिप्ट लाइब्रेरी से बहुत बेहतर होंगे। मेरा पसंदीदा jQuery है।
नीचे दिए गए मामले में, एक ASPX पृष्ठ (जो एक गरीब आदमी की REST सेवा के रूप में सेवा प्रदान करता है) को जावास्क्रिप्ट JSON ऑब्जेक्ट को वापस करने के लिए कहा जा रहा है।
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 तेजी से लोड करने के लिए URL को कैश करेगा, लेकिन यदि आप कहते हैं, नई जानकारी प्राप्त करने की कोशिश कर रहे अंतराल पर एक सर्वर को मतदान करते हैं, तो IE उस URL को कैश कर देगा और आपके द्वारा हमेशा किए गए उसी डेटा सेट को वापस कर देगा।
आप अपने GET अनुरोध को पूरा करने के बावजूद - वेनिला जावास्क्रिप्ट, प्रोटोटाइप, jQuery, आदि - सुनिश्चित करें कि आपने कैशिंग से निपटने के लिए एक तंत्र रखा है। इससे निपटने के लिए, आप जिस URL को हिट करने जा रहे हैं, उसके अंत में एक अद्वितीय टोकन जोड़ें। इसके द्वारा किया जा सकता है:
var sURL = '/your/url.html?' + (new Date()).getTime();यह URL के अंत में एक अद्वितीय टाइमस्टैम्प को जोड़ देगा और किसी भी कैशिंग को होने से रोकेगा।
प्रोटोटाइप इसे मृत सरल बनाता है
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();मैं मैक ओएस डैशकोड विजेट से परिचित नहीं हूं, लेकिन अगर वे आपको जावास्क्रिप्ट लाइब्रेरी का उपयोग करने और XMLHttpRequests का समर्थन करने देते हैं , तो मैं jQuery का उपयोग करूंगा और ऐसा कुछ करूंगा :
var page_content;
$.get( "somepage.php", function(data){
page_content = data;
});अपने विजेट के Info.plist फ़ाइल में, अपनी AllowNetworkAccessकुंजी को सही पर सेट करना न भूलें ।
AJAX का उपयोग करने का सबसे अच्छा तरीका है (आप इस पृष्ठ Tizag पर एक सरल ट्यूटोरियल पा सकते हैं )। इसका कारण यह है कि आपके द्वारा उपयोग की जाने वाली किसी भी अन्य तकनीक के लिए अधिक कोड की आवश्यकता होती है, यह बिना rework के क्रॉस ब्राउज़र पर काम करने की गारंटी नहीं है और आपको अपने डेटा को पार्स करने वाले url पास करने वाले फ़्रेमों के अंदर छिपे हुए पृष्ठ खोलकर और उन्हें बंद करके अधिक क्लाइंट मेमोरी का उपयोग करने की आवश्यकता होती है। AJAX इस स्थिति में जाने का मार्ग है। मेरी दो साल की जावास्क्रिप्ट भारी विकास बोल रही है।
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 GET अनुरोध प्राप्त कर सकते हैं:
यह दृष्टिकोण xml प्रारूप पर आधारित है। आपको अनुरोध के लिए URL पास करना होगा।
xmlhttp.open("GET","URL",true);
xmlhttp.send();यह एक jQuery पर आधारित है। आपको वह URL और function_name बताना होगा जिसे आप कॉल करना चाहते हैं।
$("btn").click(function() {
$.ajax({url: "demo_test.txt", success: function_name(result) {
$("#innerdiv").html(result);
}});
}); यह करने के लिए जावास्क्रिप्ट एपीआई का उपयोग करते हुए Fetch API अनुशंसित तरीका है। XMLHttpRequest (XHR), IFrame ऑब्जेक्ट या डायनामिक टैग पुराने (और क्लंकियर) दृष्टिकोण हैं।
<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/')पोस्ट अनुरोध के लिए भी एक ही बात की जा सकती है।
इस लिंक पर एक नज़र डालते हैं कि एक फॉर्म सबमिट की तरह जावास्क्रिप्ट पोस्ट अनुरोध
सरल async अनुरोध:
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();
}आप किसी लाइब्रेरी जैसे कि प्रोटोटाइप या jQuery का उपयोग करना सबसे अच्छा होगा ।
// 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();
}देखें: अधिक जानकारी के लिए: html5rocks ट्यूटोरियल
<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>यहाँ एक वस्तु के रूप में आपकी फ़ाइलों को लोड करने के लिए xml फ़ाइलों का विकल्प है और एक बहुत तेज़ तरीके से एक वस्तु के रूप में गुणों का उपयोग करना है।
XML एक पेड़ के रूप में काम करता है ठीक है? लिखने के बजाय
<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