[JS] ajax

Ajax란?

비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말하며, 새로고침 없이 데이터를 주고 받으며 전체 페이지가 아닌 일부분만을 업데이트 할 수 있다

jQuery로 ajax 요청

get

$.get('url');

$.get('https://codingapple1.github.io/hello.txt')
	.done(function (data) { //연결 성공시
		console.log(data);		
	})
	.fail(function () { //연결 실패시
		console.log('실패');
	})

• 데이터는 .done(function (data){}) 콜백함수 파라미터 속에 존재

post

$.post('url', {key : value})

$.post('url', { name: 'kim' })
	.done(function (data) {
    	console.log(data);
	})

• don => then
  fail => catch 로 사용 가능

자바스크립트로 ajax 요청

fetch('url')
  .then(res => res.json()) // JSON으로 변경
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

• fetch 함수 사용

• 서버와 데이터를 주고 받을 때는 문자만 사용 가능 (array, object X)

• 제이쿼리는 자동으로 JSON으로 변경해 전송하고, 도착하면 다시 array/object 타입으로 변경해줌

• fetch()는 res.json() 코드를 추가하여 직접 변경

JSON 형태

"{ "데이터 이름" : "값" }"