JavaScript中的HTTP GET请求？

我需要在JavaScript中执行HTTP GET请求。 什么是最好的方式来做到这一点？

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

Answer 1

您可以通过javascript使用宿主环境提供的function：

function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", theUrl, false ); // false for synchronous request xmlHttp.send( null ); return xmlHttp.responseText; } 

但是，同步请求是不鼓励的，所以你可能想用这个：

 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); } 

注：从Gecko 30.0（Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27）开始，由于对用户体验的负面影响， 主线程上的同步请求已被弃用 。

Answer 2

在jQuery中 ：

 $.get( "somepage.php", {paramOne : 1, paramX : 'abc'}, function(data) { alert('page content: ' + data); } ); 

Answer 3

上面有很多好的build议，但是不能很好的重复使用，而且经常被DOM废话和其他一些隐藏简单代码的绒毛填满。

这里有一个我们创build的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 }); 

Answer 4

没有callback的版本

 var i = document.createElement("img"); i.src = "/your/GET/url?params=here"; 

Answer 5

这里是直接用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; } } } 

Answer 6

新的window.fetch API是使用ES6承诺的XMLHttpRequest更新替代品。 这里有一个很好的解释，但归结起来（从文章）：

 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浏览器和Android版Chrome）可能不会得到官方的支持。 GitHub提供了一个polyfill ，推荐用于支持仍在使用中的较旧浏览器（尤其是2017年3月前的Safari版本，以及同期的移动浏览器）。

我猜这是否比jQuery或XMLHttpRequest更方便取决于项目的性质。

这是一个指向https://fetch.spec.whatwg.org/的链接;

Answer 7

复制粘贴就绪版本

 var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState === 4) { if (request.status === 200) { document.body.className = 'ok'; console.log(request.responseText); } else { document.body.className = 'error'; } } }; request.open("GET", url , true); request.send(null); 

Answer 8

IE会cachingURLs以加快加载速度，但是如果你想每隔一段时间轮询一次服务器以获得新的信息，IE就会caching这个URL，并且可能会返回你一直使用的数据集。

不pipe你如何最终做GET请求 – 香草JavaScript，原型，jQuery等 – 确保你有一个机制来打击caching。 为了解决这个问题，请在您将要访问的url的末尾附加一个唯一标记。 这可以通过以下方式完成：

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

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

Answer 9

Prototype使它变得简单

 new Ajax.Request( '/myurl', { method: 'get', parameters: { 'param1': 'value1'}, onSuccess: function(response){ alert(response.responseText); }, onFailure: function(){ alert('ERROR'); } }); 

Answer 10

我不熟悉Mac OS Dashcode Widgets，但如果他们让您使用JavaScript库并支持XMLHttpRequests ，那么我会使用jQuery并执行如下操作：

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

Answer 11

在您的小部件的Info.plist文件中，不要忘记将您的AllowNetworkAccess键设置为true。

Answer 12

对于那些使用AngularJs的人来说，它是$http.get ：

 $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. }); 

Answer 13

 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的表单提交请求

Answer 14

最好的方法是使用AJAX（你可以在这个页面上find一个简单的教程Tizag ）。 原因是你可能使用的任何其他技术需要更多的代码，它不保证跨浏览器工作，而不会返工，并要求您通过打开隐藏页面内部框架通过parsing他们的数据和closures他们的数据，使用更多的客户端内存。 AJAX是在这种情况下走的路。 那我的两年javascript开发发言。

Answer 15

尝试REQUESTIFY – 一个简化节点HTTP请求的库也可能certificate是非常有用的。

https://github.com/ranm8/requestify

 var requestify = require('requestify'); 

获取请求：

 requestify.get('http://example.com').then(function(response) { // Get the response body response.getBody(); }); 

对于json：

 requestify.post('http://example.com', { hello: 'world' }) .then(function(response) { // Get the response body (JSON parsed or jQuery object for XMLs) response.getBody(); // Get the raw response body response.body; }); 

Answer 16

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

1. 这种方法基于xml格式。 您必须通过请求的URL。

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

2. 这一个是基于jQuery的。 您必须指定要调用的URL和function_name。

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

Answer 17

支持旧版浏览器的一种解决scheme

 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(ee) { 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); } } }; } 

也许有点矫枉过正，但你肯定用这个代码安全。

用法：

 //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(); 

Answer 18

简短而纯粹：

 const http = new XMLHttpRequest() http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka") http.send() http.onload = () => console.log(http.responseText) 

Answer 19

如果您要使用Dashboard小部件的代码，并且不想在所创build的每个小部件中包含JavaScript库，则可以使用Safari本机支持的对象XMLHttpRequest。

正如Andrew Hedges所报道的那样，默认情况下，小部件无法访问networking; 您需要更改与窗口小部件关联的info.plist中的设置。

Answer 20

阿贾克斯

您最好使用Prototype或jQuery等库。

Answer 21

你也可以用纯JS做：

 // 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(); } 

有关更多详细信息，请参阅： https : //www.html5rocks.com/en/tutorials/cors/