我需要在 JavaScript 中执行HTTP GET请求。最好的方法是什么?
我需要在 Mac OS X dashcode 小部件中执行此操作。
我需要在 JavaScript 中执行HTTP GET请求。最好的方法是什么?
我需要在 Mac OS X dashcode 小部件中执行此操作。
浏览器(和 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);
}
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);
新window.fetch
API 是XMLHttpRequest
使用 ES6 Promise的更干净的替代品。有一个很好的解释在这里,但它归结为(文章):
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 for Android),但是 IE 将可能得不到官方支持。GitHub 有一个 polyfill可用,建议支持仍在大量使用的旧浏览器(尤其是 2017 年 3 月之前的 Safari 版本和同一时期的移动浏览器)。
我想这是否比 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;
}
上面有很多很棒的建议,但不是很可重用,而且经常充满 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
});
没有回调的版本
var i = document.createElement("img");
i.src = "/your/GET/url?params=here";