JavaScriptでHTTPGETリクエストを実行する必要があります。それを行うための最良の方法は何ですか？
MacOSXダッシュコードウィジェットでこれを行う必要があります。
2272246 次
30 に答える
1396
ブラウザー (および Dashcode) は、JavaScript から HTTP 要求を作成するために使用できる XMLHttpRequest オブジェクトを提供します。
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);
}
于 2010-10-27T12:43:51.507 に答える
211
新しいAPI は、 ES6 の promise を利用するwindow.fetchのよりクリーンな代替品です。hereXMLHttpRequestに素敵な説明がありますが、要約すると（記事から）：
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 には、現在も大部分が使用されている古いブラウザー (特に 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;
}
于 2016-07-11T00:45:57.590 に答える
208
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);
于 2008-10-29T16:38:26.017 に答える
173
上記の素晴らしいアドバイスはたくさんありますが、あまり再利用可能ではなく、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
});
于 2014-02-27T18:03:11.683 に答える
101
コールバックなしのバージョン
var i = document.createElement("img");
i.src = "/your/GET/url?params=here";
于 2010-11-08T09:50:21.697 に答える
75
これはJavaScriptで直接それを行うためのコードです。ただし、前述のように、JavaScriptライブラリを使用した方がはるかに優れています。私のお気に入りはjQueryです。
以下のケースでは、JavaScript JSONオブジェクトを返すためにASPXページ（貧乏人のRESTサービスとして機能している）が呼び出されています。
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;
}
}
}
于 2008-10-29T16:35:06.540 に答える
59
//Option with catch
fetch( textURL )
.then(async r=> console.log(await r.text()))
.catch(e=>console.error('Boo...' + e));
//No fear...
(async () =>
console.log(
(await (await fetch( jsonURL )).json())
)
)();
コピー＆ペーストのクラシックバージョン：
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);
于 2014-08-18T07:23:27.400 に答える
23
IEは読み込みを高速化するためにURLをキャッシュしますが、たとえば、サーバーを定期的にポーリングして新しい情報を取得しようとすると、IEはそのURLをキャッシュし、以前と同じデータセットを返す可能性があります。
最終的にGETリクエストを実行する方法（バニラJavaScript、プロトタイプ、jQueryなど）に関係なく、キャッシングと戦うためのメカニズムを配置するようにしてください。これに対抗するには、ヒットするURLの末尾に一意のトークンを追加します。これは次の方法で実行できます。
var sURL = '/your/url.html?' + (new Date()).getTime();
これにより、URLの末尾に一意のタイムスタンプが追加され、キャッシュが発生しなくなります。
于 2008-10-29T16:40:06.357 に答える
14
プロトタイプはそれを完全に単純にします
new Ajax.Request( '/myurl', {
method: 'get',
parameters: { 'param1': 'value1'},
onSuccess: function(response){
alert(response.responseText);
},
onFailure: function(){
alert('ERROR');
}
});
于 2008-10-29T16:35:26.570 に答える
9
私は Mac OS の Dashcode Widgets に詳しくありませんが、JavaScript ライブラリを使用してXMLHttpRequestsをサポートできるのであれば、 jQueryを使用して次のようにします。
var page_content;
$.get( "somepage.php", function(data){
page_content = data;
});
于 2008-10-30T04:03:53.047 に答える
6
次の 2 つの方法で HTTP GET 要求を取得できます。
このアプローチは、xml 形式に基づいています。リクエストの URL を渡す必要があります。
xmlhttp.open("GET","URL",true); xmlhttp.send();これはjQueryに基づいています。呼び出す URL と function_name を指定する必要があります。
$("btn").click(function() { $.ajax({url: "demo_test.txt", success: function_name(result) { $("#innerdiv").html(result); }}); });
于 2014-09-26T13:21:08.203 に答える
6
AllowNetworkAccessウィジェットの Info.plist ファイルで、キーを trueに設定することを忘れないでください。
于 2008-10-29T19:42:10.373 に答える
5
最善の方法は、AJAX を使用することです (このページTizagで簡単なチュートリアルを見つけることができます)。その理由は、使用する可能性のある他の手法にはより多くのコードが必要であり、やり直しなしでクロスブラウザーで動作することが保証されておらず、データを解析する URL を渡すフレーム内の隠しページを開いてそれらを閉じることにより、より多くのクライアントメモリを使用する必要があるためです。AJAX は、この状況で行く方法です。それは私の2年間のjavascriptの重い開発の話です。
于 2008-10-29T23:01:11.080 に答える
4
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/')
投稿リクエストでも同じことができます。
このリンクを見てくださいフォーム送信のようなJavaScriptポストリクエスト
于 2016-07-03T09:34:38.563 に答える
2
// 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()
于 2019-09-05T06:00:18.123 に答える
1
ダッシュボードウィジェットのコードを使用する必要があり、作成したすべてのウィジェットにJavaScriptライブラリを含めたくない場合は、SafariがネイティブにサポートするオブジェクトXMLHttpRequestを使用できます。
Andrew Hedgesによって報告されたように、ウィジェットはデフォルトでネットワークにアクセスできません。ウィジェットに関連付けられているinfo.plistでその設定を変更する必要があります。
于 2010-08-07T05:03:15.710 に答える
0
ファイルをオブジェクトとしてロードし、非常に高速な方法でオブジェクトとしてプロパティにアクセスするための xml ファイルの代替方法を次に示します。
- JavaScript がコンテンツを正しく解釈できるように、HTML ページと同じ形式でファイルを保存する必要があります。UTF8 を使用している場合は、ファイルを UTF8 などで保存します。
XML はツリーとして機能しますか? 書く代わりに
<property> value <property>
次のような単純なファイルを作成します。
Property1: value
Property2: value
etc.
ファイルを保存します..関数を呼び出します....
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('\n')?'\n':r.indexOf('\r')?'\r':'');
if(b.length){
if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/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();
}
値を効率的に取得できるようになりました。
getfilecontent('mesite.com/mefile.txt');
window.onload = function(){
if(objectfile !== null){
alert (objectfile.property1.value);
}
}
グループに貢献するのはほんのささやかな贈り物です。いいねありがとうございます:)
PC の機能をローカルでテストする場合は、次のコマンドを使用してブラウザーを再起動します (safari を除くすべてのブラウザーでサポートされています)。
yournavigator.exe '' --allow-file-access-from-files
于 2019-03-15T10:34:25.603 に答える