JQuery에서 Ajax사용하기( load() 함수 )

JQuery에서 Ajax 사용하기

 

비동기 자바스크립트와 XML(Ajax)은

단일 페이지 애플리케이션형식으로 동작

웹 페이지를 이루는 요소들 중 부분 업데이트를 위한 기법

 

장점

자원 절약

로딩 시간 감소

자연스러운 표현

 

Ajax기능을 활용하려면 요청을 위한 서버가 필요하므로 Tomcat으로 웹 서버환경을 간단히 설치한다.

설치방법 링크: http://blog.purpleviolet.me/18

 

설치 후 톰캣설치폴더\webapps\ROOT\ajax 폴더를 생성

해당 폴더에 실습 파일을 저장

 

 

예제 코드1(요청과 응답을 받을 페이지)

 

예제 코드2(ajax에 응답할 데이터를 가진 페이지)

 

실행 결과

파일을 그냥 실행시키지 말고 서버를 통해 확인한다.

다음과 같이 로컬 웹서버의 최상위에서 ajax/폴더 안의 자원을 요청하도록

 

불러오기 버튼 클릭 시

ajax/ 폴더 안에 sample.html의 내용 중 id가 p1인 데이터를 불러와

현재 페이지의 id가 data인 요소에 로드(load)한다.

 

 

load() 함수

load() 메서드는 서버로부터 데이터를 불러와 선택된 요소에 넣는다.

 

사용 문법

$(selector).load(URL, data, callback);

 

파라미터

URL: 요청할 서버의 자원 경로

data : 요청에 사용할 데이터

callback : 요청에 대한 응답을 처리할 콜백함수

callback함수의 파라미터

responseTxt: 요청/응답 성공 시 결과 내용을 포함한다.

statusTxt: 요청의 상태를 포함한다.

(success, notmodified, error, timeout, parsererror)

xhr: XMLHttpRequest객체를 포함한다.

 

반환

선택된 요소에 있는 URL로부터 얻은 데이터를 반환

 

위 예제의 load함수 내용을 다음과 같이 수정하여 동일하게 요청해본다.

 

 

요청 결과

페이지 접속

불러오기 클릭

 

응답으로 받아온 결과 데이터

 

요청응답 상태 - 성공

 

요청에 사용한 XMLHttpRequest 객체