ajax 함수 딱 2개만 알면된다
ajax 비동기 자바스크립트 and xml
'바뀐 부분만' 받아옴 헤더랑 푸터는 잘안바뀜
-데스크탑 애플리케이션과 유사한 효과
-회사 홈페이지같은거는 ajax안씀 -앵귤러 리액트는 오버다 jquery쓰는게 좋음
spa - 앵귤러 리액트 뷰
랜선에는 '문자열'이 왔다갔다하고, 그 문자열은 아스키코드,유니코드로 표현되고 근데 랜선에는 아스키밖에 못다녀서 전역에
서버종류
1.web server -html, css ,javascript,jpg,svg,xml (정적) static file, static resource
2 application server -
3 database server -
REST API (함수 쓰듯이 사용) 인수를 줄수도 있고, 안줄수도있음 리턴이 있다
패스 (/)를 통해서 요청하는것이 rest api
-응답 response 요청:request
어떻게 request를 날릴 것인가??? view를 만들기 위한 데이터를 요청
fetch(요청함수)
.then(res => res.json()) 콜백해서 호출된것을 객체화
.then(todosFromServer) =>{ 객체화에 성공하면
todos = todosFromServer}
프로미스(약속) - > 응답이오면 이거해줄게
json javascript object notation(표기법) - 특징은 string
홀따옴표쓰면 반드시 에러 "" 숫자는 그대로
클라이언트 서버
정적 메소드parse() <- -> stringify()
ajax로 보낼거면 input 태그의 name 어트리뷰트에 값을 꼭적어줘야되고, 그값이 간다
method = get,post action = '받을 서버'
get은 주소창에 보인다 (url 뒤에 붙인것을보냄) -서버에서 가져올떄
*post post붙혀서 넘기지 않고 , response라는 영역의 바디에 담아서보냄 - 서버로 보낼때(뭔가 만들어라)
-생성할떄
*delete 지울때 ( 서버가 갖고있는 데이터를 지워라) -두가지의미 하나를 콕찝어서 지워라, 싹다 지우라고하던지
하나 콕찝을땐 유니크한 값 (ex:id) id인 애들의 데이터를 지우란 이야기구나
싹다지울땐 아무것도 없이 보낸다
*put 갱신 (하나만 갱신) (id 필요)
fetch 갱신 (죄다 갱신)
*애들은 값을 줘야됨 (payload화물)
method 5개 차이를 알아야함
get , post, delete, put , patch
기준점은 써버, 상대경로로 썼다 = html과 파일이 같은 도메인에 있을 수 도 있다.
절대경로로 썻다 : 같은 경로에 없다 http://x.com/login.php 이런느낌
XMLHTTPRequest = xhr 마이크로소프트가 만든 객체 '이것이 ajax'
-> 이객체가 동작하는 것을 배운다 (비동기적으로 움직인다)
const xhr = new XMLHttpRequest(); 인스턴스를 만들고 시작
xhr.open('GET', '/users'); request를 보내기 위한 '준비' html의 메소드, 액션에 들어가는것
xhr.send() ''보냄'
'
ㅁ <- ㅁ 출처
->
↑↓
ㅁ
'동일출처 위반 에러' 네이버 api
->json.p *CORS
XMLHttpRequest.open(method, url[, async]) 끝에는 디폴트로 하기
xhr.send(null); xhr.send('string'); xhr.send(new Blob()); 파일 xhr.send({ form: 'data' }); 폼데이터 (제이슨) xhr.send(document);객체
헤더의
**Content-type** 데이터형식 (일반 스트링이냐 ,url 엔코디드냐, json이냐)
xhr.setRequestHeader('Accept', 'application/json'); 서버야, json으로 보내줘야되
xhr.responseText 파스해서 html 만든다
실습----------------------------
node.js로 서버를 만들어봄 (우리가 만듬)
(설치형이 많은데, 아파치 , iis)
웹서버 ( 노드js문제발생)
JSONP (요청과 가져온곳이 다른경우 서버가 팅겨낸다)
CORS가 중요
**Cross-Origin Resource Sharing** 백엔드가 처리해주는것
문제점
에러처리 안된다, 콜백헬이 발생하기 떄문에
->프로미스 , 뒤에 많다
ㅡㅡㅡㅡㅡㅡㅡㅡㅡREST API 일종의 약속 : 이름을 중구난방으로 짓지말자 프로젝트 하기전에 어떤 기능을 할거냐 REST API - > 그래프 QL
그전에는 직접적인 파일을 요청했다
파일을 콕찝지 않아도 호출할 수 있는 방식 문법이 아니고 방법론이다
GET ""/todos"
서버가 어떻게 받아 들일 것이냐
아 전체 투두스를 달라는거구나 (약속)
GET /todos/1 아이디를 줄테니, 이 투두데이터만 줘라
DELET /todos/1 todos중에 1번 아이디를 지워라
POST /todo 추가를 해달라
{id: 0 content: '' completed: ''}를 드릴게요 스트링,넘버,불리언으로
Method 명사로 쓰자
동사 이름만 잘짓자
GET /getTODOS 이런식으로 짓지말자 동사넣지말고
GET /todos 명사형으로 쓰자 todos는 전체다
GET /todos/숫자 id입니다
GET은 조회의 의미 POST는 생성 DELET는 삭제 PUT,FETCH는 갱신
CRUD (데이터는 네가지 범주를 벗어자지 않는다)
CREATE READ UPDATE DELET
무엇을 할까?
C = POST -페이로드 필요
R = GET (두가지 싹다가져올거냐, 특정것만 가져올거냐 (아이디와 유사한것들을 줘야한다))
U = PUT, FETCH -페이로드 필요
D = DELETE-페이로드 필요
Mock 서버 (짝퉁서버) 다만들어주기 이전에 json-server같은
Method / URI
ex) GET / books/1