AJAX

(JSON이용)AJAX일반화

psys 2020. 8. 3. 12:31
728x90

항상 사용되는 ajax 모양

<script>
    var v_ajax = new XMLHttpRequest();
    v_ajax.open("메소드", "URL", true);
    v_ajax.send("전달값: get방식일때 비워두거나 null을 씀");

    v_ajax.onreadystatechange = function () {
        if (v_ajax.readyState == 4 && v_ajax.status == 200) {
            // 받은 데이터 처리
            v_ajax.responseText;
        }
    }
</script>

 

JSON을 이용하여 바뀌는 부분만 일반화

<script>
    var $ = {};
    $.ajax = function (p_json) {
        var v_ajax = new XMLHttpRequest();
        v_ajax.open(p_json.method, p_json.url, true);
        v_ajax.send();

        v_ajax.onreadystatechange = function () {
            if (v_ajax.readyState == 4 && v_ajax.status == 200) {
                // 제이슨에는 메소드를 붙을 수 있음
                p_json.success(v_ajax.responseText);
            }
        }
    }
</script>

 

사용

1) 제이쿼리AJAX

<script>
    $.ajax({
        "method": "get"
        , "url": "data.csv"
        , "success": function (p_data) {
            alert("넘겨받은 값은: " + p_data + "입니다.");
        }
    });

    $.ajax({
        "method": "get"
        , "url": "test.php"
        , "success": function (p_data) {
            alert("넘겨받은 값은: " + p_data + "입니다.");
        }
    });
</script>

2) 스크립트AJAX

간단히 간단히 사용

    var p_data = {};
    p_data.method = "get";
    p_data.url = "data.csv";
    p_data.success = function (p_msg) {
        alert("넘겨받은 값은: " + p_msg);
    }
    $.ajax(p_data);

 

더보기
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    /* // 아래 항상쓰는 aj?ax모양
    var v_ajax = new XMLHttpRequest();
    v_ajax.open("메소드", "URL", true);
    v_ajax.send("전달값: get방식일때 비워두거나 null을 씀");

    v_ajax.onreadystatechange = function () {
        if (v_ajax.readyState == 4 && v_ajax.status == 200) {
            // 받은 데이터 처리
            v_ajax.responseText;
        }
    } */

    // 바뀌는 부분만 일반화를 시키자(JSON이용)

    // _와 $는 변수명으로 쓸 수 있음
    var $ = {};
    $.ajax = function (p_json) {
        var v_ajax = new XMLHttpRequest();
        v_ajax.open(p_json.method, p_json.url, true);
        v_ajax.send();

        v_ajax.onreadystatechange = function () {
            if (v_ajax.readyState == 4 && v_ajax.status == 200) {
                // 제이슨에는 메소드를 붙을 수 있음
                p_json.success(v_ajax.responseText);
            }
        }
    }

    // 만들었으니 확인!
    var p_data = {};
    p_data.method = "get";
    p_data.url = "data.csv";
    p_data.success = function (p_msg) {
        alert("넘겨받은 값은: " + p_msg);
    }
    $.ajax(p_data);
    
    $.ajax({
        "method": "get"
        , "url": "data.csv"
        , "success": function (p_data) {
            alert("넘겨받은 값은: " + p_data + "입니다.");
        }
    });

    $.ajax({
        "method": "get"
        , "url": "test.php"
        , "success": function (p_data) {
            alert("넘겨받은 값은: " + p_data + "입니다.");
        }
    });
</script>

'AJAX' 카테고리의 다른 글

AJAX 우회해서 네이버 가져오기  (0) 2020.08.04
AJAX예제  (0) 2020.08.03
AJAX(Asynchronous Javascript And Xml)  (0) 2020.08.03