[JavaScript] AJAX (Asynchronous JavaScript and XML)

AJAX

- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능

- 클라이언트와 서버간에 XML 데이터를 주고받는 기술

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
// 출처: https://www.w3schools.com/jquery/jquery_get_started.asp

---

장점 😎👍

- 페이지 이동없이 고속으로 화면을 전환할 수 있다.

- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.

- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

- 플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있다.

 

단점 😣👎

- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.

- HTTP 클라이언트의 기능이 한정되어 있다.

- 페이지 이동없는 통신으로 인한 보안상의 문제

- 지원하는 문자집합(Charset)이 한정되어 있다.

- 스크립트로 작성되므로 디버깅이 용이하지 않다.

- 요청을 남발하면 역으로 서버 부하가 늘 수 있음.

- 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

---

JQuery를 이용한 AJAX의 사용

$.ajax({
    type : 'post',           // 타입 (get, post, put 등등)
    url : '/test',           // 요청할 서버url
    async : true,            // 비동기화 여부 (default : true)
    headers : {              // Http header
      "Content-Type" : "application/json",
      "X-HTTP-Method-Override" : "POST"
    },
    dataType : 'text',       // 데이터 타입 (html, xml, json, text 등등)
    data : JSON.stringify({  // 보낼 데이터 (Object , String, Array)
      "no" : no,
      "name" : name,
      "nick" : nick
    }),
    success : function(result) { // 결과 성공 콜백함수
        console.log(result);
    },
    error : function(request, status, error) { // 결과 에러 콜백함수
        console.log(error)
    }
})

---

AJAX URL 파라미터로 데이터 보내기

 

1. URL뒤에 직접적으로 파라미터로 데이터를 넣어주는 방법

<script>
function selectCataFn(){
	var val1 = "";
	var val2 = "";

	val1 = $("#selectbox1").val(); // 이 부분
	val2 = $("#selectbox2").val(); // 이 부분
    
  $.ajax({
    url:"이동경로?&val1="+val1+"&val2="+val2, // 이 부분
    type:"get",
    datatype:"html",
    success:function(data){
  	  $("#load").html(data);
    }	
  });
}
</script>
출처: https://record-than-remember.tistory.com/entry/ajax-uri파라미터로-데이터-보내기 [<WEB LOG>:티스토리]

 

2. <select>의 값을 가져와서 {"키","값"} 의 형태로 만들어 data로 넘겨주기

<script>
function selectCataFn(){
	var val1 = "";
	var val2 = "";

	val1 = $("#selectbox1").val();
	val2 = $("#selectbox2").val();

	var allData = { "val1": val1, "val2": val2 }; // 이 부분

  $.ajax({
    url:"이동경로",
    type:"get",
    data:allData, // 이 부분
    datatype:"html",
    success:function(data){
  	  $("#load").html(data);
    }	
  });
}
</script>
출처: https://record-than-remember.tistory.com/entry/ajax-uri파라미터로-데이터-보내기 [<WEB LOG>:티스토리]

---

참고 및 출처:

https://ko.wikipedia.org/wiki/Ajax

Ajax - 위키백과, 우리 모두의 백과사전

 

https://scoring.tistory.com/entry/AJAX%EB%9E%80-JQuery%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-AJAX%EC%82%AC%EC%9A%A9%EB%B2%95#AJAX%---Asynchronous%--Javascript%--And%--XML-%--%EB%-E%--%--%EB%AC%B-%EC%--%--%EC%-D%B-%EA%B-%--%-F

 

https://velog.io/@isabel_noh/Ajax-URL-parameter%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B3%B4%EB%82%B4%EA%B8%B0

Ajax - URL parameter로 데이터 보내기

 

https://record-than-remember.tistory.com/entry/ajax-uri%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B3%B4%EB%82%B4%EA%B8%B0

Ajax / URL 파라미터로 데이터 보내기

 

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started