JQuery를 이용한 AJAX (비동기 통신) vs Promise 기반의 Axios

※ JQuery

api.jquery.com/category/ajax/

Ajax | jQuery API Documentation

1. jQuery.ajax - Perform an asynchronous HTTP (Ajax) request.

▶  jQuery.ajax(url [, settings])

▶  jQuery.ajax([settings]) ★★★

url의 Type : String

settings 의 Type: PlainObject 는 {...} 이런 형식을 의미한다. 

 

ex)

{property: value, property: function(){}}

- property에 들어갈 수 있는 것 : reference 참고 

 

ex-1) accepts (default: depends on dataType)

Type: PlainObject

ex-2) async (default: true)

Type: Boolean

ex-3) url (default: The current page)

Type: String

 

2. jQuery.get() - Load data from the server using a HTTP GET request.

$.ajax({url: "exam04_ajax_data1.json", method:"post"})

==

$.post({url: ""})

 

 

3. $("DOM Element").html() vs $("DOM Element").load() 차이점

▶ jQuery.load() - Load data from the server and place the returned HTML into the matched elements.

load()는 ajax 통신을 자동으로 해준다. (ajax 통신과 + html() 을 모두 해줌)

 

▶jQuery.html() - Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

html()은  ajax로 비동기로 html 코드를 가져오고 나서 -> 이것을 html 파라미터에 넣어준다. (단지, 삽입만 하는 과정만 의미함)

---

※ Axios - Promise based HTTP client for the browser and node.js

install address - github.com/axios/axios

axios/axios

- JQuery 대신에 사용하는 비동기 통신 방법 

<script>
      <!-- jQuery와 다르게 data가 넘어오는게 아니라 data를 포함한 response 객체가 넘어온다.  -->
         const handleClick = () => {
            axios.get("exam07_ajax_data.html")
            .then((response) => {
            	console.log(response);
            	$("#content").html(response.data);
            })
            .catch((response) => {
            	console.log(response);
            })
            .finally(() => {
            	console.log("finally 실행");
            });
         };
</script>