HTTP GET request di JavaScript?

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

Aku harus melakukan ini di Mac OS X dashcode widget.

Mengomentari pertanyaan (1)
Larutan

Browser (dan Dashcode) memberikan XMLHttpRequest object 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, sinkron permintaan berkecil hati dan akan menghasilkan peringatan di sepanjang baris:

Catatan: Dimulai dengan Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), sinkron permintaan di thread utama telah usang karena efek negatif untuk pengalaman pengguna.

Anda harus membuat permintaan asynchronous dan menangani respon dalam sebuah 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);
}
Komentar (13)

Di jQuery:

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

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

Berikut ini's Javascript kelas kami diciptakan's reusable dan mudah untuk digunakan. Saat ini hanya memiliki metode GET, tapi itu bekerja untuk kita. Menambahkan POSTING seharusnya't pajak orang's keterampilan.

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

Menggunakan hal ini sebagai mudah sebagai:

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

Baru jendela.ambil API adalah cleaner pengganti untuk XMLHttpRequest yang membuat penggunaan ES6 menjanjikan. Ada's nice penjelasan di sini, tetapi itu bermuara (dari artikel):

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

Dukungan Browser sekarang baik dalam rilis terbaru (bekerja di Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), browser Android dan Chrome untuk Android), namun IE akan kemungkinan besar tidak mendapatkan dukungan resmi. GitHub memiliki polyfill tersedia yang dianjurkan untuk mendukung browser lama sebagian besar masih di gunakan (esp versi Safari pra Maret 2017 dan mobile browser dari periode yang sama).

Saya menebak apakah ini lebih nyaman dari jQuery atau XMLHttpRequest atau tidak tergantung pada sifat proyek.

Berikut ini's link ke spec https://fetch.spec.whatwg.org/

Edit:

Menggunakan ES7 async/menanti, hal ini menjadi cukup (berdasarkan ini Gist):

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

Versi tanpa callback

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

Berikut ini adalah kode untuk melakukannya secara langsung dengan JavaScript. Tapi, seperti yang disebutkan sebelumnya, anda'a akan jauh lebih baik dengan JavaScript library. Favorit saya adalah jQuery.

Dalam kasus di bawah ini, halaman ASPX (yang's melayani sebagai orang miskin's SISANYA service) sedang dipanggil untuk mengembalikan JavaScript JSON object.

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

copy-paste versi modern ( menggunakan mengambil dan panah fungsi ) :

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

copy-paste versi klasik:

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);
Komentar (0)

Pendek dan bersih:

const http = new XMLHttpRequest()

http.terbuka("MENDAPATKAN", "https://api.lyrics.ovh/v1/toto/africa") http.mengirim()

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

Komentar (0)

IE akan cache Url dalam rangka untuk membuat loading lebih cepat, tapi jika anda're, mengatakan, polling server pada interval mencoba untuk mendapatkan informasi baru, YAITU akan cache URL tersebut dan kemungkinan akan kembali data yang sama membuat anda've selalu memiliki.

Terlepas dari bagaimana anda melakukan GET request - vanilla JavaScript, Prototype, jQuery, dll - pastikan bahwa anda menempatkan mekanisme di tempat untuk memerangi caching. Dalam rangka untuk memerangi itu, menambahkan token unik ke akhir URL anda're akan memukul. Hal ini dapat dilakukan dengan:

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

Ini akan menambahkan timestamp yang unik ke akhir URL dan akan mencegah caching terjadi.

Komentar (0)

Prototype membuatnya mati sederhana

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

I'm tidak akrab dengan Mac OS Dashcode Widget, tetapi jika mereka membiarkan anda menggunakan JavaScript perpustakaan dan dukungan XMLHttpRequests, I'd gunakan jQuery dan melakukan sesuatu seperti ini:

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

Salah 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, tapi anda pasti pergi aman dengan kode ini.

Penggunaan:

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

Bagi mereka yang menggunakan AngularJs, it's $http.dapatkan:

$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.
  });
Komentar (0)

Untuk melakukan ini, Mengambil API adalah pendekatan yang disarankan, menggunakan JavaScript Menjanjikan. XMLHttpRequest (XHR), IFrame objek atau dinamis <script> kategori yang lebih tua (dan clunkier) pendekatan.

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

Berikut adalah besar fetch demo dan MDN docs

Komentar (0)

Cara terbaik adalah untuk menggunakan AJAX ( anda dapat menemukan tutorial sederhana di halaman ini Tizag). Alasannya adalah bahwa teknik lain yang dapat anda gunakan membutuhkan lebih banyak kode, hal ini tidak dijamin untuk bekerja lintas browser tanpa mengolah dan mengharuskan anda menggunakan lebih banyak klien memori dengan membuka halaman tersembunyi di dalam frame yang lewat url parsing data mereka dan menutup mereka. AJAX adalah cara untuk pergi dalam situasi ini. Yang saya dua tahun javascript berat perkembangan berbicara.

Komentar (0)

Di widget anda's Info.plist, don't lupa untuk mengatur AllowNetworkAccess kunci untuk benar.

Komentar (0)

Anda bisa mendapatkan permintaan HTTP MENDAPATKAN dalam dua cara:

  1. Pendekatan ini didasarkan pada format xml. Anda harus melewati URL untuk permintaan.

xmlhttp.terbuka("MENDAPATKAN","URL",true); xmlhttp.send();

  1. Yang satu ini didasarkan pada jQuery. Anda harus menentukan URL dan function_name yang ingin anda panggil.

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

Komentar (0)
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 posting permintaan juga.
Silahkan lihat di link ini https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit

Komentar (0)

Sederhana async permintaan:

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

Ajax

Anda'd menjadi yang terbaik dari menggunakan perpustakaan seperti Prototype atau jQuery.

Komentar (0)