JavaScript 05 < ajax() 메서드 >
jQuery 에서 제공하는 ajax() 메서드와 JSON 데이터를 사용해볼 예정이다.
학생테이블을 만들어서 'tbody'에 내용을 삽입 할 예정 이다.
ajax() 메서드는 현재 페이지에서 필요한 데이터를 바로 로드해서 작업가능한,
"비동기 처리"를 지원하는 메서드 이다.
여기서 "비동기 처리 " 란 ? 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. 즉, 한 번에 여러 작업을 처리한다. 비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에대한 응답을 줄지 모르는데 마냥 기다릴순 없기 때문이다.
jQuery 안에서 진행 되는 메서드 이므로 CDN 이 필요하다.
그리고 에이젝스 메서드는 몇가지 속성을 기본적으로 표현 하는데 이게 기본 이다.
1. type 타입 - 데이터의 전송방식form 태그 할때 get 방식 post방식
cud 는 post방식 데이터변형이 있는 경우 r은 get방식 데이터변형이 없는경우에 활용
2 링크나 주소가 들어가는 경우도 있다
3. 지금 내가 주고받을 타입이 무엇인지 <- ( 이것은 상황에 따라 있을수도 있고 없을 수도 있다. )
4. success - 성공할 때 무슨 화면을 보여줄 것인지
5. error - 에러날때 무슨 화면을 보여 줄 것인지 .
CDN을 복사 해주고 , ajax() 메서드는 기본적인 순서가 있다.
- type : 데이터의 전송방식form 태그 할때 get 방식으로 또는 post방식으로
cud 는 post방식 데이터변형이 있는 경우 r은 get방식 데이터변형이 없는경우에 활용
2. url : 링크나 주소가 들어가는 경우도 있다. 내가 정보를 받아올 파일의 위치
3. dataType : 지금 내가 주고받을 타입이 무엇인지 <- 이거는 추가사항 , 가끔 없을 수 도 있음
4. success : 성공했을때 수행할 기능 (함수) 등을 적는다.
5. error : 실패했을때의 수행할 메세지 등을 띄운다.
성공 했을때의 함수 (기능 ) 설명 ★
일단 요소를 담기 위해 var elem = "" 선언 해주고
object 타입의 name, score1, score2 를 차곡차곡 담는다 .
<tr>
<td>홍길동</td>
<td>50</td>
<td>100</td>
</tr>
이런 모습
데이터가 2 개 이므로 2개를 담는다.
결과는 ?
사진을 담을 때도 같은 방법으로 실습해보자 !
ajax() 와 json 은 짝으로 같이 다닌다.
json 데이터의 키 , 값 을 쌍 으로 제공한다.