🔌 AJAX 통신 — 완전 분석

페이지와 서버 간의 모든 데이터 통신을 분석합니다. 어떤 주소로, 어떤 데이터를 보내고, 어떤 응답을 받는지 완전 정리.

📡 AJAX 개요

paper_card 페이지는 총 25개 이상의 AJAX 엔드포인트와 통신합니다. jQuery의 $.ajax()를 사용하며, 모든 통신은 비동기(Async)로 이루어집니다.

🗺️ 전체 엔드포인트 맵

📇 종이명함 관련 (핵심)

👥 연락처 & 친구

🛒 IAM 몰 & 결제

🤖 AI & 발송

🔐 인증 & 기타

🔍 통신 패턴 분석

패턴 1: 목록 조회 (GET)

function getIamContact(card_owner, card_master, search_range, phone_count, page, paper_yn) {
    $.ajax({
        url: "[내부API]/[연락처조회]",          // ← 내부 API 주소
        type: "GET",                            // ← GET 방식
        data: {                                  // ← 쿼리 파라미터
            card_owner: card_owner,              //    '[사용자ID]'
            card_master: card_master,            //    '[관리자ID]'
            search_range: search_range,          //    검색 범위 (1~4)
            phone_count: phone_count,            //    전화번호 개수
            page: page,                          //    페이지 번호
            paper_yn: paper_yn                   //    종이명함 여부 (0/1)
        },
        dataType: "json",                        // ← JSON 응답 기대
        beforeSend: function() {
            busy = true;                         // ← 중복 요청 방지
            $("#ajax_loading").show();           // ← 로딩 표시
        },
        success: function(response) {
            // 응답 HTML을 .sample_main에 추가
            $(".sample_main").append(response.html);
        },
        complete: function() {
            busy = false;
            $("#ajax_loading").hide();
        }
    });
}

패턴 2: 데이터 변경 (POST)

// contact_submit_paper() - 종이명함 저장
function contact_submit_paper() {
    $.ajax({
        url: "[내부API]/[연락처처리]",
        type: "POST",
        data: {
            action: "[액션]",              // ← 액션 구분자
            name: $("#paper_name").val(),        // ← 폼 데이터
            job: $("#paper_job").val(),
            organization: $("#paper_organization").val(),
            mobile: $("#paper_mobile").val(),
            // ... 더 많은 필드 ...
        },
        success: function(res) {
            if (res.result === "success") {
                refresh_page();                  // ← 성공 시 갱신
            }
        }
    });
}

🌊 데이터 흐름도

                        ┌──────────────┐
                        │   사용자     │
                        │  (브라우저)  │
                        └──┬───────┬──┘
                           │       │
              클릭/입력    │       │  AJAX 응답 (JSON/HTML)
                           ▼       ▲
              ┌────────────────────────┐
              │   JavaScript 함수      │
              │                        │
              │  getIamContact()       │
              │  getIamPaper()         │
              │  contact_submit()      │
              │  settlement()          │
              │  ...                   │
              └───────────┬────────────┘
                          │
              $.ajax()    │
              POST/GET    ▼
              ┌────────────────────────┐
              │   PHP 서버             │
              │                        │
              │  [내부API]/*.php       │
              │  [내부API]/*.php           │
              │  [내부API]/[명함발송]│
              └───────────┬────────────┘
                          │
              SQL 쿼리    │
                          ▼
              ┌────────────────────────┐
              │   MySQL DB             │
              │   - paper_cards        │
              │   - contacts           │
              │   - payments           │
              │   - ai_prompts         │
              └────────────────────────┘

🎓 초등학생도 따라하는 AJAX 분석