JavaScript RESTクライアントライブラリ[終了]


117

私は(のようなすべてのREST操作を実行できるようにするJavaScriptライブラリがありGETPOSTPUTおよびDELETEオーバーHTTPまたはHTTPS)?

回答:


139

実際には特定のクライアントは必要ありません。ほとんどのライブラリではかなりシンプルです。たとえばjQuery $.ajaxでは、作成するリクエストのタイプを指定してジェネリック関数を呼び出すだけです。

$.ajax({
    url: 'http://example.com/',
    type: 'PUT',
    data: 'ID=1&Name=John&Age=10', // or $('#myform').serializeArray()
    success: function() { alert('PUT completed'); }
});

あなたは置き換えることができますPUTGET/ POST/ DELETEまたは何でも。


10
jQueryには、GETおよびPOSTを使用するためのいくつかの便利なショートカットメソッドも含まれています。api.jquery.com
Avi Flax

@Avi Flaxの発言をさらに詳しく説明すると、ショートカットが必要な場合は、独自のメソッドPUTDELETEメソッドを作成するのは非常に簡単です。
zzzzBov 2011

2
応答の本文をどのように取得しますか?ヘッダー?
Pantelis Sopasakis 2012年

@PantelisSopasakis successコールバックはdata引数を受け取ります。引数には応答が含まれます。
soulseekah

6
技術的には、これはRESTクライアントではなく、HttpClientです。リンク関係とメディアタイプを適切に使用して状態を駆動する方法を示すものを探しています。見続けます...
Peter McEvoy

71

優れたjQueryなどのライブラリを使用する必要がある場合もありますが、必ずしもそうである必要はありません。最近のすべてのブラウザは、その名前にもかかわらず、XML表現に限定されないXMLHttpRequest APIを介して、JavaScript実装でHTTPを非常によくサポートしています。。

JavaScriptで同期HTTP PUTリクエストを行う例を以下に示します。

var url = "http://host/path/to/resource";
var representationOfDesiredState = "The cheese is old and moldy, where is the bathroom?";

var client = new XMLHttpRequest();

client.open("PUT", url, false);

client.setRequestHeader("Content-Type", "text/plain");

client.send(representationOfDesiredState);

if (client.status == 200)
    alert("The request succeeded!\n\nThe response representation was:\n\n" + client.responseText)
else
    alert("The request did not succeed!\n\nThe response status was: " + client.status + " " + client.statusText + ".");

この例は、同期が少し簡単になるため同期ですが、このAPIを使用して非同期要求を作成することも非常に簡単です。

Webには、XmlHttpRequestの学習に関する何千ものページと記事があります。これらは通常、AJAXという用語を使用しています–残念ながら、特定のものはお勧めできません。あなたは見つけることがあり、このリファレンスはいえ便利。


11

私が作ったばかりのこのjQueryプラグインを使用できます:) https://github.com/jpillora/jquery.rest/

基本的なCRUD操作、ネストされたリソース、基本的な認証をサポート

  var client = new $.RestClient('/api/rest/');

  client.add('foo');
  client.foo.add('baz');
  client.add('bar');

  client.foo.create({a:21,b:42});
  // POST /api/rest/foo/ (with data a=21 and b=42)
  client.foo.read();
  // GET /api/rest/foo/
  client.foo.read("42");
  // GET /api/rest/foo/42/
  client.foo.update("42");
  // PUT /api/rest/foo/42/
  client.foo.delete("42");
  // DELETE /api/rest/foo/42/

  //RESULTS USE '$.Deferred'
  client.foo.read().success(function(foos) {
    alert('Hooray ! I have ' + foos.length + 'foos !' );
  });

バグを発見したり、新機能が必要な場合は、リポジトリの「問題」ページに投稿してください。


2
私はあなたがそれをどれほど単純にしたかが好きです。必要なときに追加のオプションをサポートしているように見えますが、邪魔にならないようにします。
Stradas 2013年

ワオ。あなたはとても多くのオープンソースを共有しました。尊敬。
wonsuc

8

jQueryには、JSON-RESTプラグインがあり、URIパラメーターテンプレートのRESTスタイルを備えています。その説明によると、使用例は次のとおり$.Read("/{b}/{a}", { a:'foo', b:'bar', c:3 })です。「/ bar / foo?c = 3」へのGETになります。


6

参考のために、Manual:RESTful Web Servicesで説明されているように、ExtJSについて追加したいと思います。つまり、メソッドを使用してGET、POST、PUT、DELETEを指定します。例:

Ext.Ajax.request({
    url: '/articles/restful-web-services',
    method: 'PUT',
    params: {
        author: 'Patrick Donelan',
        subject: 'RESTful Web Services are easy with Ext!'
    }
});

Acceptヘッダーが必要な場合は、すべてのリクエストのデフォルトとして設定できます。

Ext.Ajax.defaultHeaders = {
    'Accept': 'application/json'
};

3

データのJavaScriptモデルを提供するBackbone.jsのようなmvcフレームワークを使用することもできます。モデルへの変更はREST呼び出しに変換されます。




弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.