blocks|key|1488526|text|Ajax|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1488527|最好使用诸如Prototype或jQuery之类的库。|1488528|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Ajax_%2528programming%2529|1|http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework|2|http://en.wikipedia.org/wiki/JQuery^0|0|4|0|0|6|9|1|G|6|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

<a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29" rel="nofollow noreferrer">Ajax</a>

You'd be best off using a library such as <a href="http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework" rel="nofollow noreferrer">Prototype</a> or <a href="http://en.wikipedia.org/wiki/JQuery" rel="nofollow noreferrer">jQuery</a>.

blocks|key|1488576|text|下面是直接使用JavaScript完成此操作的代码。但是，正如前面提到的，使用JavaScript库会更好。我最喜欢的是jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488577|在下面的例子中，一个ASPX页面(作为穷人的REST服务)被调用来返回一个JavaScript+JSON对象。|1488578|var+xmlHttp+=+null;

function+GetCustomerInfo()
{
++++var+CustomerNumber+=+document.getElementById(+"TextBoxCustomerNumber"+).value;
++++var+Url+=+"GetCustomerInfoAsJson.aspx?number="+%2B+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+(+"("+%2B+xmlHttp.responseText+%2B+")"+);

++++++++++++//+No+parsing+necessary+with+JSON!++++++++
++++++++++++document.getElementById(+"TextBoxCustomerName"++++).value+=+info.jsonData[+0+].cmname;
++++++++++++document.getElementById(+"TextBoxCustomerAddress"+).value+=+info.jsonData[+0+].cmaddr1;
++++++++}++++++++++++++++++++
++++}
}|code-block|syntax|javascript|1488579|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here is code to do it directly with JavaScript. But, as previously mentioned, you'd be much better off with a JavaScript library. My favorite is jQuery.

In the case below, an ASPX page (that's servicing as a poor man's REST service) is being called to return a JavaScript JSON object.

<pre><code>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 &amp;&amp; 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;
 } 
 }
}
</code></pre>

blocks|key|1703662|text|Prototype让它变得非常简单|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703663|new+Ajax.Request(+'/myurl',+{
++method:++'get',
++parameters:++{+'param1':+'value1'},
++onSuccess:++function(response){
++++alert(response.responseText);
++},
++onFailure:++function(){
++++alert('ERROR');
++}
});|code-block|syntax|javascript|1703664|entityMap|0|LINK|mutability|MUTABLE|url|http://www.prototypejs.org/^0|0|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<a href="http://www.prototypejs.org" rel="noreferrer">Prototype</a> makes it dead simple

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

blocks|key|1703666|text|In+jQuery|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703667|$.get(
++++"somepage.php",
++++{paramOne+:+1,+paramX+:+'abc'},
++++function(data)+{
+++++++alert('page+content:+'+%2B+data);
++++}
);|code-block|syntax|javascript|1703668|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/jQuery.get/^0|0|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<a href="https://api.jquery.com/jQuery.get/" rel="noreferrer">In jQuery</a>:

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

blocks|key|1703737|text|IE将缓存URL以加快加载速度，但如果您正在轮询服务器以获取新信息，IE将缓存该URL，并可能返回与您一直拥有的相同的数据集。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703738|无论你最终如何处理GET请求--普通的JavaScript、Prototype、jQuery等等--都要确保你建立了一种机制来对抗缓存。为了解决这个问题，可以在将要访问的URL的末尾附加一个唯一的标记。这可以通过以下方式完成：|1703739|var+sURL+=+'/your/url.html?'+%2B+(new+Date()).getTime();|code-block|syntax|javascript|1703740|这将在URL的末尾附加一个唯一的时间戳，并将防止发生任何缓存。|1703741|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

IE will cache URLs in order to make loading faster, but if you're, say, polling a server at intervals trying to get new information, IE will cache that URL and will likely return the same data set you've always had.

Regardless of how you end up doing your GET request - vanilla JavaScript, Prototype, jQuery, etc - make sure that you put a mechanism in place to combat caching. In order to combat that, append a unique token to the end of the URL you're going to be hitting. This can be done by:

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

This will append a unique timestamp to the end of the URL and will prevent any caching from happening.

blocks|key|1703765|text|在小部件的Info.plist文件中，不要忘记将AllowNetworkAccess键设置为true。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1703766|entityMap^0|O|I|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

In your widget's Info.plist file, don't forget to set your <code>AllowNetworkAccess</code> key to true.

blocks|key|1703828|text|最好的方法是使用AJAX+(您可以在这个页面的Tizag上找到一个简单的教程)。原因是，你可能使用的任何其他技术都需要更多的代码，不能保证在不返工的情况下跨浏览器工作，并且需要你通过打开框架内的隐藏页面来传递urls解析它们的数据并关闭它们，从而使用更多的客户端内存。AJAX是这种情况下的解决方案。我花了两年时间大量开发javascript。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703829|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tizag.com/%2522Tizag%2522^0|N|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The best way is to use AJAX ( you can find a simple tutorial on this page <a href="http://www.tizag.com/&quot;Tizag&quot;" rel="noreferrer">Tizag</a>). The reason is that any other technique you may use requires more code, it is not guaranteed to work cross browser without rework and requires you use more client memory by opening hidden pages inside frames passing urls parsing their data and closing them. 
AJAX is the way to go in this situation. That my two years of javascript heavy development speaking.

blocks|key|1703862|text|我不熟悉Mac小部件，但如果它们允许您使用JavaScript库并支持XMLHttpRequests，我会使用jQuery并执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703863|var+page_content;
$.get(+"somepage.php",+function(data){
++++page_content+=+data;
});|code-block|syntax|javascript|1703864|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/XMLHttpRequest|1|http://docs.jquery.com/Ajax/jQuery.get#examples^0|Z|F|0|1J|6|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

I'm not familiar with Mac OS Dashcode Widgets, but if they let you use JavaScript libraries and support <a href="http://en.wikipedia.org/wiki/XMLHttpRequest" rel="noreferrer">XMLHttpRequests</a>, I'd use <a href="http://docs.jquery.com/Ajax/jQuery.get#examples" rel="noreferrer">jQuery</a> and do something like this:

<pre><code>var page_content;
$.get( "somepage.php", function(data){
 page_content = data;
});
</code></pre>

blocks|key|1488918|text|如果想要使用Dashboard小部件的代码，并且不想在创建的每个小部件中都包含JavaScript库，那么可以使用Safari本机支持的对象XMLHttpRequest。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488919|正如Andrew+Hedge所报告的那样，默认情况下，小部件不能访问网络；您需要在与小部件关联的info.plist中更改该设置。|1488920|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you want to use the code for a Dashboard widget, and you don't want to include a JavaScript library in every widget you created, then you can use the object XMLHttpRequest that Safari natively supports.

As reported by Andrew Hedges, a widget doesn't have access to a network, by default; you need to change that setting in the info.plist associated with the widget.

blocks|key|1488929|text|没有回调的版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488930|var+i+=+document.createElement("img");
i.src+=+"/your/GET/url?params=here";|code-block|syntax|javascript|1488931|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A version without callback

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

blocks|key|1704005|text|上面有很多很棒的建议，但可重用性不是很好，而且经常充斥着DOM的废话和其他隐藏了简单代码的废话。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1704006|这是我们创建的一个可重用且易于使用的Javascript类。目前它只有一个GET方法，但这对我们来说是可行的。添加一个帖子不应该消耗任何人的技能。|1704007|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+);
++++}
}|code-block|syntax|javascript|1704008|使用它非常简单，就像：|1704009|var+client+=+new+HttpClient();
client.get('http://some/thing?with=arguments',+function(response)+{
++++//+do+something+with+response
});|1704010|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Lots of great advice above, but not very reusable, and too often filled with DOM nonsense and other fluff that hides the easy code.

Here's a Javascript class we created that's reusable and easy to use. Currently it only has a GET method, but that works for us. Adding a POST shouldn't tax anyone's skills.

<pre><code>var HttpClient = function() {
 this.get = function(aUrl, aCallback) {
 var anHttpRequest = new XMLHttpRequest();
 anHttpRequest.onreadystatechange = function() { 
 if (anHttpRequest.readyState == 4 &amp;&amp; anHttpRequest.status == 200)
 aCallback(anHttpRequest.responseText);
 }

 anHttpRequest.open( "GET", aUrl, true ); 
 anHttpRequest.send( null );
 }
}
</code></pre>

Using it is as easy as:

<pre><code>var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
 // do something with response
});
</code></pre>

blocks|key|1704052|text|对于那些使用AngularJs的人来说，它是$http.get|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1704053|$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.
++});|code-block|syntax|javascript|1704054|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/service/$http^0|M|9|6|9|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

For those who use <a href="https://docs.angularjs.org/api/ng/service/$http" rel="noreferrer">AngularJs</a>, it's <code>$http.get</code>:

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

blocks|key|1704069|text|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/')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1704070|对于post请求也可以做同样的事情。|unstyled|1704071|请查看此链接JavaScript+post+request+like+a+form+submit|offset|length|1704072|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit^0|0|0|6|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>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/')
</code></pre>

Same thing can be done for post request as well. 
Have a look at this link <a href="https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit">JavaScript post request like a form submit</a>

blocks|key|1489069|text|你也可以用纯JS来实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489070|//+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+'+%2B+url+%2B+':+'+%2B+text);
};

xhr.onerror+=+function()+{
alert('Woops,+there+was+an+error+making+the+request.');
};

xhr.send();
}|code-block|syntax|javascript|1489071|有关更多详细信息，请参阅：html5rocks+tutorial|offset|length|1489072|entityMap|0|LINK|mutability|MUTABLE|url|https://www.html5rocks.com/en/tutorials/cors/^0|0|0|D|J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can do it with pure JS too:

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

See: for more details: <a href="https://www.html5rocks.com/en/tutorials/cors/" rel="nofollow noreferrer">html5rocks tutorial</a>

blocks|key|1704132|text|要刷新joann对promise的最佳回答，这是我的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1704133|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();
++++});
}|code-block|syntax|javascript|1704134|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To refresh best answer from joann with promise this is my code:

<pre><code>let httpRequestAsync = (method, url) =&gt; {
 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();
 });
}
</code></pre>

blocks|key|1704165|text|要做到这一点，Fetch+API是推荐的方法，使用JavaScript+Promises。XMLHttpRequest+(XHR)、IFrame对象或动态标记是更老(也更笨重)的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1704166|<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+
++++});+</script>|code-block|syntax|javascript|1704167|这是一个很棒的fetch+demo和MDN+docs|offset|length|1704168|entityMap|0|LINK|mutability|MUTABLE|url|https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data|1|https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch^0|0|0|7|A|0|I|8|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

To do this Fetch API is the recommended approach, using JavaScript Promises. XMLHttpRequest (XHR), IFrame object or dynamic tags are older (and clunkier) approaches.

<pre><code>&lt;script type=“text/javascript”&gt; 
 // 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 =&gt; { 
 // handle response }) 
 .catch(err =&gt; { 
 // handle errors 
 }); &lt;/script&gt;
</code></pre>

Here is a great <a href="https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data" rel="noreferrer">fetch demo</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="noreferrer">MDN docs</a>

blocks|key|1704293|text|简单的异步请求：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1704294|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();
}|code-block|syntax|javascript|1704295|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simple async request:

<pre><code>function get(url, callback) {
 var getRequest = new XMLHttpRequest();

 getRequest.open("get", url, true);

 getRequest.addEventListener("readystatechange", function() {
 if (getRequest.readyState === 4 &amp;&amp; getRequest.status === 200) {
 callback(getRequest.responseText);
 }
 });

 getRequest.send();
}
</code></pre>

blocks|key|1704331|text|//+Create+a+request+variable+and+assign+a+new+XMLHttpRequest+object+to+it.
var+request+=+new+XMLHttpRequest()

//+Open+a+new+connection,+using+the+GET+request+on+the+URL+endpoint
request.open('GET',+'restUrl',+true)

request.onload+=+function+()+{
++//+Begin+accessing+JSON+data+here
}

//+Send+request
request.send()|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1704332|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'restUrl', true)

request.onload = function () {
 // Begin accessing JSON data here
}

// Send request
request.send()
</code></pre>

blocks|key|1704353|text|<button+type="button"+onclick="loadXMLDoc()">+GET+CONTENT</button>

+<script>
++++++++function+loadXMLDoc()+{
++++++++++++var+xmlhttp+=+new+XMLHttpRequest();
++++++++++++var+url+=+"<Enter+URL>";``
++++++++++++xmlhttp.onload+=+function+()+{
++++++++++++++++if+(xmlhttp.readyState+==+4+&&+xmlhttp.status+==+"200")+{
++++++++++++++++++++document.getElementById("demo").innerHTML+=+this.responseText;
++++++++++++++++}
++++++++++++}
++++++++++++xmlhttp.open("GET",+url,+true);
++++++++++++xmlhttp.send();
++++++++}
++++</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1704354|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;button type="button" onclick="loadXMLDoc()"&gt; GET CONTENT&lt;/button&gt;

 &lt;script&gt;
 function loadXMLDoc() {
 var xmlhttp = new XMLHttpRequest();
 var url = "&lt;Enter URL&gt;";``
 xmlhttp.onload = function () {
 if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == "200") {
 document.getElementById("demo").innerHTML = this.responseText;
 }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
 }
 &lt;/script&gt;
</code></pre>

blocks|key|1704450|text|现在，对于异步js，我们可以将此方法与fetch()方法结合使用，以更简洁的方式做出承诺。所有现代浏览器都支持异步功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1704451|​|1704452|async+function+funcName(url){
++++const+response+=+await+fetch(url);
++++var+data+=+await+response.json();
++++}|code-block|syntax|javascript|1704453|1704454|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

now with asynchronus js we can use this method with fetch() method to make promises in a more concise way. Async functions are supported in all modern browsers.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function funcName(url){
 const response = await fetch(url);
 var data = await response.json();
 }</code></pre>
</div>
</div>

blocks|key|1704508|text|使用纯javascript并返回一个Promise：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1704509|++httpRequest+=+(url,+method+=+'GET')+=>+{
++++return+new+Promise((resolve,+reject)+=>+{
++++++const+xhr+=+new+XMLHttpRequest();
++++++xhr.open(method,+url);
++++++xhr.onload+=+()+=>+{
++++++++if+(xhr.status+===+200)+{+resolve(xhr.responseText);+}
++++++++else+{+reject(new+Error(xhr.responseText));+}
++++++};
++++++xhr.send();
++++});
++}|code-block|syntax|javascript|1704510|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In pure javascript and returning a Promise:
<pre><code> httpRequest = (url, method = 'GET') =&gt; {
 return new Promise((resolve, reject) =&gt; {
 const xhr = new XMLHttpRequest();
 xhr.open(method, url);
 xhr.onload = () =&gt; {
 if (xhr.status === 200) { resolve(xhr.responseText); }
 else { reject(new Error(xhr.responseText)); }
 };
 xhr.send();
 });
 }
</code></pre>

I need to do an <a href="http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods" rel="noreferrer">HTTP GET</a> request in JavaScript. What's the best way to do that?

I need to do this in a Mac OS X dashcode widget.

HTTP GET request in JavaScript?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要用JavaScript做一个请求。那么最好的方法是什么呢？我需要在Mac小部件中执行此操作。

问JavaScript中的HTTP GET请求？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript中的HTTP GET请求？EN