Ajax(Asyncoronous javascript and xml) : 필요한 정보만을 부분적으로 정교하게 낚아채는 낚시꾼
=> single page application에 대한 이해
*Ajax 보안 문제로 인해서 직접 실행할 수는 없고 웹서버에서 구동해야 한다.
(사견: Ajax와 react모두 single page application을 만드는 데 일조하는 공통점이 있지만 Ajax는 네트워크 통신을 통해서 필요한 데이터를 뽑아 온다면 react는 로컬 파일내에서 필요한 정보를 만들어 놓고 필요한 부분에서 꺼내쓰는 느낌인것 같다. 예로 react로 만드는 웹 페이지에서 게시글의 대한 정보를 다른 서버에서 가져와야 한다면 Ajax를 통해 가져오는 경우가 있다.)
[동적으로 컨텐츠 변경하기]
<실습>
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input
id="night_day"
type="button"
value="night"
onclick="
nightDayHandler(this);
"
/>
<ol>
<li>
<a
onclick="
document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is ...'"
>HTML</a
>
</li>
<li><a onclick="
document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is ...'"
>HTML</a
>>CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<article></article>
</body>
</html>WEB
- HTML
- HTML>CSS
- JavaScript
[fetch Api - 요청과 응답]
fetch('javascript') : 웹 브라우저야 'javascript'라는 파일을 서버에게 응답해줘.
.then(callbackme) : fetch Api야 응답이 끝나면 내가 지금부터 정의하는 callbackme라는 함수를 실행시켜줘
*비동기 작동 -> fetch의 응답이 시간이 걸리는데 그 시간동안 다른 코드들이 실행됨
callback함수를 fetch Api가 실행시킬 때 fetch의 응답이 담긴 'response 객체'를 함수의 첫번째 인자로 주게 되어 있음
*이름이 없는 함수: 익명 함수/ 여러 곳에 쓰이지 않고 한 곳에서 쓰이는 함수는 이름이 따로 필요 없음
<fetch 예제 실습>
<input onClick="fetch('html')" />
<input
type="button"
value="fetch"
onclick="
// fetch('html')
// .then(function(respon) { respon.text().then(function(text) {
// document.querySelector('article').innerHTML=text; }) })
function callbackme(){
console.log('response end')
}
fetch('html').then(callbackme)
console.log(1)
console.log(2)
">
[Ajax의 적용]
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input
id="night_day"
type="button"
value="night"
onclick="
nightDayHandler(this);
"
/>
<ol>
<li>
<a
onclick="
fetch('html')
.then(function(respon) { respon.text().then(function(text) {
document.querySelector('article').innerHTML=text; }) }) "
>HTML</a
>
</li>
<li>
<a
onclick="
fetch('css')
.then(function(respon) { respon.text().then(function(text) {
document.querySelector('article').innerHTML=text; }) }) "
>CSS</a
>
</li>
<li>
<a
onclick="
fetch('javascript')
.then(function(respon) { respon.text().then(function(text) {
document.querySelector('article').innerHTML=text; }) }) "
>
JavaScript</a
>
</li>
</ol>
<article></article>
</body>
</html>[hash] : 한 페이지에서 특정한 부분으로 접근할 때 url를 통해서 도달하고 싶다면! => Single Page Application에서 특정부분으로 바로 이동하기 위함
id=three -> /page#three : reload없이 id = "three"인 곳으로 스크롤이 이동
*frangment: id가 가리키는 조각
*location.hash를 통해 id값을 가져올 수 있음
#!(해쉬뱅)html : hash와 구별하기 위해 관습적으로 !을 붙임
그러나 검색엔진에 최적화 되어 있지 않음 => Pjax
<hash 실습>
<!DOCTYPE html>
<html lang="en">
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
ratione odit labore. Fugit blanditiis, ipsa ducimus quaerat cum alias
atque maiores quae ex fuga perspiciatis, praesentium voluptatibus laborum!
Minus, eum. Ipsa neque, atque ullam quam ea facere optio nobis dignissimos
inventore a voluptatibus amet pariatur placeat maxime perspiciatis vero
error vel cum fuga iste. Necessitatibus, eligendi ullam! Nihil dolorum ea
adipisci labore dolor, suscipit magnam, atque molestiae autem sapiente
mollitia, earum quidem possimus dignissimos sint alias numquam non qui sed
nisi. Magnam dolore non, voluptates consequatur nulla perspiciatis ipsa
ipsam tenetur ut temporibus labore at corrupti consectetur in. Sapiente,
error.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facere
pariatur debitis iusto quia soluta repellendus quae repudiandae nobis
sapiente, reiciendis expedita similique consectetur ullam mollitia velit
nulla! Sequi impedit optio facilis culpa ut, odit quia officia voluptate
dolorum delectus dicta repellendus rerum commodi obcaecati quidem
quibusdam debitis tenetur expedita voluptates, facere, officiis aliquid
consectetur eius. Deserunt reiciendis quia eius pariatur cumque
consectetur laudantium, optio iure tenetur sit itaque excepturi numquam
est blanditiis, animi ut assumenda quidem similique quos. Omnis architecto
blanditiis, dicta quae autem nulla illo qui sed commodi cum porro
consequuntur labore velit ipsa voluptate est, quidem nisi?
</p>
<p id="three">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam error dolor
quas dicta aut minima sequi fugit corporis? Aut velit aliquam excepturi
rerum sequi iure ea, quia magni, aperiam odit quasi tenetur tempora esse
repellendus possimus. Laboriosam nostrum magnam placeat, similique
accusantium sunt necessitatibus repellendus tenetur ab amet repudiandae
minus labore expedita odio eveniet soluta alias assumenda! Dolorem facilis
asperiores optio alias? Provident, labore voluptatem? Quos quod quis,
ullam quisquam nemo vitae, facere nulla necessitatibus natus nisi
distinctio odio cum voluptas dignissimos accusamus, iste dolor. Similique
laborum sapiente laboriosam enim. Placeat ratione commodi, minus illo
praesentium rem aperiam nesciunt autem!
</p>
<script>
if (location.hash) {
console.log(location.hash.substr(1));
}
</script>
</body>
</html>[fetch Api polyfill] : fetch가 적용이 안되는 오래된 웹브라우저에서 fetch를 쓸 수 있게끔 해줌
*polyfill: 최신 기술을 지원하지 않는 웹브라우저에서 사용하게끔 해주는 것
주소나 파일을 다운받아서 <script scr="파일 주소" ></script>를 통해서 사용
https://github.com/lhj0954/WEB3-Ajax.git
GitHub - lhj0954/WEB3-Ajax: 생활코딩 ajax
생활코딩 ajax. Contribute to lhj0954/WEB3-Ajax development by creating an account on GitHub.
github.com