Week02. AJAX

★너무 꼬치꼬치 파고 들어가진 말기

서버와 클라이언트

서버-클라이언트 통신

• 클라이언트: 간단하게 말해서 웹에 접근하는 단말기
• 서버: 웹페이지를 저장하는 컴퓨터. 클라이언트의 요청을 받아 처리
• 서버->클라이언트: JavaScriptObjectNotion(JSON)
  • 네트워크를 통해 데이터를 주고 받는데 사용되는 데이터 형식
  • Dict&List와 유사한 형식을 띄고 있음

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    }
 출처: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

• 클라이언트->서버
  • Post: 데이터의 생성, 변경, 삭제 요청시 사용 ex)회원가입 및 탈퇴, 패스워드 수정 등
  • Get: 데이터 조회시 사용
    • ?: 전달할 데이터가 작성 됨
      • &: 전달할 데이터가 더 있음
        ex)https://www.google.com/search?q=iphone&newwindow=1 쪼개보기
        https://www.google.com/search 라는 서버주소에서
        데이터가 작성되어 서버로 전달 되는데(?이하)
        q=iphone 와(&) newwindow=1임.

AJAX

AJAX의 정의

• 자바스크립트를 이용해 서버와 브라우저가 데이터를 교환하는 통신기능
• 전체 페이지를 새로고침 하지 않고 일부 데이터만 로딩 가능
• JQuery가 임포트 된 페이지에서만 동작함

 $.ajax({
  type: "GET", // 어떤 방식으로 요청 할 것인지
  url: "url",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 공란)
  success: function(변수){ // 서버에서 받은 결과를 변수에 담음. 보통 response 많이 씀
    //내용 작성
  }
})