[javascript] Ajax

Ajax기초 자료

개요

---

Asynchronous JavaScript and XML의 약자. JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.

사용

---

기본 형식

$.ajax({
	type: "GET", // 또는 POST, 데이터 교환 방식 기재
	url: "API URL",
	data: { key:value }, // 서버로 전달해야하는 값이 있을 때 사용. 주로 POST 방식에서 사용함.
	success: function(매개변수명){ // Data Object를 받아 올 매개변수
      // 요청이 성공했을 때 실행할 함수
	}
})

url에서 받은 Data object를 위 변수를 통해 저장하여 사용한다. Data object는 json형식으로 표시

Type 상세

데이터를 교환하는 방식

1) GET

url에 key:value 형태로 전달. 때문에 보안에 취약함. 주로 데이터 조회(Read)를 요청할 때 사용한다.

URL 노출 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

• ? : 데이터 전달 시작 표시
• & : 전달할 데이터가 더 있다는 표시
• key=value 형태로 데이터 전달
  • q=아이폰
  • sourceid=chrome
  • ie=UTF-8

2) POST

보이지 않는 HTML body에 key:value 형태로 전달 주로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때 사용한다.