JS의 핵심! : Ajax

📒JS/⚡ver.1

JS의 핵심! : Ajax

4:Bee 2023. 4. 29. 16:10

728x90

YouTube Link
	WEB3-Ajax
	https://youtube.com/playlist?list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q

동적으로 구현 그리고 목표

<ol>

<li>

<a onclick="document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is...';

">HTML</a>

</li>

<li><a onclick="document.querySelector('article').innerHTML = '<h2>CSS</h2>CSS is...';

">CSS</a></li>

<li><a href="3.html">JavaScript</a></li>

</ol>

우리는 한 스크립트 안에서 모든 것들을 해결하는 방식의 코드를 원하는 것이 아니다. '<h2>HTML</h2>HTML is... 의 코드는 HTML파일로, 마찬가지로 CSS도 CSS파일로 존재하면서 사용자가 요청할 때만 해당 값이 동적으로 변하고 값이나 데이터를 로드 해오는 방식을 우린 원한다. 이것을 해결하기 위해 Ajax가 필요하다.

fetch API

<body>

</article>

<input type="button" value="fetch" onclick="

fetch('html').then(function(response){

response.text().then(function(text){

document.querySelector('article').innerHTML = text;

})

</body>

우린 fetch를 알아야한다. 깊게는 알지 못해도 대략 어떻게 생겼는지 정도만 알라했다.

[Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단)

안녕하세요. 오늘은 제이쿼리 AJAX에 대해서 설명드리겠습니다. - AJAX란? Ajax란 (asynchronous Javascript and XML)의 줄임말 입니다. 자바스크립트를 이용하여 비동기 식으로 서버와 통신을 합니다. 비동기

dion-ko.tistory.com

ajax를 aysnc/await을 사용하려는 미련한 생각과 발상

ajax의 기술은 서버와 데이터를 주고받는 기술이다. 다시 말해서 화면 전환이나 페이지 로딩 없이, 서버에서 필요한 데이터를 받아와 화면을 갱신하거나 사용자의 입력에 따라 서버로 데이터를 전송할 수 있다.(예를 들어 검색창에 미리 단어들이 주어지는 것과 같은 것이다.) 이와 더해서 ajax는 Promise를 사용하지 않는다. 콜백함수를 사용한다. 즉, 요청 결과가 도착하면 해당 함수를 호출하는 방식으로 처리합니다. 이러한 방식은 코드가 중첩되어 복잡하게 보일 수 있고, 여러 개의 요청이 있을 때 처리 순서를 파악하기 어렵다는 단점이 있습니다. 이에 더불어 async/await은 Promise함수를 더욱 용이하게 사용할수 있게 도와주는 역할이다. 이 둘다 비동기 처리를 한다는 공통점만 있을 뿐 사용하는 방식과 적용은 조금씩 다르다. ajax는 jQuery를 사용할 때 XML/XHR/XMLHttpRequest를 사용할 때 더욱 둔각을 나타태는 기술이다.

JS의 핵심! ajax+Plus

일기 JS의 핵심! ajax+Plus 본문 JS/JS:Main_Function JS의 핵심! ajax+Plus Rwoo 2023. 5. 1. 00:27

hi-code.tistory.com

728x90

저작자표시 (새창열림)