JS의 핵심! : Ajax

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

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

저작자표시

'📒JS > ⚡ver.1' 카테고리의 다른 글

JS의 핵심! Node.js : API (0)	2023.05.01
JS의 핵심! ajax+Plus (0)	2023.05.01
JS의 핵심! Introducing 생활코딩! (0)	2023.04.25
JS의 핵심! 혼프~ with async&await (0)	2023.04.25
JS의 핵심! 혼프~ with setTimeout()&Promise (0)	2023.04.25

'📒JS/⚡ver.1' Related Articles

Comments

C-log

JS의 핵심! : Ajax 본문

JS의 핵심! : Ajax

동적으로 구현 그리고 목표

fetch API

'📒JS > ⚡ver.1' 카테고리의 다른 글

티스토리툴바