Am nevoie pentru a face un HTTP GET cerere în JavaScript. Ce's cel mai bun mod de a face asta?
Am nevoie pentru a face acest lucru într-un Mac OS X dashcode widget.
Browsere (și Dashcode) oferă un obiect XMLHttpRequest care poate fi folosit pentru a face cereri HTTP de la JavaScript:
function httpGet(theUrl)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}
Cu toate acestea, sincron cereri sunt descurajați și va genera o avertizare de-a lungul liniilor de:
Notă: Începând cu Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / Opera mini 2.27), sincron cereri pe firul principal au fost depreciate din cauza efectelor negative pentru experiența utilizatorului.
Tu ar trebui să facă o cerere asincron și mâner răspunsul în interiorul unui event handler.
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);
}
O mulțime de sfaturi de mare de mai sus, dar nu foarte reutilizabile, și de prea multe ori umplut cu DOM prostii și alte puf care ascunde ușor de cod.
Aici's un Javascript class l-am creat ca's reutilizabile și ușor de utilizat. În prezent, acesta are doar o metoda GET, dar care lucrează pentru noi. Adăugarea unui POST ar trebui't impozitul pe nimeni's a competențelor.
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 );
}
}
Utilizarea este la fel de ușor ca:
var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
// do something with response
});
Noul fereastră.adu
API este un aspirator de înlocuire pentru XMLHttpRequest`, care face uz de ES6 promisiuni. Nu's o frumoasă explicație aici, dar se reduce la (din articol):
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function() {
console.log("Booo");
});
Sprijin Browser-ul este acum bună în cele mai recente versiuni (funcționează în Chrome, Firefox, Marginea (v14), Safari (v10.1), Opera, Safari iOS (v10.3), safari și Chrome pentru Android), cu toate acestea IE probabil nu va primi suport oficial. GitHub are un polyfill disponibil, care este recomandat pentru a sprijini browsere mai vechi, în mare parte încă în uz (esp versiuni ale Safari pre Martie 2017 și browsere mobile din aceeași perioadă).
Cred că dacă acest lucru este mult mai convenabil decât jQuery sau XMLHttpRequest sau nu depinde de natura proiectului.
Aici's un link la spec https://fetch.spec.whatwg.org/
Edit:
Folosind ES7 asincron/așteaptă, acest lucru devine pur și simplu (bazat pe acest Gist):
async function fetchAsync (url) {
let response = await fetch(url);
let data = await response.json();
return data;
}
Aici este codul pentru a face direct cu JavaScript. Dar, așa cum am menționat anterior, ai'd fi mult mai bine cu o bibliotecă JavaScript. Preferata mea este jQuery.
În cazul de mai jos, o pagină ASPX (ca's service ca un om sărac's RESTUL de serviciu) este numit pentru a returna un obiect JSON JavaScript.
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())
)
)();
Un copy-paste versiune clasica:
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);
Scurt și curat:
const http = new XMLHttpRequest()
http.deschis("IA", "https://api.lyrics.ovh/v1/toto/africa") http.send()
http.onload = () => console.log(http.responseText)
IE va cache-ul Url-uri, în scopul de a face incarca mai repede, dar daca're, să zicem, secțiile de un server la intervale de timp încercarea de a obține informații noi, de EXEMPLU, va cache-ul URL-ul și va reveni probabil la același set de date'am avut întotdeauna.
Indiferent de cum faci sa-ti iei cerere - vanilie JavaScript, Prototype, jQuery, etc - asigurați-vă că ați pus un mecanism în loc de a combate cache. În scopul de a combate asta, atașați un indicativ unic la sfârșitul URL-ul're de gând să fie lovit. Acest lucru poate fi realizat prin:
var sURL = '/your/url.html?' + (new Date()).getTime();
Acest lucru va adăuga un unic timestamp la sfârșitul URL-ul și va preveni orice caching de la întâmplă.
Am'm nu sunt familiarizați cu Mac OS Dashcode Widget-uri, dar dacă acestea vă permit să utilizați biblioteci JavaScript și sprijin XMLHttpRequests, am'd folosi jQuery și de a face ceva de genul asta:
var page_content;
$.get( "somepage.php", function(data){
page_content = data;
});
O soluție de sprijin browsere mai vechi:
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);
}
}
};
}
Poate oarecum exagerat, dar cu siguranta te duci în condiții de siguranță cu acest cod.
Utilizare:
//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();
Pentru cei care folosesc AngularJs, l's $http.ia
:
$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.
});
Pentru a face acest lucru Aduce API este abordarea recomandată, folosind JavaScript Promisiuni. XMLHttpRequest (XHR), IFrame obiect sau dinamic <script> tag-uri sunt mai vechi (și clunkier) se apropie.
<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>
Cel mai bun mod este de a utiliza AJAX ( puteți găsi un tutorial simplu de pe această pagină Tizag). Motivul este că orice altă tehnica se poate utiliza necesită mai mult cod, nu este garantat de a lucra cu browser-ul cruce, fără reprelucrare și necesită utilizați mai mult clientul de memorie prin deschiderea de pagini ascunse în interiorul cadre trece url-uri de analiză a datelor lor și le închide. AJAX este calea de a merge în această situație. Cei doi ani de javascript dezvoltare grele vorbind.
Puteți obține o cerere HTTP GET în două moduri:
xmlhttp.deschis("IA","URL",true); xmlhttp.send();
$("si").click(function() { $.ajax({url: "demo_test.txt", succes: function_name(rezultat) { $("#innerdiv").html(rezultat); }}); });
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/')
Același lucru poate fi făcut pentru a posta cererea, precum și.
Avea o privire la acest link https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit
Simplu asincron cerere:
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();
}