JavaScript中的HTTP GET请求？


HTTP GET request in JavaScript?

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

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

相关讨论

浏览器(和dashcode)提供了一个xmlhttpRequest对象，可用于从javascript发出HTTP请求：

1
2
3
4
5
6
7
function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

但是，不鼓励同步请求，并将沿着以下行生成警告：

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

您应该发出一个异步请求，并在事件处理程序内处理响应。

1
2
3
4
5
6
7
8
9
10
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中：

1
2
3
4
5
6
7
$.get(
   "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);
相关讨论

上面有很多很好的建议，但不是很可重用，而且常常充满了dom的废话和其他隐藏简单代码的绒毛。

这是我们创建的一个Javascript类，它可重用且易于使用。目前它只有一个get方法，但这对我们有用。增加一个职位不应该对任何人的技能征税。

1
2
3
4
5
6
7
8
9
10
11
12
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 );
    }
}

使用它就像：

1
2
3
4
var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
    // do something with response
});
相关讨论

没有回调的版本

1
2
var i = document.createElement("img");
i.src ="/your/GET/url?params=here";
相关讨论

新的window.fetchAPI是使用es6承诺的XMLHttpRequest的更清洁的替代品。这里有一个很好的解释，但可以归结为(从文章中)：

1
2
3
4
5
6
7
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)：

1
2
3
4
5
async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}
相关讨论

下面是直接用JavaScript实现这一点的代码。但是，正如前面提到的，使用JavaScript库会更好。我最喜欢的是jquery。

在下面的例子中，将调用一个ASPX页面(作为穷人的REST服务提供服务)来返回一个JavascriptJSON对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
        }                    
    }
}
相关讨论

复制粘贴就绪版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);

IE将缓存URL以加快加载速度，但如果您每隔一段时间轮询一个服务器以获取新信息，那么IE将缓存该URL并可能返回您一直拥有的相同数据集。

无论您最终如何执行GET请求——普通的javascript、原型、jquery等——都要确保您将一种机制放置到位，以对抗缓存。为了克服这个问题，在你要访问的URL的末尾附加一个唯一的令牌。这可以通过以下方式实现：

1
var sURL = '/your/url.html?' + (new Date()).getTime();

这将在URL的末尾附加一个唯一的时间戳，并防止发生任何缓存。

短而纯：

1
2
3
4
5
6
const http = new XMLHttpRequest()

http.open("GET","https://api.lyrics.ovh/v1/shakira/waka-waka")
http.send()

http.onload = () => console.log(http.responseText)

原型让它变得非常简单

1
2
3
4
5
6
7
8
9
10
new Ajax.Request( '/myurl', {
  method:  'get',
  parameters:  { 'param1': 'value1'},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert('ERROR');
  }
});
相关讨论

我不熟悉mac os dashcode小部件，但如果它们允许您使用javascript库并支持xmlhttprequest，我将使用jquery并执行以下操作：

1
2
3
4
var page_content;
$.get("somepage.php", function(data){
    page_content = data;
});

一个支持旧浏览器的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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);
            }
        }
    };
}

也许有点过头了，但你绝对可以安全地使用这段代码。

用途：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//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();
相关讨论

在widget的info.plist文件中，不要忘记将AllowNetworkAccess键设置为true。

1
2
3
4
5
6
7
8
9
10
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/')

同样的事情也可以用于post请求。像表单提交一样查看此链接javascript post请求

对于使用安格拉尔JS的用户，它是$http.get：

1
2
3
4
5
6
7
8
9
$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.
  });

您可以通过两种方式获得HTTP GET请求：

  • 这种方法基于XML格式。您必须传递请求的URL。

    1
    2
    xmlhttp.open("GET","URL",true);
    xmlhttp.send();

  • 这个基于jquery。必须指定要调用的URL和函数名。

    1
    2
    3
    4
    5
    $("btn").click(function() {
      $.ajax({url:"demo_test.txt", success: function_name(result) {
        $("#innerdiv").html(result);
      }});
    });

    • 最好的方法是使用Ajax(您可以在此页面上找到一个简单的教程tizag)。原因是您可能使用的任何其他技术都需要更多的代码，不能保证在跨浏览器工作时不进行返工，并且需要您通过打开帧内的隐藏页面来使用更多的客户机内存，通过传递URL来解析它们的数据并关闭它们。在这种情况下，Ajax是前进的道路。那我两年的javascript开发很重。

    为此，建议使用JavaScript承诺的方法获取API。xmlhttpRequest(xhr)、iframe对象或动态标记是较旧(和更笨拙)的方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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
        });

    这里有一个很好的获取演示和MDN文档

    简单异步请求：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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();
    }

    阿贾克斯

    最好使用一个库，比如原型库或jquery库。

    为了让Joann以承诺的方式给出最佳答案，这是我的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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();
        });
    }

    如果您希望使用仪表板小部件的代码，并且不希望在创建的每个小部件中都包含JavaScript库，那么可以使用Safari本机支持的对象xmlhttpRequest。

    正如AndrewHedges所报告的，默认情况下，小部件不能访问网络；您需要在与小部件关联的info.plist中更改该设置。

    您也可以使用纯JS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    // 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教程

    这里有一个XML文件的替代方法，可以将文件作为对象加载，并以非常快的方式访问属性作为对象。

    • 注意，为了让javascript能够正确地解释内容，有必要将文件保存为与HTML页面相同的格式。如果使用utf8，请以utf8等格式保存文件。

    XML作为树工作，可以吗？而不是写作

    1
         <property> value <property>

    编写这样的简单文件：

    1
    2
    3
          Property1: value
          Property2: value
          etc.

    保存文件..现在调用函数….

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
        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('
    '    )?'
    '    :r.indexOf('
    '    )?'
    '    :'');
            if(b.length){
            if(b=='
    '    ){var j=r.toString().replace(/
    /gi,'');}else{var j=r.toString().replace(/
    /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();
    }

    现在您可以有效地获取您的价值。

    1
    2
    3
    4
    5
    6
    7
    8
    getfilecontent('mesite.com/mefile.txt');

    window.onload = function(){

    if(objectfile !== null){
    alert (objectfile.property1.value);
    }
    }

    这只是给团队的一个小礼物。谢谢你的喜欢：)

    如果要在本地测试PC上的功能，请使用以下命令(除Safari之外的所有浏览器都支持)重新启动浏览器：

    1
    yournavigator.exe '' --allow-file-access-from-files