AJAX와 JSON - PHP와 javascript를 동시에 사용할 수 없을까?

php파일을 코딩하다가 머릿속에서 javascript와 php 코드가 혼동되면서

동시에 쓸 수 있는지 코딩해보다가 안되었었다.

인터넷을 찾아보니 ajax를 사용해야 된다고 한다.

 

ajax가 대체 뭔지 알아보니 javascript는 클라이언트 측에서 사용하는 언어이고 php는 서버에서 다루는 언어이다 보니

결국 php와 javascript를 동시에 사용한다는 것은 서버 통신을 한다는 의미이다

ajax는 서버 통신 방법이었다

 

AJAX (Asynchronous JavaScript and XML)

약자는 이렇게 되지만 브라우저 내에서 비동기 기능을 제공하는 모든 기법을 통칭한다.

 

이용자가 서버를 통해 데이터를 전해 받을 때 전해주는 여러가지 형식이 있다

XML, CSV, JSON 등등이 있는데 AJAX의 X가 그 XML의 X이다.

 

서버랑 통신할 때는 기본적으로 GET요청을 하게 되는데

주소창에 URL로 엔터를 치면 웹 브라우저가 페이지를 띄우는 것처럼 요청하는 GET요청이 있고

로그인 구현 방식 같은 포스팅에서 자주 썼던 form 태그를 이용한 get 요청이 있다.

근데 이 두가지 방식들은 전부 데이터를 받을 때 새로고침된다

마지막으로 AJAX를 통한 GET요청 방식이 있는데

이 방식은 새로고침없이 서버에게 GET요청하는 javascript코드이다.

새로고침이 없으니 앱처럼 부드럽게 넘어가는 것이 AJAX의 장점이다.

 

예시코드)

<script>
  fetch(' ')
    .then((response) => {
      return response.json()
    })
    .then((결과) => {
      console.log(결과)
    })
    .catch(() => {
      console.log('에러남')
    })
</script>

옛날부터 전해지는 코드도 있지만 요즘에는 이 코드 방식을 흔히 채택한다고 한다.

 

이 코드가 길다면 JQuery를 사용해서 제이쿼리안에서 기본적으로 제공되는 ajax함수를 쓸 수도 있다.

$.ajax({
  //URL은 필수 요소로 구현해야 함
  url : '요청 URL 주소를 입력합니다.'
})

 

 

AJAX를 이용하게 되면 CORS 관련 에러를 자주 볼 수 있게 되는데,

naver.com 에서 kakao.com 으로 ajax 요청을 한다거나 하는 건 안된다고 한다.

원천적으로 차단하고 있다고 한다

 

이를 끄고 싶다면

헤더에 Access-Control-Allow- Origin : "*"

이런걸 추가하거나 CORS 정책 관련 기능을 끄면 된다

 

활용도

중복 Check를 통해 사용자에게 사용가능 여부를 입력하여 실시간으로 표현할 수 있다

AJAX를 이용하지 않고 중복 Check를 하면 화면 전체를 새로고침해서 정보를 다시 작성해야 하는데

AJAX를 사용하면 화면에 결과가 나타나는 부분만 독립적으로 표현할 수 있다.

 

예시 코드는 다음과 같다

//사용자가 입력한 값과 DB에 저장된 값을 비교해서 중복하는지 Check하는 함수
function idDuplicationCheck (id) {
$.ajax({
 type : 'GET',
 url : '서버로 보낼 주소 입력',
 data : {"id" : id },
 success : function (data) {
   if (data) {
     alert ("사용할 수 없는 아이디 입니다.");
   } else {
     alert ("사용 가능한 아이디 입니다.");
   }
 }
});
}

 

아마 다음 과제가 회원가입 기능 구현이라서 DB와 연결해야 하는데,

그때 중복 체크 기능을 추가할 때 AJAX를 이용해 봐야 겠다.

궁금해서 알아본 내용이 사실 다음 과제의 핵심이었던.....

 

 

 

** 정보 source

https://www.nextree.co.kr/p4771/

https://devyj.tistory.com/1

https://youtu.be/nKD1atl6cAw