协慌网

登录 贡献 社区

JavaScript 中的 HTTP GET 请求?

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

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

答案

浏览器(和 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);
}

在 jQuery 中

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + 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
});