Permintaan HTTP GET dalam JavaScript?

Saya perlu melakukan permintaan GET HTTP dalam JavaScript. Apa cara terbaik untuk melakukan itu?

Saya perlu melakukan ini di widget kode dasbor Mac OS X.

Browser (dan Dashcode) menyediakan objek XMLHttpRequest yang dapat digunakan untuk membuat permintaan HTTP dari JavaScript:

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

Namun, permintaan sinkron tidak disarankan dan akan menghasilkan peringatan di sepanjang baris:

Catatan: Dimulai dengan Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), permintaan sinkron pada utas utama telah ditinggalkan karena efek negatif terhadap pengalaman pengguna.

Anda harus membuat permintaan asinkron dan menangani respons di dalam pengendali event.

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

Di jQuery :

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

Banyak saran bagus di atas, tetapi tidak terlalu dapat digunakan kembali, dan terlalu sering diisi dengan DOM omong kosong dan bulu-bulu lain yang menyembunyikan kode mudah.

Inilah kelas Javascript yang kami buat yang dapat digunakan kembali dan mudah digunakan. Saat ini hanya memiliki metode GET, tetapi itu bekerja untuk kita. Menambahkan POST seharusnya tidak membebani keterampilan siapa pun.

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

Menggunakannya semudah:

var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
    // do something with response
});

window.fetchAPI baru adalah pengganti yang lebih bersih untuk XMLHttpRequestyang menggunakan janji-janji ES6. Ada penjelasan yang bagus di sini , tetapi intinya adalah (dari artikel):

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});

Dukungan browser sekarang bagus dalam rilis terbaru (berfungsi di Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), browser Android, dan Chrome untuk Android), namun IE akan kemungkinan tidak mendapatkan dukungan resmi. GitHub memiliki polyfill yang tersedia yang direkomendasikan untuk mendukung browser lama yang sebagian besar masih digunakan (terutama versi Safari sebelum Maret 2017 dan browser seluler dari periode yang sama).

Saya kira apakah ini lebih nyaman daripada jQuery atau XMLHttpRequest atau tidak tergantung pada sifat proyek.

Berikut tautan ke spec https://fetch.spec.whatwg.org/

Edit :

Menggunakan ES7 async / menunggu, ini menjadi sederhana (berdasarkan Gist ini ):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

Versi tanpa panggilan balik

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";

Berikut adalah kode untuk melakukannya secara langsung dengan JavaScript. Tetapi, seperti yang disebutkan sebelumnya, Anda akan jauh lebih baik dengan perpustakaan JavaScript. Favorit saya adalah jQuery.

Dalam kasus di bawah ini, halaman ASPX (yang berfungsi sebagai layanan REST orang miskin) dipanggil untuk mengembalikan objek JavaScript 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;
        }                    
    }
}

Versi modern salin-tempel (menggunakan fungsi ambil dan panah ) :

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

Versi klasik salin-tempel:

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

Pendek dan bersih:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()

http.onload = () => console.log(http.responseText)

IE akan men-cache URL untuk membuat pemuatan lebih cepat, tetapi jika Anda, katakanlah, polling server pada interval waktu yang mencoba untuk mendapatkan informasi baru, IE akan menyimpan cache URL itu dan kemungkinan akan mengembalikan set data yang sama seperti yang selalu Anda miliki.

Terlepas dari bagaimana Anda akhirnya melakukan permintaan GET Anda - vanilla JavaScript, Prototype, jQuery, dll - pastikan Anda menempatkan mekanisme untuk memerangi caching. Untuk mengatasi itu, tambahkan token unik ke bagian akhir URL yang akan Anda pukul. Ini dapat dilakukan dengan:

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

Ini akan menambahkan stempel waktu unik ke akhir URL dan akan mencegah terjadinya caching.

Prototipe membuatnya sangat sederhana

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

Satu solusi yang mendukung browser lama:

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

Mungkin agak berlebihan tetapi Anda pasti aman dengan kode ini.

Pemakaian:

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

Saya tidak terbiasa dengan Mac OS Dashcode Widgets, tetapi jika mereka membiarkan Anda menggunakan perpustakaan JavaScript dan mendukung XMLHttpRequests , saya akan menggunakan jQuery dan melakukan sesuatu seperti ini:

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

Dalam file Info.plist widget Anda, jangan lupa untuk mengatur AllowNetworkAccesskunci Anda menjadi true.

Cara terbaik adalah dengan menggunakan AJAX (Anda dapat menemukan tutorial sederhana di halaman ini Tizag ). Alasannya adalah bahwa teknik lain yang Anda gunakan memerlukan lebih banyak kode, itu tidak dijamin untuk bekerja lintas browser tanpa pengerjaan ulang dan mengharuskan Anda menggunakan lebih banyak memori klien dengan membuka halaman tersembunyi di dalam frame lewat url mengurai data mereka dan menutupnya. AJAX adalah cara untuk masuk dalam situasi ini. Itu saya dua tahun javascript berbicara pengembangan berat.

Bagi mereka yang menggunakan AngularJs , itu $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.
  });

Anda bisa mendapatkan permintaan HTTP GET dengan dua cara:

1. Pendekatan ini berdasarkan format xml. Anda harus melewati URL untuk permintaan tersebut.

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

2. Yang ini didasarkan pada jQuery. Anda harus menentukan URL dan function_name yang ingin Anda panggil.

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

Untuk melakukan ini Ambil API adalah pendekatan yang disarankan, menggunakan JavaScript Janji. XMLHttpRequest (XHR), objek IFrame atau tag dinamis adalah pendekatan yang lebih lama (dan lebih rumit).

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

Ini demo pengambilan dan MDN yang bagus

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

Hal yang sama dapat dilakukan untuk permintaan pos juga.
Silakan lihat tautan permintaan posting JavaScript ini seperti formulir kirim

Permintaan async sederhana:

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

Ajax

Anda sebaiknya menggunakan perpustakaan seperti Prototipe atau 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()

Jika Anda ingin menggunakan kode untuk widget Dashboard, dan Anda tidak ingin menyertakan perpustakaan JavaScript di setiap widget yang Anda buat, maka Anda dapat menggunakan objek XMLHttpRequest yang didukung Safari secara asli.

Seperti yang dilaporkan oleh Andrew Hedges, widget tidak memiliki akses ke jaringan, secara default; Anda perlu mengubah pengaturan itu di info.plist yang terkait dengan widget.

Untuk menyegarkan jawaban terbaik dari joann dengan janji ini adalah kode saya:

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

Modern, bersih, dan terpendek

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

let url = 'https://www.randomtext.me/api/lorem';

// to only send GET request without waiting for response just call 
fetch(url);

// to wait for results use 'then'
fetch(url).then(r=> r.json().then(j=> console.log('\nREQUEST 2',j)));

// or async/await
(async()=> console.log('\nREQUEST 3', await(await fetch(url)).json()) )();

Open Chrome console network tab to see request

Anda dapat melakukannya dengan JS murni juga:

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

Lihat: untuk detail lebih lanjut: tutorial 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>

Berikut ini adalah alternatif untuk file xml untuk memuat file Anda sebagai objek dan mengakses properti sebagai objek dengan cara yang sangat cepat.

• Perhatian, agar javascript dapat dia dan untuk menafsirkan konten dengan benar perlu untuk menyimpan file Anda dalam format yang sama dengan halaman HTML Anda. Jika Anda menggunakan UTF 8, simpan file Anda di UTF8, dll.

XML berfungsi sebagai pohon ok? alih-alih menulis

     <property> value <property> 

tulis file sederhana seperti ini:

      Property1: value
      Property2: value
      etc.

Simpan file Anda .. Sekarang panggil fungsi ....

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

sekarang Anda bisa mendapatkan nilai-nilai Anda secara efisien.

getfilecontent('mesite.com/mefile.txt');

window.onload = function(){

if(objectfile !== null){
alert (objectfile.property1.value);
}
}

Ini hanya hadiah kecil untuk contibute ke grup. Terima kasih atas kesukaan Anda :)

Jika Anda ingin menguji fungsi pada PC Anda secara lokal, restart browser Anda dengan perintah berikut (didukung oleh semua browser kecuali safari):

yournavigator.exe '' --allow-file-access-from-files