DEVLOG
[AJAX] $.ajax()메소드와 옵션 본문
AJAX
Ajax란?
일단 데이터를 사용해보기전에 Ajax에 대해 알아보자면...
Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다. 그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.
http://www.tcpschool.com/ajax/ajax_jquery_ajax
제이쿼리는 Ajax와 관련된 다양하고 편리한 메소드를 많이 제공하는데 가장 핵심이 되고 많이 사용하게 되는
$.ajax()메소드에 대해 정리해보고자 한다!
그 외의 메소드들은 여기서 확인해볼 수 있다.
$.ajax()메소드
$.ajax()메소드는 비동기식 Ajax를 이용하여 HTTP요청을 전송하는 메소드이며 원형은 다음과 같다.
$.ajax([옵션])이제 옵션으로 사용되는 값들에 대해 알아보자!
자주 쓰이는 대표적인 값들만 정리해볼 예정이라... 다양한 옵션에 대해 공부해보고 싶다면 여기서 확인해볼 수 있다.
$.ajax({
url: ,//요청할 URL
type: ,//전송방식
success: ,//성공시 실행되는 콜백함수
error: ,//실패시 실행되는 콜백함수
...
})url
default : 현재페이지
type : String
요청할 URL
이번에는 ajax를 사용해 외부 페이지에서 값들을 가져오는식으로 사용할거라 여기서 url은 정보를 저장되어 있는, 정보를 추출할 외부 페이지를 의미한다!
type
default : 'get'
type : String
전송방식
데이터 전송방식을 get과 post중에 선택한다.
get vs post
get과 post의 차이를 간단하게 정리해보고 넘어가자면
get은 서버로부터 정보를 조회하기 위한 것, post는 리소스를 생성/변경하기 위한 것이라고 생각하면 된다!
get요청은 데이터를 body에 담지않고, 쿼리스트링을 통해 url에 포함하여 값을 전송하게 된다.
post요청은 get과 달리 대용량 데이터를 전송할 수 있고, 데이터가 Body에 담겨 전송되기 때문에 get보다 보안적인면에서 보다 안전하..다고 생각할 수 있지만! 개발자도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화해서 전송해야한다.
이번에는 ajax를 사용해 단순히 정보조회만 해볼 예정이라 get방식을 써볼 예정이다!
success
type:function(Anything data, String textStatus jqXHR jqXHR)
jqXHR이 뭐야.....................;;;;;
요청 성공시 실행되는 콜백함수
요청성공시에 실행할 함수를 안에 적어주면된다!
데이터를 사용하려고 ajax를 써보는 거니까 데이터를 사용하려면 파라미터를 넣어주고 그 값을 이용해주면 된다.
예를 들어 이렇게!
...
success : function(data){
data["~~~"].forEach(....)
},
...파라미터 안에 이름은 data가 아닌 다른 값으로 써도 무방하지만 통일성을 위해 data로 써줄 예정이다!
error
type:function(jqXHR jqXHR, String textStatus, String errorThrown)
jqXHR이 뭐야.....................;;;;;
요청 실패시 실행되는 콜백함수
success와 반대로 요청실패시에 실행할 함수를 안에 적어주면 된다!
statusCode
success, error처럼 성공과 실패만 판단하는 방법도 있지만 이를 조금 더 디테일하게 판단할 수 있다.
전달받는 값의 status를 읽어와서 그 상태에 따라 각각 다른 실행을 시켜주는 것이다!
단순히 success, error만 판단하는 것보다 더 다양하게 표현할 수 있어서 좋은 것 같다.
이때 주로 사용되는 것은 200, 400, 404이다.
200 : 에러없이 성공적으로 처리
400 : Bad Request로써, 요청 실패-문법상 오류가 있어서 서버가 요청 사항을 이해하지 못함
404 : Not Found, 문서를 찾을 수 없음->클라이언트가 요청한 문서를 찾지 못한 경우에 발생함 (URL을 잘 살펴보기)
그 외의 에러에 해당하는 것은 error에서 동일하게 처리하면 된다.
$.ajax({
url:"~~",
type:"POST",
data:{
category: categoryVal,
branch: branchVal,
date_start: startDateVal,
date_end: endDateVal
},
statusCode:{
200:(args) => {
~~
},
400:(err)=>{
~~
},
404:(err)=>{
~~
}
},
error:(err) => {
if(err.status !== 400 && err.status !== 404) alert("ERROR!!");
}
});
이제 $.ajax를 활용하여 데이터 추출해오는 실습을 해보자~~
[jQuery] ajax로 api데이터 읽어오기
동적으로 변하는 option값 먼저 첫번째 select를 선택시 그 값에 따라 두번째 select의 option이 동적으로 변하는 것을 만들어보자~ var selectedWidth = $('#sel1 option:selected').val(); $("#sel2").find("op..
mesonia.tistory.com
[AJAX] ajax로 api데이터 읽어오기 (2) - jQuery를 javascript로 바꾸기
mesonia.tistory.com/59 [AJAX] ajax로 api데이터 읽어오기 동적으로 변하는 option값 먼저 첫번째 select를 선택시 그 값에 따라 두번째 select의 option이 동적으로 변하는 것을 만들어보자~ var selectedWidth..
mesonia.tistory.com
