我需要在JavaScript中做一个HTTP GET请求。最好的方法是什么?
我需要在Mac OS X的dashcode小部件中做到这一点。
我需要在JavaScript中做一个HTTP GET请求。最好的方法是什么?
我需要在Mac OS X的dashcode小部件中做到这一点。
当前回答
上面有很多很好的建议,但不是很可重用,而且经常充满了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
});
其他回答
窗口。fetch是使用ES6承诺的XMLHttpRequest的现代替代品。这里有一个很好的解释,但它可以归结为(来自文章):
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(err) {
console.log('Fetch Error :-S', err);
});
自2017年以来,浏览器支持一直很好。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;
}
短的、干净的:
const http = new XMLHttpRequest() http。打开(“得到”,“https://api.lyrics.ovh/v1/toto/africa”) http.send () http。onload = () => console.log(http.response)
你可以通过两种方式获得HTTP get请求:
该方法基于xml格式。您必须为请求传递URL。 xmlhttp.open(“获得”、“URL”,真正的); xmlhttp.send (); 它是基于jQuery的。您必须指定要调用的URL和function_name。 $ (btn) .click(函数(){ 美元。Ajax ({url: "demo_test.txt", success: function_name(result) { $ (" # innerdiv ") . html(结果); }}); });
下面是直接用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;
}
}
}
jQuery:
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);