JavaScript 입문과 웹 UI개발(26)-ajax 개념(get,post, fetch)
2022. 10. 9. 18:10ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<!-- 서버란?
데이터 달라고 하면 데이터보내주는 프로그램
ex)유저가 유튜브 영상을 요청하면 영상을 가져다 주는 유튜브 서버
이렇게 유저가 서버에 데이터를 요청할때 통신을 하는 방법이 있다.
첫번째로 데이터의 url을 입력해서 어디로 요청할지 적어야하고
두번째로 GET인지 POST인지 잘 기재해야 데이터를 준다
GET은 데이터를 읽고 싶을때 많이 사용하고 POST는 서버로 데이터를 보낼때 많이 사용한다
서버에서는 url 경로에 따른 해당 데이터를 보내준다
서버에서 받은 데이터는 데이터베이스에도 저장 할 수도 있고 받은 데이터를 처리해서 response 해주기도 한다
특정 url로 get 요청하는 방법
주소창에 url을 입력해서 엔터
특정 url로 post 요청하는 방법
<form action="/asdf" method="post">
</form>
위와 같이 form 태그에서 action으로 url 경로를 넣어주고
method로 post인지 get인지 방식을 적어주면 된다
여태까지 설명한 get/post 요청을 하면 브라우저 새로고침이 된다.
새로고침 없이 get이나 post 요청을 하고 싶다면 브라우저 기본 기능인
ajax를 사용하면 된다.
ajax로 get 요청하는법
$.get('url~~~~').done(function(data){}).fail(function(){})
위에 url로 데이터를 요청해서 요청이 성공하면 실행되는 함수를 .done()안에다가
함수로 입력해준다. 이 함수에 parameter를 임으로 넣으면 그게 서버로부터 받아온 데이터라고 생각하면 된다.
https://codingapple1.github.io/hello.txt 여기로 get요청하면 인삿말을 하나 가져올 수 있다. 인삿말은
성공시 실행되는 함수의 파라미터로 받아서 함수 안에서 사용할 수 있다.
실패시에 실행되는 함수는 .fail()안에 함수를 써주면 된다.
ajax로 post 요청은
$.post().done(function(data){}).fail(function(){}) 와 같이 적어주면 된다
https://codingapple1.github.io/price.json 여기로 get요청 하면 object 형태의 가격정보를 가져온다
서버와 유저는 문자만 주고 받을 수 있다. 근데 위의 url로 데이터를 요청하면 object 형태의 데이터를
받았다. 이게 가능한 이유는 object 데이터에 따옴표쳐서 문자처럼 만들어서 보냈기 때문이다
"{"price" :5000 }"
이렇게 object 나 array에 따옴표를 붙여준 형태를 json이라고 한다.
fetch를 사용할때는 res=> res.json() 을 사용해 object로 변화 해줘야 하지만
$.get()은 json을 object로 자동변환해준다.
-->
<script>
$.get('https://codingapple1.github.io/hello.txt')
.done(function(data){
console.log('요청완료 받아온 데이터'+data) //요청완료 받아온 데이터'안녕하세요 반갑습니다요.'
})
.fail(function(){
console.log('실패했도다')
})
$.get('https://codingapple1.github.io/price.json')
.done(function(data){
console.log(data.price);
})
//브러우저 기본 함수 fetch 써도 ajax 가능
$.fetch('https://codingapple1.github.io/price.json')
.then(res=> res.json()) //따옴표 친 json을 object로 만들어준 것
.then(function(data){
console.log(data.price);
})
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(28)-array에 자주 쓰는 sort, map, filter 함수 (0) | 2022.10.10 |
|---|---|
| JavaScript 입문과 웹 UI개발(27)-Ajax 2 : 상품 더보기 버튼 만들기 (0) | 2022.10.10 |
| JavaScript 입문과 웹 UI개발(25)-array, for 반복문 실력향상 과제 (1) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(24)- forEach, for in 반복문 (0) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(23)-자바스크립트로 html 생성하는 법 (1) | 2022.10.08 |