자바 스크립트 REST 클라이언트 라이브러리 [닫힘]


117

나에게 (같은 모든 REST 작업을 수행 할 수 있도록 자바 스크립트 라이브러리 있는가 GET, POST, PUTDELETE이상 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/category/ajax/shorthand-methods
Avi Flax

@Avi Flax가 말한 내용을 확장하기 위해 바로 가기를 원하는 경우 자체 PUTDELETE메서드 를 만드는 것은 매우 간단합니다 .
zzzzBov

2
응답 본문을 어떻게 검색합니까? 헤더?
Pantelis Sopasakis 2012 년

@PantelisSopasakis success콜백은 data응답을 포함 할 인수를 받습니다 .
soulseekah

6
기술적으로 이것은 REST 클라이언트가 아니라 HttpClient입니다. 상태를 구동하기 위해 링크 관계와 미디어 유형을 올바르게 사용하는 방법을 보여주는 무언가를 찾고 있습니다. ... 계속 찾고 것이다
피터 맥에 보이

71

훌륭한 jQuery 와 같은 라이브러리를 사용하고 싶을 수도 있지만 , 그럴 필요는 없습니다. 모든 최신 브라우저 는 이름에도 불구하고 XML 표현으로 제한되지 않는 XMLHttpRequest API 를 통해 JavaScript 구현에서 HTTP를 매우 잘 지원합니다. .

다음은 자바 스크립트에서 동기 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를 사용하여 비동기식 요청을 만드는 것도 매우 쉽습니다.

웹에는 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 2018

8

jQuery에는 REST 스타일의 URI 매개 변수 템플릿 이있는 JSON-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

데이터의 자바 스크립트 모델을 제공하는 Backbone.js와 같은 mvc 프레임 워크를 사용할 수도 있습니다. 모델 변경 사항은 REST 호출로 변환됩니다.




당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.