HTTP GET запрос в JavaScript?

Question

Мне нужно сделать запрос HTTP GET в JavaScript. Какой лучший способ сделать это?

Мне нужно сделать это с помощью виджета с кодовой панелью Mac OS X.

Answer 1

Браузеры (и Dashcode) предоставляют объект XMLHttpRequest, который можно использовать для выполнения HTTP-запросов из JavaScript:

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

Однако синхронные запросы не приветствуются и будут выдавать предупреждение в виде:

Примечание. Начиная с Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 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);
}

Answer 2

В jQuery :

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

Answer 3

Много полезных советов выше, но не очень многократно используемых, и слишком часто наполненных ерундой DOM и другим пухом, который скрывает легкий код.

Вот класс Javascript, который мы создали, который можно использовать повторно и который легко использовать. В настоящее время у него есть только метод 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
});

Answer 4

версия без обратного вызова

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

Answer 5

Новый window.fetch API - более чистая замена для XMLHttpRequest, которая использует обещания ES6. Здесь есть хорошее объяснение , но оно сводится к (из статьи):

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

Поддержка браузера теперь хорошо работает в последних версиях (работает в Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), браузере Android, и Chrome для Android), однако IE, скорее всего, не получит официальную поддержку. В GitHub имеется полифилл , который рекомендуется для поддержки старых браузеров, которые все еще широко используются (особенно в версиях Safari до марта 2017 г. и мобильных браузерах того же периода).

Полагаю, удобнее ли это, чем jQuery или XMLHttpRequest или нет, зависит от характера проекта.

Вот ссылка на спецификацию https://fetch.spec.whatwg.org/

Редактировать

Используя ES7 async / await, это становится просто (на основе this Gist ):

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

Answer 6

Вот код, чтобы сделать это напрямую с помощью JavaScript. Но, как упоминалось ранее, вам будет гораздо лучше с библиотекой JavaScript. Мой любимый JQuery.

В приведенном ниже случае ASPX-страница (которая обслуживает REST-сервис для бедняков) вызывается для возврата 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;
        }                    
    }
}

Answer 7

Готовая к копированию версия

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

Answer 8

IE будет кешировать URL-адреса, чтобы ускорить загрузку, но если вы, скажем, опрашиваете сервер с интервалами, пытаясь получить новую информацию, IE будет кешировать этот URL-адрес и, вероятно, вернет тот же набор данных, который вы всегда не было.

Независимо от того, как вы в конечном итоге выполняете свой запрос GET - ванильный JavaScript, Prototype, jQuery и т. Д. - убедитесь, что вы создали механизм для борьбы с кэшированием. Чтобы бороться с этим, добавьте уникальный токен в конец URL, который вы собираетесь нажать. Это может быть сделано:

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

Это добавит уникальную метку времени в конец URL и предотвратит любое кэширование.

Answer 9

Коротко и чисто:

const http = new XMLHttpRequest()

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

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

Answer 10

Прототип делает его невероятно простым

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