HTTP GET-verzoek in JavaScript?

const http = new XMLHttpRequest()
http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()
http.onload = () => console.log(http.responseText)

Antwoord 9

IE zal URL’s cachen om het laden sneller te laten verlopen, maar als je bijvoorbeeld een server met tussenpozen pollt om nieuwe informatie te krijgen, zal IE die URL cachen en waarschijnlijk dezelfde dataset retourneren die je altijd hebt gehad gehad.

Ongeacht hoe u uw GET-verzoek doet – vanilla JavaScript, Prototype, jQuery, enz. – zorg ervoor dat u een mechanisme installeert om caching tegen te gaan. Om dat te bestrijden, voegt u een uniek token toe aan het einde van de URL die u gaat raken. Dit kan door:

var sURL = '/your/url.html?' + (new Date()).getTime();

Hiermee wordt een unieke tijdstempel aan het einde van de URL toegevoegd en wordt voorkomen dat er caching plaatsvindt.

Antwoord 10

Modern, schoon en kortst

fetch('https://www.randomtext.me/api/lorem')

Antwoord 11

Prototypemaakt het doodeenvoudig

new Ajax.Request( '/myurl', {
  method:  'get',
  parameters:  { 'param1': 'value1'},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert('ERROR');
  }
});

Antwoord 12

Eén oplossing die oudere browsers ondersteunt:

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);
            }
        }
    };
}

Misschien wat overdreven, maar je gaat zeker veilig met deze code.

Gebruik:

//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();

Antwoord 13

Ik ben niet bekend met Mac OS Dashcode Widgets, maar als ze je JavaScript-bibliotheken laten gebruiken en ondersteuning bieden voor XMLHttpRequests, ik zou jQuerygebruiken en zoiets doen :

var page_content;
$.get( "somepage.php", function(data){
    page_content = data;
});

Antwoord 14

Hiervoor is Fetch API de aanbevolen aanpak, met behulp van JavaScript Promises. XMLHttpRequest (XHR), IFrame-object of dynamische tags zijn oudere (en onhandigere) benaderingen.

<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>

Hier is een geweldig fetch demo en MDN docs

Antwoord 15

In het info.plistische bestand van uw widget, vergeet niet om uw AllowNetworkAccessSleutel in te stellen op TRUE.

Antwoord 16

De beste manier is om Ajax te gebruiken (u kunt een eenvoudige tutorial vinden op deze pagina tizag ). De reden is dat elke andere techniek die u mag gebruiken, meer code vereist, het is niet gegarandeerd om crossbrowser te werken zonder opnieuw te werken en vereist dat u meer clientgeheugen gebruikt door verborgen pagina’s in de frames te openen die de URL’s van het parseren van hun gegevens doorgeven en deze sluiten.
Ajax is de manier om in deze situatie te gaan. Dat mijn twee jaar javascript zware ontwikkeling spreekt.

Antwoord 17

Voor degenen die angularjs , het is $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.
  });

Antwoord 18

U kunt op twee manieren een HTTP krijgen:

1. Deze aanpak op basis van XML-indeling. U moet de URL doorgeven voor het verzoek.

   xmlhttp.open("GET","URL",true);
   xmlhttp.send();
   

2. Deze is gebaseerd op jQuery. U moet de URL en functienaam opgeven die u wilt aanroepen.

   $("btn").click(function() {
     $.ajax({url: "demo_test.txt", success: function_name(result) {
       $("#innerdiv").html(result);
     }});
   }); 
   

Antwoord 19

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/')

Hetzelfde kan ook worden gedaan voor postverzoeken.
Bekijk deze link JavaScript-postverzoek zoals een formulierverzending

Antwoord 20

Eenvoudig asynchronisatieverzoek:

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();
}

Antwoord 21

nu met asynchronus js kunnen we deze methode gebruiken met de fetch() methode om op een meer beknopte manier beloften te doen. Async-functies worden ondersteund in alle moderne browsers.

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

axios.get('https://api.github.com/users/mapbox')
  .then((response) => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });
// logs:
// => {login: "mapbox", id: 600935, node_id: "MDEyOk9yZ2FuaXphdGlvbjYwMDkzNQ==", avatar_url: "https://avatars1.githubusercontent.com/u/600935?v=4", gravatar_id: "", …}
// => 200
// => OK
// => {x-ratelimit-limit: "60", x-github-media-type: "github.v3", x-ratelimit-remaining: "60", last-modified: "Wed, 01 Aug 2018 02:50:03 GMT", etag: "W/"3062389570cc468e0b474db27046e8c9"", …}
// => {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}

// 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()

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();
}

    <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

<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>