JavaScript中的HTTP GET请求？
Posted
技术标签:
【中文标题】JavaScript中的HTTP GET请求？【英文标题】：HTTP GET request in JavaScript? 【发布时间】：2010-09-19 20:02:51 【问题描述】：我需要在 javascript 中执行 HTTP GET 请求。最好的方法是什么？
我需要在 Mac OS X dashcode 小部件中执行此操作。
【问题讨论】：
请注意，这受同源策略的约束。 en.wikipedia.org/wiki/Same_origin_policy 【参考方案1】：浏览器（和 Dashcode）提供了一个 XMLHttpRequest 对象，可用于从 JavaScript 发出 HTTP 请求：
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);
【讨论】：
好吧，当然 Javascript 已经内置了它，或者任何 Javascript 库如何为它提供方便的方法？不同之处在于便利方法提供了便利，而且语法更清晰、更简单。 XML 前缀，因为它使用来自 AJAX 的 X ~ Asynchronous JavaScript and XML。另外，关于“API that has and ECMAScript binding”的好点是因为除了支持 HTTP 的浏览器（例如 Adobe Reader ...）之外，JavaScript 可以在很多东西中使用。 /跨度> @AlikElzin-kilaka 实际上上面的所有答案都是不正确的（事实上，链接的 W3 文档解释了“这个名称的每个组成部分都可能具有误导性”）。正确答案？它只是名字不好***.com/questions/12067185/… 为什么我们需要xmlHttp.send(null);。这是什么意思？
fetch API 提供了一种更好的方法来执行此操作，并且可以在必要时进行 polyfill（参见@PeterGibson 的answer below）。【参考方案2】：
新的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、Edge (v14)、Safari (v10.1)、Opera、Safari ios (v10.3)、android 浏览器和适用于 Android 的 Chrome） ，但是 IE 可能不会获得官方支持。 GitHub has a polyfill 可用，建议支持仍在大量使用的旧版浏览器（尤其是 2017 年 3 月之前的 Safari 版本和同一时期的移动浏览器）。
我猜这是否比 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;
【讨论】：
我可能会通过提及您可以在请求中包含凭据来节省一些时间：fetch(url, credentials:"include" )
@bugmenot123 window.fetch 没有附带 XML 解析器，但是如果您将响应作为文本处理（不是上面示例中的 json），您可以自己解析响应。示例见***.com/a/37702056/66349【参考方案3】：
In jQuery:
$.get(
"somepage.php",
paramOne : 1, paramX : 'abc',
function(data)
alert('page content: ' + data);
);
【讨论】：
请注意，当尝试访问与页面域不同的域中的 url 时，这在 IE 10 中不起作用 @BornToCode 你应该进一步调查，在这种情况下可能会在 jQuery 问题跟踪器上打开一个错误 我知道有些人想编写纯 Javascript。我明白了。我对人们在他们的项目中这样做没有任何问题。我的“在 jQuery 中：”应该被解释为“我知道你问过如何在 Javascript 中做到这一点，但是让我向你展示你将如何使用 jQuery 来做到这一点，你可能会因为看到什么样的语法简洁而激起你的好奇心和您可以通过使用这个库来享受清晰度，它还可以为您提供许多其他优势和工具”。 还请注意原始发帖人后来说：“感谢所有答案！根据我在他们网站上阅读的一些内容，我选择了 jQuery。”。【参考方案4】：上面有很多很好的建议，但不是很可重用，而且经常充满 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。我得到这个第一行它自己。 html onClick 怎么调用？ 在其他地方创建一个包含 var 客户端的函数...然后运行 functionName();返回假；在 onClickReferenceError: XMLHttpRequest is not defined【参考方案5】：
没有回调的版本
var i = document.createElement("img");
i.src = "/your/GET/url?params=here";
【讨论】：
太棒了！我需要一个 Greasemonkey 脚本来保持会话活跃，这个 sn-p 是完美的。只需将其包装在setInterval 电话中即可。
我如何得到结果？
@user4421975 你没有得到 - 要访问请求响应，你需要使用前面提到的 XMLHttpRequest。【参考方案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;
【讨论】：
由于这个答案是谷歌搜索“http request javascript”的最佳结果之一，值得一提的是，对这样的响应数据运行 eval 被认为是不好的做法 @Kloar 好点，但最好给出它不好的原因，我想这是安全性。解释为什么做法不好是让人们改变习惯的最佳方式。【参考方案7】：复制粘贴现代版本（使用fetch 和arrow function）：
//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);
【讨论】：
【参考方案8】：短而干净：
const http = new XMLHttpRequest()
http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()
http.onload = () => console.log(http.responseText)【讨论】：
最后一行，特别是= () => 是做什么的？
最后一行定义了一个回调函数，在加载服务器响应时执行。【参考方案9】：
IE 将缓存 URL 以加快加载速度，但如果您在一段时间内轮询服务器以尝试获取新信息，IE 将缓存该 URL 并可能返回与您一直相同的数据集有。
无论您最终如何执行 GET 请求 - vanilla JavaScript、Prototype、jQuery 等 - 确保您设置了一种机制来对抗缓存。为了解决这个问题，请在您要访问的 URL 的末尾附加一个唯一标记。这可以通过以下方式完成：
var sURL = '/your/url.html?' + (new Date()).getTime();
这将在 URL 的末尾附加一个唯一的时间戳，并防止发生任何缓存。
【讨论】：
【参考方案10】：现代、简洁、简洁
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 call
fetch(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【讨论】：
应该提到fetch 不受任何 IE 支持 - MDN docs （如果有人在 2021 年关心 IE）
2021：什么是 IE？【参考方案11】：
Prototype 让它变得非常简单
new Ajax.Request( '/myurl',
method: 'get',
parameters: 'param1': 'value1',
onSuccess: function(response)
alert(response.responseText);
,
onFailure: function()
alert('ERROR');
);
【讨论】：
问题是 Mac OS X 没有预装 Prototype。由于小部件需要在任何计算机上运行，在每个小部件中包括 Prototype（或 jQuery）并不是最好的解决方案。 @kiamlaluno 使用来自 cloudflare 的 Prototype cdn【参考方案12】：一种支持旧版浏览器的解决方案：
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();
【讨论】：
能否请大家给我一些关于我做错了什么的cmets？这种方式不是很有帮助！ 我认为最好的答案是，如果一个人使用纯 JavaScript 在 ES5 中编码。 @CoderX 现在没有人再用纯 ES5 JavaScript 编码了。我们有非常好的转译器，比如 Babel。【参考方案13】：我不熟悉 Mac OS Dashcode 小部件，但如果它们允许您使用 JavaScript 库并支持 XMLHttpRequests，我会使用 jQuery 并执行以下操作：
var page_content;
$.get( "somepage.php", function(data)
page_content = data;
);
【讨论】：
【参考方案14】：建议使用 Fetch API 执行此操作，使用 JavaScript Promises。 XMLHttpRequest (XHR)、IFrame 对象或动态<script> 标记是较旧（且更笨重）的方法。
<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>
这是一个很棒的fetch demo 和MDN docs
【讨论】：
【参考方案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.
);
【讨论】：
【参考方案16】：您可以通过两种方式获取 HTTP GET 请求：
这种方式基于xml格式。您必须传递请求的 URL。
xmlhttp.open("GET","URL",true);
xmlhttp.send();
这是基于 jQuery 的。您必须指定要调用的 URL 和 function_name。
$("btn").click(function()
$.ajax(url: "demo_test.txt", success: function_name(result)
$("#innerdiv").html(result);
);
);
【讨论】：
【参考方案17】：在小部件的 Info.plist 文件中，不要忘记将 AllowNetworkAccess 键设置为 true。
【讨论】：
【参考方案18】：最好的方法是使用AJAX（你可以在这个页面Tizag找到一个简单的教程）。原因是您可能使用的任何其他技术都需要更多代码，不能保证在不返工的情况下跨浏览器工作，并且需要您通过打开框架内的隐藏页面来使用更多客户端内存，这些页面传递 url 解析其数据并关闭它们。 AJAX 是在这种情况下要走的路。说我这两年的javascript重度开发。
【讨论】：
【参考方案19】：现在有了异步 js，我们可以使用这个方法和 fetch() 方法以更简洁的方式做出承诺。所有现代浏览器都支持异步函数。
async function funcName(url)
const response = await fetch(url);
var data = await response.json();
【讨论】：
【参考方案20】：简单易用的函数集
我准备了一组函数，它们在某种程度上相似，但展示了新功能以及 Javascript 所达到的简单性，如果你知道如何利用它的话。
-
让一些基本常量
let data;
const URLAPI = "https://gorest.co.in/public/v1/users";
function setData(dt)
data = dt;
-
最简单
// MOST SIMPLE ONE
function 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;
);
-
使用 Promises 和 Async 工具的变体
// ASYNC FUNCTIONS
function 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 usages
function makeRequest4()
const response = Promise.resolve(fetch(URLAPI).then(response => response.json())).then(json => setData(json) ).finally(()=>
console.log("Data received 4 --> ", data);
)
-
一个线性函数的演示！！！
// ONE LINER STRIKE ASYNC WRAPPER FUNCTION
async 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())
)
)();
-
最佳答案 -> By @tggagne 展示了 HttpClient API 的功能。
使用 Fetch 也可以达到同样的效果。根据 MDN 的 Using 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-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers:
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
,
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: 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
);
节点
Fetch 在节点上不可用（服务器端）
最简单的解决方案（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));
【讨论】：
【参考方案21】：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
【讨论】：
【参考方案22】：要刷新 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();
);
【讨论】：
【参考方案23】：简单的异步请求：
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();
【讨论】：
【参考方案24】：Ajax
最好使用Prototype 或jQuery 等库。
【讨论】：
【参考方案25】：// 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()
【讨论】：
【参考方案26】：在纯 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();
);
【讨论】：
【参考方案27】：如果您想使用 Dashboard 小部件的代码，并且不想在您创建的每个小部件中包含 JavaScript 库，那么您可以使用 Safari 原生支持的对象 XMLHttpRequest。
正如 Andrew Hedges 所报告的，默认情况下，小部件无权访问网络；您需要在与小部件关联的 info.plist 中更改该设置。
【讨论】：
【参考方案28】：你也可以用纯 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
【讨论】：
【参考方案29】：这是 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,'');elsevar 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
【讨论】：
【参考方案30】：<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>
【讨论】：
以上是关于JavaScript中的HTTP GET请求？的主要内容，如果未能解决你的问题，请参考以下文章
javascript nodejs http get和post请求
如何使用javascript获取HTTP GET请求值[重复]
java和javascript的区别，HTTP请求的方法，GET 与 POST
从 iOS UIAutomation 发出同步 HTTP GET 请求或在 JavaScript 中调用 shell 脚本