ajax 기본
1. jQuery 플러그인
[https://cdnjs.com/에서 최신버전을 다운받으세요.]
Ajax는 비동기 처리 모델(=넌블로킹)을 사용
즉, 사용자는 웹 브라우저가 데이터를 로드하는 동안 기다리지 않고
다른 일을 할 수 있으므로 더욱 빠른 사용자 경험을 제공할 수 있다.
Ajax 동작 방식
요청 - 서버 동작 - 응답의 순서로 동작한다.
1. 요청 : 브라우저는 서버에 정보를 요청한다.
마치 폼처럼 데이터를 서버로 전송한다고 생각하면 이해가 빠를 것 같다.
브라우저는 ajax 요청을 담당하는 XMLHttpRequest라는 객체를 구현하고 있다.
일단 요청을 전송하고 나면, 브라우저는 서버의 응답을 더이상 기다리지 않는다.
2. 서버의 동작 : 서버는 응답으로 데이터를 전달한다 ( HTML, XML, JSON 등으로 )
서버는 ajax 요청을 전달받으면 HTML이나 JSON, XML 형식의 데이터를 전달한다.
PHP같은 데이터를 가공해 다시 브라우저로 다시 전달하는 것이다. 위의 데이터 타입으로.
3. 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.
서버가 요청에 대한 응답을 완료하면 브라우저에서는 이벤트가 발생한다.
이 이벤트는 데이터를 처리하여 페이지의 일부로 변환하는 자바스크립트 함수를 호출한다.
JSON 자바스크립트 객체 표현식
데이터는 JSON형식으로 전달되기도 한다.
이 표현식은 객체 표현식과 매우 유사하지만 객체를 정의하지 않는다.
// JSON 객체 표현식
{
"name" : "hanheesong, 한희송, 韓希松"
"age" : 20,
"isPerson" : true
}
JSON 데이터는 객체 표현식과 거의 똑같이 생겼지만, 순수 텍스트로 구성된 데이터로 객체가 아니다.
거의 차이점이 없어 보일 수 있겠지만, HTML 역시 순수한 텍스트이며, 브라우저는 이것을 DOM 객체로 전환한다.
실제 객체는 네트워크를 통해 전송할 수 없다. 그보다는 브라우저에 의해 객체로 변환될 수 있는 텍스트를 전달하는 것이다.
JSON 데이터 다루기
자바스크립트의 JSON 객체는 JSON 데이터를 자바스크립트 객체로 변환할 수 있다.
또한, 자바스크립트 객체를 문자열로 변환하기도 한다.
{
"friends" : [
{"name":"김장미", "age":20, "selfie":"img/selfie_jm.jpg"},
{"name":"계정아", "age":20, "selfie":"img/selfie_ja.jpg"},
{"name":"이승주", "age":20, "selfie":"img/selfie_sj.jpg"}
]
}
세개의 친구를 표현하고 있으며 friends라는 배열에 저장된다.
배열은 대괄호를 이용하며, 3 개의 객체를 저장한다.
☞ JSON.stringify()
자바스크립트 객체를 JSON형식의 문자열로 변환한다.
이를 이용해 자바스크립트 객체를 브라우저로부터 다른 애플리케이션으로 전송할 수 있다.
☞ JSON.parse()
JSON데이터를 가진 문자열을 처리한다.
이메서드는 JSON 데이터를 브라우저가 사용할 수 있는 자바스크립트 객체로 변환한다.
ajax에 대한 기본 설명을 마치고,
jQuery는 Ajax 요청을 처리하기 위한 여러 메서드를 제공합니다.
이번에는 jQuery 플러그인을 사용해 Ajax를 사용해봅시다.
요청
.load(), $.get(), $.post(), $.getJSON(), $getScript(), $.ajax()
이 메서드들은 모두 jQuery 객체의 메서드이기 때문에 $.와 함께 호출할 수 있다.
위 메서드들은 서버로 요청을 전송하기만 하기 때문에 서버로부터의 응답을 객체집합에 자동으로 적용해주지 않는다.
$기호 다음에 셀렉터를 사용하지 않는 이유가 바로 이 때문이다.
응답
.load() 메서드를 이용하면 서버로부터 전달받은 HTML은 jQuery 객체집합에 적용된다.
다른 메서드의 경우에는 jqXHR객체를 통해 리턴된 데이터를 어떻게 처리할 것인지를 직접 정의해야 한다.
jqXHR : jQuery에서 서버로부터 리턴된 데이터를 손쉽게 처리할 수 있는 객체를 제공해줌
☞jqXHR 속성
resposeText : 서버로부터 리턴된 텍스트 데이터를 가져온다.
responseXML : 서버로부터 리턴된 XML 데이터를 가져온다.
status : 상태 코드를 가져온다.
statusText : 상태 설명 문자열을 가져온다.
☞jqXHR 메서드
.done() : 요청이 성공적으로 처리되었을 때 실행될 코드를 지정
.fail() : 요청이 실패했을 때 실행될 코드를 지정한다.
.always() : 요청의 성공/실패 여부에 관계없이 항상 실행될 코드를 지정한다.
.abort() : 서버와의 커뮤니케이션을 취소한다.
$('1)셀렉터').load('2)페이지URL 3)셀럭터');
1) 셀렉터
요소를 찾아 jQuery 객체를 생성한다.
2) 페이지 URL
로드하고자 하는 HTML 페이지의 URL을 지정한다.
2) 페이지 URL과 3) 셀렉터 사이에 반드시 공백 문자로 구분해야한다.
3)셀렉터
페이지에 보일 HTML의 일부를 지정한다.
요소를 다시 선택하여 해당 요소만을 페이지에 표시한다.