JavaScript中的HTTP GET请求？

Ajax

您最好使用原型或jQuery之类的库。

这里是直接使用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;}}}

原型简单死了

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

在jQuery：

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

IE将缓存URL以加快加载速度，但如果您每隔一段时间轮询服务器以获取新信息，IE将缓存该URL并可能返回您一直拥有的相同数据集。

无论你最终如何执行GET请求——普通的JavaScript、原型、jQuery等——都要确保你建立了一种机制来对抗缓存。为了对抗这种情况，在你要点击的URL末尾附加一个唯一的令牌。这可以通过以下方式完成：

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

这将在URL的末尾附加一个唯一的时间戳，并防止发生任何缓存。

在小部件的Info.plist文件中，不要忘记将AllowNetworkAccess键设置为true。

最好的方法是使用AJAX（您可以在此页面蒂扎格上找到一个简单的教程）。原因是您可能使用的任何其他技术都需要更多代码，它不能保证在不返工的情况下跨浏览器工作，并且需要您通过在帧中打开隐藏的页面来使用更多的客户端内存传递URL解析它们的数据并关闭它们。AJAX是这种情况要走的路。那我两年的javascript重开发讲。

我不熟悉Mac OS Dashcode小部件，但如果它们允许您使用JavaScript库并支持XMLHttp请求，我会使用jQuery并执行以下操作：

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

如果您想使用Dashboard小部件的代码，并且您不想在您创建的每个小部件中包含JavaScript库，那么您可以使用Safari本机支持的对象XMLHttpRequest。

正如安德鲁·赫奇斯所报告的那样，默认情况下，小部件无权访问网络；您需要在与小部件关联的info.plist中更改该设置。

浏览器（和Dashcode）提供了一个XMLHttpRequest对象，可用于从JavaScript发出HTTP请求：

function httpGet(theUrl){var xmlHttp = new XMLHttpRequest();xmlHttp.open( "GET", theUrl, false ); // false for synchronous requestxmlHttp.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 asynchronousxmlHttp.send(null);}

没有回调的版本

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

上面有很多很好的建议，但不是很可重用，而且经常充满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});

复制粘贴现代版本（使用获取和箭头函数）：

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

您可以通过两种方式获取HTTP GET请求：

1. 此方法基于xml格式。您必须传递请求的URL。

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

2. This one is based on jQuery. You have to specify the URL and function_name you want to call.

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

对于那些使用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.});

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发布请求，如表单提交

新的window.fetch API是使用ES6承诺的XMLHttpRequest的更干净的替代品。有一个很好的解释这里，但它归结为（来自文章）：

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）、歌剧、SafariiOS（v10.3）、安卓浏览器和安卓Chrome），但是IE可能不会得到官方支持。GitHub有一个PolyFill可用，建议支持仍在大量使用的旧浏览器（特别是2017年3月前Safari的版本和同期的移动浏览器）。

我想这是否比jQuery或XMLHttp请求更方便取决于项目的性质。

这里有一个指向规范https://fetch.spec.whatwg.org/的链接

编辑：

使用ES7 async/wait，这变得简单（基于这个要点）：

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

一种支持旧浏览器的解决方案：

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 porpertiesvar request = new httpRequest();request.method = "GET";request.url = "https://example.com/api?parameter=value";
//create callback for success containing the responserequest.success = function(response) {console.log(response);};
//and a fail callback containing the errorrequest.fail = function(error) {console.log(error);};
//and finally send it awayrequest.send();

你也可以用纯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教程

短而干净：

const http = new XMLHttpRequest()
http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")http.send()
http.onload = () => console.log(http.responseText)

为了刷新joann的最佳答案，这是我的代码：

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

为此，推荐使用JavaScript Promises进行Fetch API。XMLHttpRequest（XHR）、IFrame对象或动态<script>标签是较旧（且更笨重）的方法。

<script type=“text/javascript”>// Create request objectvar 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>

这是一个伟大的获取demo和MDN文档

简单的异步请求：

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

这是xml文件的替代方案，可将文件作为对象加载并以非常快速的方式将属性作为对象访问。

• 注意，为了使javascript能够正确解释内容，有必要将文件保存为与超文本标记语言页面相同的格式。如果您使用UTF 8，请将文件保存为UTF8等。

XML作为树工作，好吗？而不是编写

     <property> value <property>

写一个像这样的简单文件：

      Property1: valueProperty2: valueetc.

保存你的文件。现在调用函数……

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

这只是给小组的一个小礼物。谢谢你的喜欢：）

如果您想在本地PC上测试该功能，请使用以下命令重新启动浏览器（除Safari之外的所有浏览器都支持）：

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

// 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 endpointrequest.open('GET', 'restUrl', true)
request.onload = function () {// Begin accessing JSON data here}
// Send requestrequest.send()

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

现代，干净，最短

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

现在有了asynChronus js，我们可以将此方法与ferch（）方法一起使用，以更简洁的方式做出承诺。所有现代浏览器都支持异步函数。

async function funcName(url){const response = await fetch(url);var data = await response.json();}

一套简单易用的功能配方

我准备了一组函数，它们在某种程度上是相似的，但却展示了新的功能以及Javascript所达到的简单性，如果你知道如何利用它的话。

0. 让一些基本常数

let data;const URLAPI = "https://gorest.co.in/public/v1/users";function setData(dt) {data = dt;}

1. 最简单

// MOST SIMPLE ONEfunction makeRequest1() {fetch(URLAPI).then(response => response.json()).then( json => setData(json)).catch(error => console.error(error)).finally(() => {console.log("Data received 1 --> ", data);data = null;});}

2. 使用Promises和Async工具的变体

// ASYNC FUNCTIONSfunction makeRequest2() {fetch(URLAPI).then(async response => await response.json()).then(async json => await setData(json)).catch(error => console.error(error)).finally(() => {console.log("Data received 2 --> ", data);data = null;});}
function makeRequest3() {fetch(URLAPI).then(async response => await response.json()).then(json => setData(json)).catch(error => console.error(error)).finally(() => {console.log("Data received 3 --> ", data);data = null;});}
// Better Promise usagesfunction makeRequest4() {const response = Promise.resolve(fetch(URLAPI).then(response => response.json())).then(json => setData(json) ).finally(()=> {console.log("Data received 4 --> ", data);
})}

3. 一个内胆功能的降级！！！

// ONE LINER STRIKE ASYNC WRAPPER FUNCTIONasync function makeRequest5() {console.log("Data received 5 -->", await Promise.resolve(fetch(URLAPI).then(response => response.json().then(json => json ))) );}

值得一提--->@Daniel De León可能是最干净的函数*

(async () =>console.log((await (await fetch( URLAPI )).json())))();

4. 最上面的答案->作者：@陈志立显示了HttpClient API的功能。

Fetch也可以实现同样的目标。根据MDN的使用Fetch，您展示了如何将INIT作为第二个参数传递，基本上打开了使用经典方法（get、post…）轻松配置API的可能性。

// Example POST method implementation:async function postData(url = '', data = {}) {// Default options are marked with *const response = await fetch(url, {method: 'POST', // *GET, POST, PUT, DELETE, etc.mode: 'cors', // no-cors, *cors, same-origincache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cachedcredentials: 'same-origin', // include, *same-origin, omitheaders: {'Content-Type': 'application/json'// 'Content-Type': 'application/x-www-form-urlencoded',},redirect: 'follow', // manual, *follow, errorreferrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-urlbody: JSON.stringify(data) // body data type must match "Content-Type" header});return response.json(); // parses JSON response into native JavaScript objects}
postData('https://example.com/answer', { answer: 42 }).then(data => {console.log(data); // JSON data parsed by `data.json()` call});

节点

获取在节点上不可用（服务器端）

最简单的解决方案（2021年底）是使用Axios。

$ npm install axios

然后运行：

const axios = require('axios');const request = async (url) => await (await axios.get( url ));let response = request(URL).then(resp => console.log(resp.data));

在纯javascript中并返回一个Promise：

  httpRequest = (url, method = 'GET') => {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open(method, url);xhr.onload = () => {if (xhr.status === 200) { resolve(xhr.responseText); }else { reject(new Error(xhr.responseText)); }};xhr.send();});}