Javascript:AJAX

틀:Javascript

1. Javascript:개요
2. Javascript:변수, 상수
   1. Javascript:자료구조
3. Javascript:연산자
4. 분기문
   1. Javascript:조건문
   2. Javascript:반복문
5. Javascript:선택자
   1. Javascript:요소 내용 변경
   2. Javascript:HTML로부터 데이터 받기
6. Javascript:이벤트
   1. Javascript:클릭 이벤트
7. Javascript:AJAX
   1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
8. Javascript:활용
   1. Javascript:표 정렬

개요

AJAX. Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.

HTMl에서 직접 사용하거나, 자바스크립트 파일로 빼서 사용할 수도 있다.

비동기 통신을 위하여 서버를 실행시킨 후...

호출법

html 안에서 jQuary를 호출해야 사용할 수 있다.

$.ajax({
    type:'POST',  // GET이냐 POST냐.
    url:'경로/파일.json',  // 어떤 url로 요청할 것이냐.
    data:변수.getAttribute('data-name');  // 어떤 데이터값을 보낼 것이냐.
    dataType:'json',  // 받을 데이터의 형태를 입력한다. html, xml, json 등
    success:function()  // 성공할 경우 불러올 함수.
    error:function()  // 실패할 경우 불러올 함수.
    complete:function()  // 성공했든, 실패했든 작업이 끝날 때 불러올 함수.(없어도 된다.)
})

예시

좋아요 카운트를 올릴 때.

$.ajax({
    type:'POST',
    url:'경로/파일.json',
    data:변수.getAttribute('data-name');  // 해당 변수에서의 속성을 가져온다.
    dataType:'json',
    success:(response)=>{  //한줄 함수 정의식.
        let count = document.querySelector('#count');
        count.innerHTML = response.count;  // html안에 응답받은 count값을 넣는다.(count값은 url에서 지정한 곳에서 응답받는다.)
    },
    error:()=>{
        alert('로그인하세요~');
        window.location.replace('https://주소');  // 에러가 나면 로그인화면으로 옮기기도 한다.
    }
})