HTTP GET запрос в JavaScript?

Question

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

Мне нужно сделать это в виджетах dashcode для Mac OS X.

Answer 1

Вы можете использовать функции, обеспечиваемые среды хостинга через JavaScript:

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

Однако синхронные запросы не рекомендуется, так что вы можете использовать вместо этого:

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

Note: Starting with Gecko 30.0 (Firefox 30.0/Thunderbird 30.0/SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

Answer 2

Ajax

Вы бы лучше с помощью библиотеки, такие как Prototype или jQuery.

Answer 3

Вот код, который можно сделать с помощью 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 4

Prototype делает его мертвым простой

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

Answer 5

In jQuery:

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

Answer 9

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

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

Answer 10

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

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

Answer 11

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

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

Answer 12

Много замечательных советов выше, но не очень многократно используемых и слишком часто заполненных глупостью 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 13

Копию паста готовый вариант

var request = new XMLHttpRequest(); 
request.onreadystatechange = function() { 
    if (request.readyState === 4) { 
     if (request.status === 200) { 
      document.body.className = 'ok'; 
      console.log(request.responseText); 
     } else if (!isValid(this.response) && 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 14

Вы можете получить запрос 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); 
       }}); 
   }); 
   

Answer 15

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

Answer 16

Это может оказаться очень полезным, чтобы попытаться REQUESTIFY- библиотеку, упрощающий запрос узел HTTP решений.

https://github.com/ranm8/requestify

var requestify = require('requestify'); 

Получение запроса:

requestify.get('http://example.com').then(function(response) { 
    // Get the response body 
    response.getBody(); 
}); 

И JSON:

requestify.post('http://example.com', { 
     hello: 'world' 
    }) 
    .then(function(response) { 
     // Get the response body (JSON parsed or jQuery object for XMLs) 
     response.getBody(); 

     // Get the raw response body 
     response.body; 
    }); 

Answer 17

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

То же самое можно сделать для запроса пост, а также.
Посмотрите на эту ссылку JavaScript post request like a form submit

Answer 18

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

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

Browser support теперь хорошо в последних версиях (работает в Chrome, Firefox, Край (V14), Safari (v10.1) , Opera, Safari iOS (v10.3), браузер Android и Chrome для Android), однако IE, скорее всего, не получит официальную поддержку. GitHub has a polyfill, который рекомендуется для поддержки старых браузеров, которые в значительной степени используются (версии esp Safari до марта 2017 года и мобильные браузеры того же периода).

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

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

Edit:

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

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

Answer 19

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

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(ee) 
      { 
       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(); 

Answer 20

Вы можете сделать это с чистым 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 tutorial

Answer 21

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

const http = new XMLHttpRequest() 
 

 
http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka") 
 
http.send() 
 

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