JavaScript 中的 HTTP GET 请求?

IT技术 javascript http-get dashcode
2021-01-09 19:22:21

我需要在 JavaScript 中执行HTTP GET请求。最好的方法是什么?

我需要在 Mac OS X dashcode 小部件中执行此操作。

6个回答

浏览器(和 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 库如何为它提供方便的方法?不同之处在于便利方法提供了便利,以及更清晰、更简单的语法。
2021-03-10 19:22:21
XML 前缀,因为它使用了来自 AJAX 的 X ~ Asynchronous JavaScript and XML此外,“具有和 ECMAScript 绑定的 API ”的优点是因为 JavaScript 可以用于许多事物,除了支持 HTTP 的浏览器(例如 Adob​​e Reader ...)尖耳朵。
2021-03-11 19:22:21
为什么我们需要xmlHttp.send(null);这是什么意思?
2021-03-15 19:22:21
获取API 提供了一个更好的方式来做到这一点,并在必要时(见@ PeterGibson的可polyfilled下面的答案)。
2021-03-19 19:22:21
@AlikElzin-kilaka 实际上,上面的所有答案都不合时宜(事实上,链接的 W3 文档解释了“此名称的每个组成部分都可能具有误导性”)。正确答案?它只是名字很糟糕stackoverflow.com/questions/12067185/...
2021-03-27 19:22:21

在 jQuery 中

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);
请注意,当尝试访问与页面域不同的域中的 url 时,这在 IE 10 中不起作用
2021-03-16 19:22:21
我知道有些人想编写纯 Javascript。我明白了。我对人们在他们的项目中这样做没有问题。我的“在 jQuery 中:”应该被解释为“我知道你问过如何在 Javascript 中做到这一点,但让我向你展示你将如何用 jQuery 做到这一点,你可能会因为看到什么样的语法简洁和您可以通过使用这个库来享受清晰度,它还可以为您提供许多其他优势和工具”。
2021-03-19 19:22:21
还观察到原始海报后来说:“感谢所有的答案!我根据我在他们网站上阅读的一些内容选择了 jQuery。”。
2021-03-26 19:22:21
@BornToCode 你应该进一步调查,在这种情况下可能会在 jQuery 问题跟踪器上打开一个错误
2021-04-02 19:22:21

window.fetchAPI 是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;
}
@bugmenot123window.fetch没有附带 XML 解析器,但是如果您将响应作为文本处理(而不是上面示例中的 json),您可以自己解析响应。有关示例,请参见stackoverflow.com/a/37702056/66349
2021-03-21 19:22:21
我可能会通过提到您可以这样做以在请求中包含凭据来节省一些时间: fetch(url, { credentials:"include" })
2021-03-23 19:22:21

上面有很多很棒的建议,但不是很可重用,而且经常充满 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
});
ReferenceError: XMLHttpRequest is not defined
2021-03-22 19:22:21
UnCaughtReference 错误,未定义 HttpClient 。我自己得到了这个第一行。
2021-03-30 19:22:21
在其他地方创建一个包含 var 客户端的函数......然后运行 ​​functionName(); 返回假;在点击
2021-04-02 19:22:21
你如何从 html onClick 调用它?
2021-04-07 19:22:21

没有回调的版本

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";
@user4421975 你没有得到 - 要访问请求响应,你需要使用前面提到的 XMLHttpRequest 。
2021-03-13 19:22:21
我如何得到结果?
2021-03-28 19:22:21
优秀!我需要一个 Greasemonkey 脚本来保持会话的活动,这个片段是完美的。只是把它包装在一个setInterval电话里。
2021-04-05 19:22:21