32

私はしばらくの間 Web を検索してきましたが、プレーンなクライアント側 JavaScript (node-js、jquery などはありません) からGitHub APIを使用する方法の例を見つけることができませんでした。認証してからブロブをプッシュするようなものが欲しかったので、理解できるようにできるだけ単純にしました。複雑すぎてはいけません。数十行のコードでそれを行うことができると思いますが、ajax、json、およびjsonpについてはあまり知りません。

私が始めるための例を提供できますか?

ありがとう！

編集:これを見つけました: http://blog.vjeux.com/category/javascript、しかし、プロセスの正確な手順についてはまだ混乱しています。

4

1 に答える 1

32

通常の JavaScript (フレームワークなし) で使用する場合は、XMLHttpRequestオブジェクトをいじる必要があります。XMLHttpRequestは、AJAX 実装のコアを提供します。

プレフィックスがあっても、XMLHttpXML や HTTP に限定されるわけではありません。任意のデータ型 (JSON など) を取得し、FTP などの他のプロトコルを使用できます。

GETGitHub からユーザー情報を取得したいとします。ブラウザーからhttps://api.github.com/users/funchalにアクセスすることで、簡単にリクエストを行うことができます。JavaScript で HTTP リクエストを送信するのは、次のように簡単XMLHttpRequestです。

// Create a new request object
var request = new XMLHttpRequest();

// Initialize a request
request.open('get', 'https://api.github.com/users/funchal')
// Send it
request.send()

これを JavaScript コンソールから試してみると、少しがっかりするかもしれません。すぐには何も起こりません。サーバーがリクエストに応答するまで待つ必要があります。readyStateリクエスト オブジェクトのインスタンスを作成してからサーバーが応答するまで、オブジェクトはプロパティの値によって示される一連の状態変化を受けます。

  • 0 UNSENT:open()呼び出されていない
  • 1 OPENED:send()呼び出されていない
  • 2 HEADERS_RECIEVED: ヘッダーとステータスは、send()
  • 3 LOADING:responseTextはまだダウンロード中です
  • 4 DONE: ワフー！

すべてが終了したらresponse、データの属性を確認できます。

request.readyState // => 4 (We've waited enough)
request.response // => "{whatever}"

を使用する場合XMLHttpRequest#open()、考慮すべきオプションがいくつかあります。メソッドのシグネチャは次のとおりです。

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

3 番目のパラメーター (デフォルトは true) は、応答を非同期で行うかどうかを指定します。これを に設定するとfalse、応答が完了するまで待たなければならず、#send()プログラム全体をブロックする代償を支払うことになります。そのため、待機中もプログラムが応答し続けるように、非同期方式でコーディングします。この非同期性は、イベント リスナー (別名イベント ハンドラー) とコールバック関数を使用することによって実現されます。

応答が到着したら、単純にコンソールにダンプしたいとします。まず、実行したいコールバック関数を作成する必要がありますonload:

function dumpResponse() {
  // `this` will refer to the `XMLHTTPRequest` object that executes this function
  console.log(this.responseText);
}

次に、このコールバックをインターフェイスonloadで定義されたイベントのリスナー/ハンドラーとして設定します。XMLHttpRequest

var request = new XMLHttpRequest();
// Set the event handler
request.onload = dumpResponse;
// Initialize the request
request.open('get', 'https://api.github.com/users/funchal', true)
// Fire away!
request.send()

JSON.parse()データを文字列として受け取るので、何か意味のあることを行うには、文字列を解析する必要があります。あなたが持っている公開リポジトリの数とあなたの名前をデバッグしたいとします。この関数を使用して文字列を JSON に解析し、必要な属性を取得できます。

function printRepoCount() {
  var responseObj = JSON.parse(this.responseText);
  console.log(responseObj.name + " has " + responseObj.public_repos + " public repositories!");
}
var request = new XMLHttpRequest();
request.onload = printRepoCount;
request.open('get', 'https://api.github.com/users/funchal', true)
request.send()
// => Giovanni Funchal has 8 public repositories!

の詳細については、W3C 仕様とMozilla Developer Networkを参照してくださいXMLHttpRequest。

于 2013-08-23T05:19:39.483 に答える