web-dev-qa-db-ja.com

JavaScriptでHTTP GETリクエスト？

JavaScriptで HTTP GET リクエストを実行する必要があります。そのための最善の方法は何ですか？

私はMac OS Xのダッシュコードウィジェットでこれを行う必要があります。

javascripthttpgetdashcode
696
mclaughlinj

あなたはjavascriptを介してホスティング環境によって提供される機能を使用することができます。

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）以降、 メインスレッドでの同期リクエストは廃止予定となりました ユーザーエクスペリエンスへの悪影響のため.

1059
Joan

jQueryでは ：

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

上にたくさんの素晴らしいアドバイスがありますが、あまり再利用できませんし、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
});
134
tggagne

コールバックなしのバージョン

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

これは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;
        }                    
    }
}
71
rp.

新しい 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）で動作するようになりましたただし、IEは正式なサポートを受けられない可能性があります。 GitHubはpolyfill availableを持っています。これは、まだ主に使われている古いブラウザをサポートするために推奨されています（2017年3月より前のバージョンのSafariとモバイルブラウザ）.

これがjQueryやXMLHttpRequestよりも便利かどうかは、プロジェクトの性質によって異なります。

これはspec /へのリンクです https://fetch.spec.whatwg.org/ /

編集 ：

ES7 async/awaitを使うと、これは（ this Gist に基づいて）単純になります。

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}
70
Peter Gibson

コピー＆ペースト対応版

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);
31
Daniel De León

IEはロードを速くするためにURLをキャッシュしますが、もしあなたが新しい情報を取得しようとしている間隔でサーバーをポーリングしているなら、IEはそのURLをキャッシュし、同じデータセットを返すでしょういつも持っていた。

どのようにしてGETリクエストを実行しているかに関係なく（Vanilla JavaScript、Prototype、jQueryなど）、キャッシュと戦うためのメカニズムを必ず用意してください。それに対抗するために、当たるURLの最後にユニークなトークンを追加してください。これは、次の方法で実行できます。

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

これにより、URLの末尾に一意のタイムスタンプが追加され、キャッシュが行われなくなります。

18
Tom

短くて純粋： 

const http = new XMLHttpRequest()

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

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

15
Damjan Pavlica

プロトタイプ それは簡単に死にます

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

私はMac OS Dashcode Widgetには馴染みがありませんが、JavaScriptライブラリーを使用して XMLHttpRequests をサポートするのであれば、 jQuery を使用して、次のようにします。

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

古いブラウザをサポートする1​​つの解決策：

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

多少多すぎるかもしれませんが、あなたは間違いなくこのコードに安全に行きます。

使用法： 

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

ウィジェットのInfo.plistファイルで、AllowNetworkAccessキーをtrueに設定することを忘れないでください。

5
Andrew Hedges
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投稿要求

4
Gaurav Gupta

HTTP GETリクエストは2つの方法で取得できます。

  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);
  }});
});
4
parag.rane

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.
  });
4
Vitalii Fedorenko

最善の方法はAJAXを使うことです（このページに簡単なチュートリアルがあります Tizag ）。その理由は、他の手法ではより多くのコードが必要となり、クロスブラウザで手を加えずに作業することは保証されず、データを解析してURLを渡してフレーム内の隠しページを開いて閉じることで、より多くのクライアントメモリを使用するためです。 AJAXはこのような状況に対処する方法です。私の2年間のJavascriptが大きく開発されたという話です。 

4
Nikola Stjelja

単純な非同期リクエスト：

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

Ajax

Prototype または jQuery などのライブラリを使用するのが最善です。

1
Greg

これを行うには、JavaScript Promiseを使用して推奨されるアプローチです。 XMLHttpRequest（XHR）、IFrameオブジェクト、または動的タグは、より古い（そしてよりわかりにくい）アプローチです。

<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>

これは素晴らしい フェッチデモです そして /MDNのドキュメント

1
aabiro

Dashboardウィジェットのコードを使用したいが、作成したすべてのウィジェットにJavaScriptライブラリを含めたくない場合は、SafariがネイティブにサポートするオブジェクトXMLHttpRequestを使用できます。

Andrew Hedgesが報告したように、ウィジェットはデフォルトでネットワークにアクセスできません。ウィジェットに関連付けられているinfo.plistでその設定を変更する必要があります。

0
kiamlaluno

純粋な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();
}

詳細はこちらをご覧ください： html5rocksチュートリアル

0
jpereira

お約束でjoannからの最良の答えをリフレッシュするために、これは私のコードです：

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