2023 - 07 - 02 Ajax 매서드 (JQuery)

https://take-it-into-account.tistory.com/66

https://devmg.tistory.com/222

Ajax는 Asynchronous JavaScript and XML의 줄임말로, 자바스크립트와 XML을 이용해서 비동기 식으로 서버와 통신한다. Ajax는 프로그램 언어가 아니다.

 

 

$.ajax({
         url : requestURL (필수입력)
         type: 'GET' (통신방식 (POST, GET) 등을 지정).
         async: true,
         data: JSON.stringify(requestParam), (서버로 보낼 데이터를 입력)
         dataType: "json" 통신의 결과로 넘어올 데이터 종류를 지정한다.
         timeout: 10000, (선택사항)
         contentType: "application/json"
         beforeSend:function(){
         	$(`.wrap-loading`).removeClass(`display-none`);
         },
         complete:function(){
         	$(`.wrap-loading`).addClass(`display-none`);
         },
         success: function(data) {
          //  전송에 성공하면 실행될 코드;
          if(successFunction!=undefined){
          	successFunction(data)};
        },
        error:function(request, status, error){
          // 전송에 실패하면 실행될 코드;
          alert("code:" + request.status + "₩n" + "message:" + request.responseText 
          + "₩n" + "error:" + error);
          
          const err = JSON.parse(request, responseText);
          alert(err.resData[0].errorMsg){
          	errorFunction();
          }
          
          $(`.wrap-loading`).addClass(`display-none`);
          }
          fail : function(){
          	alert("인터넷 연결 상태를 확인해주세요.")
            $(`.wrap-loading`).addClass(`display-none`);
          }
        });
     }
          
    });

async (비동기 통신)

true :기본값. 비동기(요청을 보낸 후 응답결과와는 상관없이, 다음 방식이 동작함)

false: 동기. (요청을 보낸 후 응답결과를 받아야지만 다음 동작이 이뤄짐)

 

contentType (전송헤더의 타입)

서버에 데이터를 보낼 때 사용 content-type의 헤더 값

application/json;  charset-utf-8이 흔히 쓰임.

 

 

dataType (서버에서 어떤 타입을 받을지 정의)

text, html, xml, json, jsonp, and script 등 있음.

{"success":true} 와 같은 구조의 값을 받으려면 dataType: "json"으로 작성해야 함.

"success"와 같은 문자열 값을 받으려면 dataType: "test"로 작성

<div> SUCCESS! </div> 같은 결괏값을 받을면 dataType: "html"로 작성

 

 

timeout (요청시간 제한)

제한시간 (밀리초) 설정. 제한시간 내 요청 미완료 시 요청 취소되거나 error콜백이 정의되어 있다면 호출됨

 

 

type (HTTP 통신의 종류)

HTTP 통신의 종류를 설정. 기본값은 "GET"

GET, POST, PUT, DELETE 등이 있음.

RESTful에 "PUT" 또는 "DELETE"를 지정할 수 있지만 모든 브라우저가 지원하는 것은 아님.

 

 

complete (function)

Ajax통신 완료될 때 호출되는 함수. success나 error가 호출된 후 호출됨.

 

beforeSend (function)

Ajax 요청 전에 실행되는 함수. 반환값을 false로 설정하면 Ajax 전송 취소

 

error (function)

Ajax 통신 실패 시 호출되는 콜백함수

 

success (function)

Ajax 통신에 성공할시 호출되는 콜백함수

함수의 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며, dataType 프로퍼티에 명시한 형태로 구성되고, 두 번째 매개변수는 상태값을 나타내는 문자열이며 항상 success로 나타낸다.

 

JSON.stringify

Json을 string(문자열)형태로 변환

 

JSON.parse

string(문자열)을 Json 형태로 변환

 

 

 

<script>
 // request라는 id를 가진 버튼 클릭 시 실행.
$("#request").click(function(){
	const params = {
		name : $("#name").val(),  // id앞에는 #, class앞에는 . 
		gender : $("gender").val(),
		age : $("age").val(),
		phonenumber : $("phonenumber").val(),
})

// ajax 통신

$.ajax({
	type: "POST",
	url: "/test/ajax",
	data: params,
	success: function(res){
	alert(res.code) // 응답코드>0000
	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
	alert("통신 실패")
	}
	})
});
</script>