AJAX가 존재하는 이유를 이해하여 Rails 프로젝트에서 AJAX를 사용하는 방법을 더 잘 이해할 수 있습니다.
웹사이트를 방문하면 어떻게 됩니까?
서버에서 페이지가 로드됩니다. 그러나 새로운 정보를 보려면 페이지를 새로고침하여 업데이트하거나 링크를 클릭하여 다른 페이지를 방문해야 합니다.
이것은 동기식 흐름 .
새 데이터는 서버에서 새 페이지를 요청할 때만 표시됩니다.
하지만…
이 페이지를 새로고침하고 싶지 않다면 어떻게 하시겠습니까?
백엔드에서 데이터를 가져오려면 어떻게 해야 하나요? , 현재 페이지의 일부를 업데이트할 수 있도록 원할 때마다?
여기에서 AJAX가 등장합니다.
AJAX는 비동기 자바스크립트 및 XML을 나타냅니다. .
이것은 웹 프레임워크와 독립적인 기술이지만 이 기사에서 배우게 될 것처럼 Rails는 특히 이를 잘 지원합니다.
AJAX를 앱에 추가하면 앱이 더 복잡해집니다.
직접 AJAX 요청
AJAX에는 Javascript를 사용하여 브라우저에서 만드는 요청과 Ruby 앱에서 처리하는 응답의 두 부분이 있습니다.
AJAX 요청을 할 수 있습니다. 일반 자바스크립트로.
하지만 많은 상용구 코드가 필요하기 때문에 일반적으로 jQuery와 같은 자바스크립트 라이브러리를 통해 이 작업을 수행합니다.
jQuery 요청은 다음과 같습니다. :
$.get( "/vegetables", function(data) {
alert("Vegetables are good for you!");
});
그러나 Rails 5.1 jQuery는 기본적으로 사용할 수 없기 때문에(그러나 다시 추가할 수 있습니다).
<블록 인용>
참고 :InvalidAuthenticityToken을 받게 됩니다. jQuery POST 요청을 수행할 때 오류가 발생하면 csrf-token을 제출해야 함을 의미합니다. 보안 조치로 현재 페이지에서. Rails.ajax 사용 이 작업을 자동으로 수행합니다.
해결책이 있습니다!
Rails에는 자체 AJAX 기능이 포함되어 있습니다. :
Rails.ajax({
url: "/books",
type: "get",
data: "",
success: function(data) {},
error: function(data) {}
})
이것은 여전히 브라우저의 요청 측에서 온 것임을 기억하십시오.
이것은 자바스크립트 코드임을 의미합니다. .
Rails에서 이 AJAX 기능은 "Unobtrusive JavaScript" 또는 줄여서 "UJS"라고 하는 것으로 제공됩니다.
AJAX로 부분 업데이트
AJAX에서 가져온 데이터로 페이지의 일부만 업데이트하려는 경우에는 대부분 두 가지 옵션이 있습니다.
- 요소를 업데이트하는 Javascript + ERB 보기를 작성할 수 있습니다.
- 새 HTML을 문자열로 사용하여 컨트롤러에서 JSON 응답을 반환한 다음 자바스크립트를 사용하여 요소를 업데이트할 수 있습니다.
세 번째 옵션도 있습니다.
데이터만 JSON으로 반환하는 작업이 포함됩니다. , 그런 다음 해당 데이터를 사용하여 Javascript로 HTML 요소를 생성합니다.
여기에서 React와 같은 JS 프레임워크가 등장합니다.
제 생각에는 많은 불필요한 복잡성이 추가됩니다. .
하지만 우리는 이것을 일반 자바스크립트로 처리할 수 있습니다!
옵션 1과 2입니다.
지금은 그대로 유지합시다 🙂
자바스크립트 보기 예 :
Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")
<블록 인용>
j escape_javascript의 별칭입니다.
jQuery 예 :
$('.random-number').html("<%= j (render partial: 'random') %>")
html 둘 다 &innerHTML 대상 요소의 내용을 바꿉니다.
전체를 바꾸는 대신 새 요소를 목록에 추가(jQuery)할 수도 있습니다.
이 코드를 확장자가 .js.erb인 파일에 넣습니다. , 현재 작업의 이름(예:create.js.erb ) 및 보기 폴더 내부.
컨트롤러에서 다른 보기와 마찬가지로 이 보기를 렌더링할 수 있습니다.
지금 :
AJAX를 호출하면 이 자바스크립트 코드가 자동으로 실행되고 HTML이 업데이트됩니다.
두 번째 옵션을 살펴보겠습니다.
컨트롤러 코드는 다음과 같습니다. :
render json: { html: render_to_string(partial: 'random') }
자바스크립트 코드에서 :
Rails.ajax({
url: "/books",
type: "get",
success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
})
이것이 다른 방법입니다!
무엇을 사용해야 하나요?
DHH가 가장 좋아하는 방법은 "SJR"(Server-Generated Javascript)이라고 부르는 첫 번째 방법입니다.
이것이 Rails가 원하는 방식이지만 둘 다 자유롭게 시도해 보십시오(SJR &render_to_string ) 자신에게 가장 적합한 것을 확인하십시오.
JS 보기에 HAML을 사용하는 방법
알겠습니다.
HAML 사용자라고 가정해 보겠습니다.
이 SJR을(를) 사용할 수 있습니까? 기술 및 렌더링 .js.haml 조회수?
네!
예시 :
- content = j (render partial: "random")
Rails.$('.random-number')[0].innerHTML = ("#{content}")
ERB 버전보다 약간 못생겼지만 작동합니다.
페이지를 새로 고치지 않고 Rails 양식을 제출하는 방법
AJAX를 사용하여 양식을 제출하려면 AJAX 요청을 작성하지 않고도 이 작업을 수행할 수 있습니다.
Rails가 알아서 처리해 드립니다.
어떻게?
remote: true 사용 form_for 옵션 .
예시 :
<%= form_for @fruit, remote: true do |f| %> <%= f.label :name, 'Fruit' %> <%= f.text_field :name %> <%= f.submit 'Create' %> <% end %>
이제 "만들기"를 클릭하면 Rails가 AJAX 요청을 보내고 페이지가 다시 로드되지 않습니다.
확인 오류를 표시하려는 경우 자바스크립트 보기(.js.erb 파일) 현재 오류를 새 오류로 대체합니다.
"AJAX로 부분 업데이트"의 예와 같습니다.
Btw, 이 remote 옵션은 링크와 함께 사용할 수도 있으므로 AJAX delete를 수행할 수 있습니다. 요청합니다.
예 :
<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }
자바스크립트 보기를 사용하여 응답을 처리할 수 있습니다.
HTML 요청(페이지 새로고침에서 오는)과 AJAX 요청을 모두 처리하려면 respond_to와 같은 것을 사용해야 합니다. 방법.
예 :
respond_to do |f|
f.html { redirect_to :index }
f.js
end
이 예에서는 Turbolinks가 이를 처리하도록 하는 것이 더 쉬울 수 있습니다.
여전히 AJAX 요청 및 redirect_to를 수행할 수 있습니다. 컨트롤러에서(respond_to 제외) ) 페이지를 다시 로드하지 않고 Turbolinks가 페이지의 내용을 대체합니다.
AJAX가 작동하지 않습니까? 다음은 몇 가지 팁입니다.
AJAX 요청이 작동하지 않으면 디버깅을 해야 합니다.
먼저 브라우저 개발자 도구를 엽니다.
자바스크립트 오류가 있는지 콘솔 패널에서 확인하려는 경우 .
수정하세요.
또한 타겟팅하려는 CSS 선택기가 올바르고 오타가 없는지 확인하세요.
그런 다음 rails 로그를 확인하세요. 모든 오류에 대해.
그런 다음 올바른 보기가 렌더링되고 있는지 확인하십시오.
이 프로세스를 따르면 AJAX 요청이 작동하지 않는 이유를 찾아 해결할 수 있습니다.
요약
비동기 요청을 할 수 있는 웹 개발 기술인 AJAX에 대해 배웠습니다!
Rails에서 이것을 구현하는 방법도 배웠습니다. AJAX는 일반(JS 프레임워크가 아닌) Rails 앱이 작동하도록 하는 데 필요하지 않습니다. , 하지만 도구 상자에 있으면 도움이 됩니다.
이 기사를 공유하는 것을 잊지 마세요. 더 많은 사람들이 혜택을 받을 수 있도록 🙂
읽어주셔서 감사합니다!