홈페이지를 만들다보면, 단순 페이지 이동이 아닌, 페이지내에서의 변화나, DB들을 가져오는 경우 등이 있다. 그럴 경우 Ajax 라는 함수를 쓰는데, 불리는건 에이작스, 아작스 등.. 취향에 따라 부르는 것 같다.
에이작스 개념을 정리하기전, 나같은 경우는 load와 Ajax의 차이점을 크게 생각하지 못했다.
레이어팝업의 경우 나는 load를 해서 불러오기도 하는데 불러오긴 Ajax도 마찬가지 아닐까? 란 생각에서 이다.
load의 경우, 불러오기만을 뜻한다.
Ajax의 경우, 데이터값을 불러오기 또는 보내기도 가능하다.
load의 경우, 불러온 후 success function과 같은 이벤트가 없다.
Ajax의 경우, success, send, error, complete, start function을 만들 수 있다.
간략하게 위와 같이 정리가 가능하다. 이제 load와 Ajax의 차이점을 알았으니, 기본 개념 정리를 해보자.
Ajax 통신이란 무엇인가. 이것을 비동기식 통신(페이지 전환이 없는)이라고 한다.
$.ajax({
type: “post”, // 전송타입 post or get
url: “test.html”, // 전송 url
timeout: “1000”, // 요청에 대한 제한시간
data: “사용자임의작성”, // 요청후 리턴 값 or 보내줄 값
dataType: “JSON”, // 리턴하는 데이터 타입 예) json,xml,html,scrirpt,text ..
async: “true”, // 비동기(true) or 동기(false) 선택
cache: “flase”, // 브라우저에 의해 요청되는 페이지를 캐시 유무를 선택
global: “true”, // 전역함수 활성 여부 선택
success: function(data){
성공시 나타나는 이벤트
},
beforeSend: function(data){
요청전 나타나는 이벤트.
},
Complete: function(data){
완료후 나타나는 이벤트
},
error: function(data){
에러시 나타나는 이벤트
}
})
위의 규칙(?)을 토대로 작성 후, 원하는 함수 (클릭시… 등등) 내에 넣으면 된다.