HTTP GET запрос в JavaScript?


808

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

Мне нужно сделать это в виджете даш-кода Mac OS X.


10
Обратите внимание, что это регулируется той же политикой происхождения. en.wikipedia.org/wiki/Same_origin_policy
ripper234

Ответы:


1208

Браузеры (и 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);
}

2
Ну, конечно, в Javascript он встроен, или как любая библиотека Javascript может предложить для этого удобный метод? Разница в том, что удобные методы предлагают удобство и более ясный и простой синтаксис.
Пистос

37
Почему префикс XML`?
АликЭльзин-килака

10
Префикс XML, потому что он использует X из AJAX ~ Асинхронный JavaScript и XML . Кроме того, хороший момент в том, что « API, который имеет и привязку ECMAScript » связан с тем фактом, что JavaScript может быть во многих вещах, кроме браузеров, поддерживающих HTTP (например, Adobe Reader ...), стоит помнить, так что снимаю шляпу Заостренные уши.
будет

7
@ AlikElzin-kilaka На самом деле все ответы выше не соответствуют действительности (на самом деле связанные документы W3 объясняют, что «каждый компонент этого имени может вводить в заблуждение»). Правильный ответ? это просто плохо названный stackoverflow.com/questions/12067185/…
Эшли Кулман

2
Выборки API предлагает лучший способ сделать это, и может быть polyfilled при необходимости (см @ PeterGibson в ответ ниже ).
Dominus.Vobiscum

190

В jQuery :

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

4
обратите внимание, что это не работает в IE 10 при попытке получить доступ к URL-адресу в другом домене, чем домен страницы
BornToCode

5
@BornToCode, вы должны продолжить расследование и, возможно, открыть ошибку в трекере проблем jQuery в этом случае
ashes999

92
Я знаю, что некоторые люди хотят писать чистый Javascript. Я понимаю. У меня нет проблем с людьми, которые делают это в своих проектах. Мое «In jQuery:» следует интерпретировать как «Я знаю, что вы спрашивали, как это сделать в Javascript, но позвольте мне показать вам, как вы будете делать это с jQuery, чтобы у вас возникло любопытство, увидев, какая синтаксическая краткость и ясность, которой вы можете наслаждаться с помощью этой библиотеки, которая предоставит вам множество других преимуществ и инструментов ".
Пистос

34
Заметьте также, что оригинальный плакат позже сказал: «Спасибо за все ответы! Я пошел с jQuery, основываясь на некоторых вещах, которые я прочитал на их сайте».
Пистос

153

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

Ошибка UnCaughtReference, HttpClient не определен. Я получаю эту первую строку сам.
sashikanta

Как вы это называете из html onClick?
Gobliins

Создайте функцию в другом месте, где она содержит var client ... и просто запустите functionName (); вернуть ложь; в
onClick

1
ReferenceError: XMLHttpRequest is not defined
Багги Багги

123

Новый window.fetchAPI - более чистая замена, 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, это становится просто (на основе этого Gist ):

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

9
Я мог бы сэкономить время, упомянув, что вы можете сделать это, чтобы включить учетные данные в запрос:fetch(url, { credentials:"include" })
Enselic

@ bugmenot123 window.fetchне имеет синтаксического анализатора XML, но вы можете проанализировать ответ самостоятельно, если обработаете его как текст (не json, как в примере выше). См. Для примера stackoverflow.com/a/37702056/66349
Питер Гибсон

94

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

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

2
Отлично! Мне нужен сценарий Greasemonkey, чтобы поддержать сеанс, и этот фрагмент идеален. Просто завернул его в setIntervalзвонок.
Каркамано

9
как мне получить результат?
user4421975

@ user4421975 Вы не получаете - чтобы получить доступ к ответу на запрос, вам нужно использовать вышеупомянутый XMLHttpRequest.
Якуб Пастушук

74

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

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

33
Поскольку этот ответ является одним из лучших результатов для поиска «http-запроса javascript», стоит упомянуть, что запуск eval для данных ответов, как это, считается плохой практикой
Kloar

9
@ Kloar хорошая мысль, но было бы еще лучше указать причину, по которой это плохо, я думаю, это безопасность. Объяснение причин плохой практики - лучший способ заставить людей изменить свои привычки.
Balmipour

43

Современная версия копирования-вставки (с использованием функции выборки и стрелки ) :

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

Классическая версия для копирования и вставки:

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


19

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

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

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

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


12

Прототип делает это просто

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

2
Проблема в том, что Mac OS X не поставляется с предварительно установленным Prototype. Поскольку виджет должен работать на любом компьютере, включая Prototype (или jQuery) в каждом виджете, это не лучшее решение.
kiamlaluno

@kiamlaluno использует Prototype cdn из cloudflare
Владимир Стажилов

10

Одно решение, поддерживающее старые браузеры:

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

Может быть, это несколько излишне, но вы определенно не рискуете этим кодом.

Применение:

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

2
Не могли бы люди дать несколько комментариев о том, что я сделал неправильно? Не очень полезно в этом смысле!
flyingP0tat0

Лучший ответ, на мой взгляд, если кто-то кодирует в ES5 с использованием простого JavaScript.
CoderX

8

Я не знаком с виджетами Dashcode для Mac OS, но если они позволят вам использовать библиотеки JavaScript и поддерживать XMLHttpRequests , я бы использовал jQuery и сделал бы что-то вроде этого:

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

5

В файле Info.plist вашего виджета не забудьте установить для своего AllowNetworkAccessключа значение true.


5

Лучше всего использовать AJAX (вы можете найти простое руководство на этой странице Tizag ). Причина в том, что любой другой метод, который вы можете использовать, требует больше кода, он не гарантирует работу между браузерами без переделки и требует от вас использования большей клиентской памяти, открывая скрытые страницы внутри фреймов, передавая URL-адреса, анализируя их данные и закрывая их. AJAX - это путь в этой ситуации. Это мои два года тяжелого развития JavaScript.


5

Для тех, кто использует AngularJs , это $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.
  });

5

Получить HTTP-запрос GET можно двумя способами:

  1. Этот подход основан на формате XML. Вы должны передать URL для запроса.

    xmlhttp.open("GET","URL",true);
    xmlhttp.send();
  2. Этот основан на JQuery. Вы должны указать URL и имя_функции, которую хотите вызвать.

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

5

Для этого рекомендуется использовать Fetch API, используя обещания JavaScript. XMLHttpRequest (XHR), объект IFrame или динамические теги являются более старыми (и более грубыми) подходами.

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

Вот отличная демонстрация и документы MDN



4

Простой асинхронный запрос:

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


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

1

Если вы хотите использовать код для виджета Dashboard и не хотите включать библиотеку JavaScript в каждый созданный вами виджет, вы можете использовать объект XMLHttpRequest, который изначально поддерживается Safari.

Как сообщает Эндрю Хеджес, по умолчанию виджет не имеет доступа к сети; вам нужно изменить этот параметр в info.plist, связанном с виджетом.


1

Чтобы обновить лучший ответ Джоанна с обещанием, это мой код:

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

1

Современный, чистый и самый короткий

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


0

Вы можете сделать это и с чистым JS:

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

Смотрите: для более подробной информации: учебник html5rocks


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

-1

Вот альтернатива XML-файлам для загрузки ваших файлов как объекта и быстрого доступа к свойствам как объекта.

  • Внимание, чтобы javascript мог его и правильно интерпретировать содержимое, необходимо сохранить ваши файлы в том же формате, что и ваша HTML-страница. Если вы используете UTF 8, сохраните ваши файлы в UTF8 и т. Д.

XML работает как дерево, хорошо? вместо того чтобы писать

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

Это всего лишь маленький подарок для группы. Спасибо, что нравится :)

Если вы хотите проверить функцию на вашем ПК локально, перезапустите браузер с помощью следующей команды (поддерживается всеми браузерами, кроме safari):

yournavigator.exe '' --allow-file-access-from-files
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.