[jQuery] jQuery - ajax (비동기 처리), (부분만 업데이트) ★

 

 

 

ajax란?

 

• Asynchronous JavaScript and XML 의 약자
• 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
• 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
• 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.

 

 

 

 

월래는 웹페이지를 전체를 업데이트 해줘야 했는데,

이젠 부분만 부분만 부분만 부분만 ajax를 활용해서 업데이트를 할 수 있습니다.

 

 

 

 

 

 

ajax를 사용법

• jQuery를 이용한 ajax통신의 가장 기본적인 API
• 주요속성
  • data : 서버에 전송할 데이터, key/value 형식의 객체
  • dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
    dataType 예) 서버에게 요청을하고 서버가 응답 했을 때, 서버가 전달해주는 데이터가 어떤 형식의 데이터인지를 지정해주고 그 데이터 형식에 따라서, jQuery가 이벤트핸들러가 발생했을 때, 그거 적절하게 변환해서, 전달을 해줍니다.
  • type : 서버로 전송하는 데이터의 타입 (POST, GET)
    type 예) 폼에 메소드라는 속성이 있습니다. 거기에 POST나 GET을 지정 할 수 있다라는거.
  • url : 데이터를 전송할 URL
    url 예) 서버상의 url
  • success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
    success 예) 서버와 통신을 하고, 그 통신 결과가  성공 했을 때, 즉 서버로부터 받을 결과를 가져올 수 있을 때, success라고하는 속성의 함수를 지정해 놓으면, 그게 이벤트 핸들러가 되어서 그 함수가 호출이 되는 겁니다. 

 

 

 

 

 

 

 

웹페이지 쪽 로직

 

 

 

 

설명

 

 

 

 

 

 

 

 

 

 

 

서버 쪽 로직

위에 url에 있는 ~~.php 파일 안에는 밑에처럼 적혀있다.

 

 

 

 

설명

 

 

 

 

 

 

 

 

 

결과

 

 

마우스 갖다 놓으면 POST방식으로 어디 URL로 보냈는지 확인 가능

 

누르면 (헤더, Post, 응답, 등등 볼 수 있음)