ajax...기초...생활코딩에서..

비동기 방식의 ajax를 생활코딩 강의로 배워봤다.

앞서 말한다면 왜 다들 생활코딩 이야기 하는지 알것같다.... 완전 무뇌한이고 어려워서 들어도 모르겠더니....쉽고 잘 설명해주신 덕분에 조금 나아진것 같다..

 

 fetch('css').then(function(response){
      response.text().then(function(text){
        alert(' css');

       });

    });

 

css파일의 내용을 화면에 띄어준다.

 

<!--fetch('css') css를 바꾸면 경고창의 내용이 바뀐다. 
 text에 서버가 응답한 결과가 들어가 있다. 결국은 실제 받은 값이다.
 화면에 내용을 바꾸고 싶다면 input을 article로 감싸고. 
 alert(text)을 document.querySelector('article').innerHtml=text; 화면출력함.
 css이후  then이하는 한절인데 일끝나면 내가 시킨 일을 해줘...함수를 처리해줘... callback함수를 기재해서 일을 시키는 것임.
 //이런걸 Asynchronous라고 함.//// 

 

fetch('html').then(callbackme);
 console.log(1);
 console.log(2);이러면 html파일 화면 출력하고 1, 2, 콘솔출력하고 그다음 callbackme함수를 처리한다.

이런걸 비동기!! 방식 순차적으로 끝날때 까지 기다리지 않고 먼저 되는것 먼저하기.....^^
 
 fetch('html').then(callbackme);
 function callbackme(){}함수나
 callbackme = function{} 나 같은 것이다.그래서 이름 없이 쓴다고 쓰는 익명함수!!!
 fetch('html'), then(function(){}) 이렇게 쓸수 있다.


 function(response)){의 response는  response라는 객체가 오고 그중 status:값을 주는데 정상이면 200, 

404를 주면 not found 찾을수가 없다는 값이다.
 확인원하면 response.status라고 alert안에 기재하면 값이 나온다.  
 fetch('css').then(function(response)){
 if(response.status=='404'){
 alert('Not found')
 }
 }); 

이런 방식도 있다.
 
 ///////////////////////////////////

 반복되는 경우 당연히 스크립트로 함수 재활용 하면 된다.
 function fecthPage(name){
   fetch('name').then(function(response){
   response.text().then(function(text){
   document.querySelectior('article').innerHTML = text;   
   })
  });
  }
  name변수 값을 전달받은 fecthPage메서드를 호출하면

name파일로 값요청을 하고 서버로 부터 response 응답하면 text:값을 받아 article 태그안에 text값을 넣어주는 것이다.

///////////////////////////////////////////////////////
  북마크.....
  내가 원하는  p태그에 id값을 준다. ex: id=three
  그럼 주소창 localhost:8000/hash.html#three라고 하면 스크롤이 id가 있는 곳으로 이동을 한다.
  
  또는  a 태그 에 href="#three" 라고 하고 화면에 a태그 글자를 입력하며 마찬가지로 스크롤이 이동한다.
  시작하는 페이지를 우리가 선택할수 있다.
  <script>
   if(window.location.hash){
   console.log(location.hash);
   // 이러면 해시값 #three가 출력된다...
   //#값을 없애고 싶으면 location.hash.substr(1)); 로 기재하면 된다.(window 은 생략가능함)
   }
   }
   a  태그를 클릭하면 주소창에는 
  </script>
   localhost:8000/hash.html#three 이렇게 나옴..
  
   <a href="#!javascript" onclick="fetchPage('javascript')">HTML</a> // #해쉬기호라 !뱅을 관습처럼 붙여서 해쉬뱅이라고 하기도 함
   a 태그를 클릭하면
   주소창은 
   localhost:8000/hash.html#javascript 라고 나옴
   
   if(location.hash){ //해시태그가 있다면
    fetchPage(location.hash.substr(2)); // 2번째를 자르고
    }else{ //없으면
    fetchPage('welcome'); // welcome파일로 가라
    }
    그런데 이것은 새로고침이 아니라서 데이터 검색에서는 좋치 않아 좀더 보완한 pjax를 한다.
    ////////////////////////////////////////////////
    홈페이지를 고치는 것보다 뒷배경의 파일의 정보만 추가하면되는 ...화면에 내용이 바꿀때....
    해더부분 추가할때 처럼 말이다.

 예를 들어보자.!!!!!
    실제 html이나 jsp에는 <ol id="nav"></ol> 밖에는 없었다.
   
   fetch('list').then(function(response){      // 리스트의 파일의            
   response.text().then(function(text){              //text값을 받아온다.
   //<li> <a href="#!javascript" onclick="fetchPage('javascript')">HTML</a></li> 
   //이렇게 너무 많아서 중복된게 너무 많다.....그래서 list파일에 html,css,jsvascript만 남기고 모두 삭제한다면
   var items= text.split(',')                                       //,를 기준으로 값을 배열화 시킨다.   
   var i=0;                                                                  //for문의 변수
   var tags='';                                                            //태그를 담을 그릇
 
 
   while( i< items.length){                                         //배열이니깐 for문 돌린다.
    var item=items[i];                                                //각각의 배열값을 담을 변수
    item=item.trim();                                                //변수에 혹시 빈칸같은것이 있다면 삭제해라.
    i=i+1;
    var tag='<li> <a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
    tags += tag;
   }
   //document.querySelectior('#nav').innerHTML = text;  // id nav라는 태크안에 넣어라.란 뜻이다.
   document.querySelectior('#nav').innerHTML =tags;    //링크까지 붇은 구문이 출력된다.
   })
  });
/////////////////////////////////////////////////////////////////////////////////////////////  
   polyfill 

  == 신기능을 브라우저가 예전버전에서 지원하지 않기 때문에 대신 지원해주는 기능이다.
   fetch기능도 18년도 촬영기준으로 IF11버전은 미지원했다...
   그래서 fetch.js라는 파일을 다운로드하여 저장함 그럼 크롬 말고 IF도 가능해서 호환성 확보 한것이다.
  -->