비동기 JavaScript 백업

by 

<!DOCTYPE html>
<meta charset="UTF-8">
<html>

<body>
    <div id="disp"></div>
</body>
<script>
    //원래 AJAX(Asynchronuous javascript XML)
    //나온 배경
    //인터넷이 급격히 발전하면서, 화면에 담아야 하는 데이터가 많은데
    //화면의 일부만 수정하려해도 전체페이지를 다시 가져와서 해석해야하는 방식의 비효율성을 개선하고자 나왔는데,
    //당시 아무도 비동기 방식을 믿어주지 않음 
    //DRY 원칙 => Do not Repeat yourself 반복하지마라 너무 외롭다 ! (lonely lonely)

    let myDisp = document.querySelector('#disp');

    //아작스 기본 일반화
    //매개변수를 1개로 만들고 싶음, 왜? 상황에 따라 매개변수가 다름

    let Parameter = {
        method:"get",
        url : "/jsstudy/data.json",
        dataType:"json",
        success:function(p_result){
            console.log("넘어온값1:",p_result);
        }

    }

    function ajax(psetting){
        let xhr = new XMLHttpRequest(); //심부름꾼 아저씨 생성(통신)
        xhr.open(psetting.method,psetting.url,true); //시킬일 지정
        xhr.onreadystatechange = function (){
        //상태변화중 이기적이여서 끝난 것만 관심집중
            if(xhr.readyState  == 4 && xhr.status == 200){
                //바뀌는 부분
                if(psetting.dataType =="json"){
                    psetting.success(JSON.parse(xhr.responseText)); //결과를 받아서 처리해주는 함수
                }else{
                    psetting.success(xhr.responseText);
                }

            }
    }
            xhr.send(); //시킨대로 하세용, 실행
    }

    //멋진말로는 namespace라고도 하는데, 함수이름이 중복되면 짜증남
    // 자바스크립트는 이걸 보통 객체를 이용해 해결함, 함수를 객체의 메소드로 맨들어서 소속을 만듦
    const $ = {}; //빈객체생성 (네임스페이스용)


    //ajax(Parameter);

    //또는
    $.ajax({
        method:"get",
        url : "/jsstudy/data.json",
        dataType :"text",
        success : function(p_result){
            console.log("넘어온값1:"+p_result);
        }

    });



    // let xhr = new XMLHttpRequest(); //심부름꾼 아저씨 생성(통신)
    // xhr.open("get","/jsstudy/data.json",true); //시킬일 지정
    // xhr.onreadystatechange = function (){
    //     //상태변화중 이기적이여서 끝난 것만 관심집중
    //     if(xhr.readyState  == 4 && xhr.status == 200){
    //       console.log(xhr.responseText);
    //       console.log(JSON.parse(xhr.responseText)); //객체로 변환 - 넘 쓰기가 편함

    //       let result = JSON.parse(xhr.responseText);
          
    //       let tblStr = "<table border=1>";
    //         tblStr += "<tr><th>이름</th><th>나이</th><th>별명</th></tr>";
    //       for(let i=0; i<result.length; i++){
    //         tblStr += "<tr><td>" + result(i).name +"</td>";
    //         tblStr += "<td>" + result(i).age +"</td>";
    //         tblStr += "<td>" + result(i).alias +"</td></tr>";
    //       }
    //       tblStr += "</table>";

    //       //document.querySelector('#disp').innerHTML = tblStr;
    //       myDisp.innerHTML = tblStr;

    //     }
    // }
    // xhr.send(); //시킨대로 하세용, 실행
</script>

데이터.json 

(
    {"name":"송쵼이","age":"30","alias":"송쵼이"},
    {"name":"정댐","age":"40","alias":"불꽃남자"},
    {"name":"탭","age":"20","alias":"가드"}
)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <script>
        //원래 jQuery는 개발자가 쓰면 안됨, 스트립트 못하는 사람을 위해 만든 훌륭한 자바스크립트 라이브러리


        //즉각실행함수?
        // (function(p_param){
        //     alert("메롱메롱"+p_param);
        
        // })("쵼이");



        // function 키워도는 크게 2가지 의미를 가짐(함수와 클래스)

        // function merong(){
        //     return "안녕~~";
        // }
        // alert(merong())

        function Saram(p_name,p_alias){
            this.name = p_name;
            this.alias = p_alias;
            //요렇게 선언하면 메모리가 낭비됨!(여유있을땐 이렇게 써도됨ㅋ)
            // this.callName = function(){ //메소드 선언
            //     alert(this.name);
            // }
            return this; //요것이 암묵적으로 생략되어 있음.
        }
        
        let choni = new Saram("쵸니","쵼쵼이");
        let daeman = new Saram("정댐","불꽃남자");

        
        //메모리절약을 위해 공유영역 prototype에 정의함
        Saram.prototype.callName = function(){
            alert(this.name);
        }
        daeman.callName();

        function MyDom(p_sel){
            let elems = document.querySelectorAll(p_sel);
            this.length = elems.length;
            for(let i = 0; i<this.length; i++){
                this(i) = elems(i); //공부해오기 JSON 배열식접근법
            }
            return this; //명시적 표현 생략 가능
        }

        let divs = new MyDom("#merong");
        console.log(divs(2));
        

        
    </script>
</head>
<body>
    <div class="merong">불</div>
    <div class="merong">꽃</div>
    <div class="merong">남</div>
    <div class="merong">자</div>
    
</body>
</html>
'추천 관련글,