TIL_171017 Ajax

Ajax

자바스크립트를 이용해서 비동기적 으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식

Jason

  • Ajax를 위한 데이터형식으로 많이 사용
  • 객체리터럴과 비슷하나, 큰따옴표로 둘러쌓여야함
  • 주석처리가 안됨 (에러발생)
  • 객체같아보이지만, ‘문자열’로 데이터를 전달 (추후 객체화 필요)
  • JSON.stringify(대상객체): 서버에 보낼때, 대상객체를 문자열로 변환
  • JSON.parse(배열객체): 서버에서 온 문자열 데이터를 객체화할때

[참고]

  • 개발자 편의상, 보낼JSON 데이터가 제대로 됐는지 확인하고플때 가독성 좋게
    1
    2
    3
    var strFilteredObject = JSON.stringify(o, filter, 2);
    // 2번쨰 인자: 필터를 진행할 함수
    // 3번째 인자: 2칸만큼 인덴트 해서 찍기

XMLHttpRequest

  • Ajax 요청을 생성하고 전송할때 브라우저가 사용하는 객체
  • XMLHttpRequest.open(method, url, async)
1
2
3
4
5
6
7
// XMLHttpRequest 객체의 생성
var xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
// 같은 서버에 있기때문에 URL 생략후 path만 기입 -> 보낼 준비.
xhr.open('GET', '/users');
// Request를 전송.
xhr.send();

CRUD : HTTP method, status

  1. R(etrieve) : GET - Query string으로 넘어옴 (보안취약), 200
  2. C(reate) : POST - 생성 (페이로드 있어야 (send메세지에 인자), 201
  3. U(pdate) : PUT/PATCH - 갱신 (페이로드 있어야 (send메세지 인자), 200
  4. D(delete) : DELETE, 200

[참고]*

REST API 프로그램: https://www.getpostman.com/

JSONP

  • 웹API를 사용할때 (다른 웹서버에 접근)
  • 두개의 스크립트로 이뤄짐: 상) API지정 함수명을 가진 함수, 하) src=”jsonp.js”
  • 즉, 함수를 지정하고 호출(이미 데이터를 담아)하는 형식처럼

오늘의 느낀점

  • 이전까진 포스팅만 보면서 예습 복습을 진행했는데, 어제 잘 이해 안되는 부분을 검색해서 다른 강좌도 몇개 듣고 하니 오늘 수업에서 훨씬 이해가 빨랐음! 시간이 없다는 생각에 너무 얽매여 포스팅만 보는 선에서 예습을 끝냈는데, 많은 양을 포기하더라도 이해안되는 부분을 파고들어 더 찾아보고 여러 표현으로 서술된 것을 읽는게 빠른 이해에 더 도움이 되는듯!
  • 오늘 정리한 부분은 실습하며 더욱 체감됐기에, 정리된 부분만을 읽고 더듬기엔 부족함이 분명. 다른 예제들도 따라해봐야겠다.