본문 바로가기
💻 1. 웹개발_Front end/1-7 Ajax

[Ajax] 05. Ajax 기본형과 설정 값들

by 달님🌙 2021. 10. 6.
반응형

 

1. Ajax 기본형

 

$.ajax({
	settings : 설정 값들
	(서버에 요청할 url, 메소드 방식, 비동기 여부 등등)
});

- Ajax 호출 후 리턴 값은 jqXHR(jquery XMLHTTPRequest) 객체

 

 

2. Ajax 설정 값들

 

$.ajax({
	/*설정 값들 영역*/
    url : 요청할 서비스 url('/list.do'),
    type : 메소드 타입 지정('POST', 'GET', 'PUT', 'DELETE', 기본 값 : 'GET'),
    async : 비동기 방식/동기 방식 지정(true : 비동기 방식, false : 동기 방식),
    data : 서버로 전달할 데이터를 입력.
	    문자열, 배열, 객체 형식 지원
            문자열인 경우 직접 url 인코딩을 해야됨(한글/특수문자 유니코드로 변경)
            ex) "keyword=%EC%98%A4&mode=2"
            [
            	{ name : "keyword", value : "오"},
            	{ name : "keyword", value : "2"}
            ]
            {
            	"keyword" : "오",
                "mode" : 2
            }
    contentType : 서버로 전달할 데이터의 형식 지정
      		  기본 값 : application/x-www-form-urlencoded -> url인코딩된 폼 데이터 형식("keyword=%EC%98%A4&mode=2")
	 	  ex) application/json -> json 타입의 데이터 형식
          
    dataType : 서버로부터 응답받은 데이터의 형식 지정(기본 값 : 자동 추정)
    		xml, json, script, html 등 지정 가능
    statusCode : 서버로부터 전달받은 응답코드 값에 대한 콜백 함수 지정
                 ex) statusCod : {
                      404 : function() {
                          alert("페이지를 찾을 수 없습니다.");
                      },
                      200 : function() {
                          alert("정상 처리되었습니다.");
                      }
                  }
     timeout : 요청 제한시간을 지정.
     		지정한 시간 이내에 응답이 오지않으면 요청을 중단하고 요청시간이 초과됐다는
                timeout 오류를 표출(ms단위로 지정)
                ex) timeout : 1900
     headers : 요청 시 서버로 전달할 헤더 내용 값들 지정.
               HTTP 헤더에 포함되는 내용 지정 가능(요청 url, 메소드 타입, 브라우저 정보, 요청 권한)
               ex) headers : { Authorization : "token값", Accept : "application/json" }
});

 

 

반응형

댓글