Ruby on Rails-AJAX

Ajax는 A동기 JavaScript 및 XML. Ajax는 단일 기술이 아닙니다. 여러 기술의 모음입니다. Ajax는 다음을 통합합니다-

웹 페이지의 마크 업을위한 XHTML
스타일링을위한 CSS
DOM을 사용한 동적 표시 및 상호 작용
XML을 사용한 데이터 조작 및 교환
XMLHttpRequest를 사용한 데이터 검색
이 모든 것을 하나로 묶는 접착제로서의 JavaScript

Ajax를 사용하면 전체 페이지의 내용을 새로 고칠 필요없이 웹 페이지에 대한 데이터를 검색 할 수 있습니다. 기본 웹 아키텍처에서 사용자는 링크를 클릭하거나 양식을 제출합니다. 양식이 서버에 제출 된 다음 응답을 다시 보냅니다. 그러면 새 페이지에 사용자에 대한 응답이 표시됩니다.

Ajax 기반 웹 페이지와 상호 작용할 때 백그라운드에서 Ajax 엔진을로드합니다. 엔진은 JavaScript로 작성되었으며 그 책임은 웹 서버와 통신하고 사용자에게 결과를 표시하는 것입니다. Ajax 기반 양식을 사용하여 데이터를 제출할 때 서버는 서버의 응답을 포함하는 HTML 조각을 반환하고 전체 페이지를 새로 고치는 것과 반대로 새로운 데이터 또는 변경된 데이터 만 표시합니다.

AJAX에 대한 자세한 내용은 AJAX 자습서를 참조하십시오.

Rails가 Ajax를 구현하는 방법

Rails에는 Ajax 작업을 구현하는 방법에 대한 간단하고 일관된 모델이 있습니다. 브라우저가 초기 웹 페이지를 렌더링하고 표시하면 다른 사용자 작업으로 인해 새 웹 페이지 (기존 웹 애플리케이션과 같은)가 표시되거나 Ajax 작업이 트리거됩니다.

Some trigger fires −이 트리거는 사용자가 버튼 또는 링크를 클릭하거나, 사용자가 양식이나 필드의 데이터를 변경하거나, 주기적 트리거 (타이머 기반) 일 수 있습니다.
The web client calls the server− JavaScript 메서드 인 XMLHttpRequest 는 트리거와 관련된 데이터를 서버의 액션 핸들러로 보냅니다. 데이터는 확인란의 ID, 입력 필드의 텍스트 또는 전체 양식 일 수 있습니다.
The server does processing − 서버 측 액션 핸들러 (Rails 컨트롤러 액션)-데이터로 작업을 수행하고 웹 클라이언트에 HTML 조각을 반환합니다.
The client receives the response − Rails가 자동으로 생성하는 클라이언트 측 JavaScript는 HTML 조각을 수신하고이를 사용하여 현재 페이지 HTML의 특정 부분 (종종 <div> 태그의 내용)을 업데이트합니다.

이 단계는 Rails 애플리케이션에서 Ajax를 사용하는 가장 간단한 방법이지만 약간의 추가 작업을 통해 서버가 Ajax 요청에 대한 응답으로 모든 종류의 데이터를 반환하도록 할 수 있으며 브라우저에서 사용자 정의 JavaScript를 만들어 더 많은 작업을 수행 할 수 있습니다. 관련 상호 작용.

AJAX 예

이 예제는 scaffold를 기반으로 작동하고 Destroy 개념은 ajax를 기반으로 작동합니다.

이 예에서는 조랑말 테이블에 대한 작업을 제공, 나열, 표시 및 생성합니다. 스캐 폴드 기술을 이해하지 못했다면 먼저 이전 장을 살펴본 다음 AJAX on Rails를 계속 진행하는 것이 좋습니다.

응용 프로그램 만들기

애플리케이션 생성부터 시작하겠습니다. 다음과 같이 수행됩니다.

rails new ponies

위의 명령은 응용 프로그램을 생성하므로 이제 cd 명령과 함께 사용하여 app 디렉토리를 호출해야합니다. 응용 프로그램 디렉토리에 들어가면 scaffold 명령을 호출해야합니다. 다음과 같이 수행됩니다-

rails generate scaffold Pony name:string profession:string

위의 명령은 이름과 직업 열이있는 비계를 생성합니다. 다음 명령으로 데이터베이스를 마이그레이션해야합니다.

rake db:migrate

이제 다음 명령으로 Rails 애플리케이션을 실행하십시오.

rails s

이제 웹 브라우저를 열고 URL을 http : // localhost : 3000 / ponies / new로 호출하면 출력은 다음과 같습니다.

Ajax 생성

이제 적절한 텍스트 편집기로 app / views / ponies / index.html.erb를 엽니 다. 파괴 라인을 : remote => true, : class => 'delete_pony'로 업데이트합니다. 마지막으로 다음과 같이 보입니다.

destroy.js.erb 파일을 만들고 다른 .erb 파일 옆에 놓습니다 (app / views / ponies 아래). 다음과 같이 보일 것입니다.

이제 destroy.js.erb에 아래와 같이 코드를 입력하십시오.

$('.delete_pony').bind('ajax:success', function() {
   $(this).closest('tr').fadeOut();
});

이제 app / controllers / ponies_controller.rb에있는 컨트롤러 파일을 열고 다음과 같이 destroy 메소드에 다음 코드를 추가하십시오.

# DELETE /ponies/1
# DELETE /ponies/1.json
def destroy
   @pony = Pony.find(params[:id])
   @pony.destroy
   
   respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end
   
end

마지막으로 컨트롤러 페이지는 표시된 이미지와 같습니다.