JavaScript 05 < ajax() 메서드 >

 

jQuery 에서 제공하는 ajax() 메서드와 JSON 데이터를 사용해볼 예정이다.

JSON데이터는 .json 파일로 만들수 있다.

 

data01.json 과 data02.json 코드

이것을 받아와 'tbody'에 내용을 출력해줄 예정

학생테이블을 만들어서 'tbody'에 내용을 삽입 할 예정 이다.

ajax() 메서드는 현재 페이지에서 필요한 데이터를 바로 로드해서 작업가능한,

"비동기 처리"를 지원하는 메서드 이다.

여기서 "비동기 처리 " 란 ? 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. 즉, 한 번에 여러 작업을 처리한다. 비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에대한 응답을 줄지 모르는데 마냥 기다릴순 없기 때문이다.

 

jQuery 안에서 진행 되는 메서드 이므로 CDN 이 필요하다.

그리고 에이젝스 메서드는 몇가지 속성을 기본적으로 표현 하는데 이게 기본 이다.

1. type 타입 - 데이터의 전송방식form 태그 할때 get 방식 post방식

cud 는 post방식 데이터변형이 있는 경우 r은 get방식 데이터변형이 없는경우에 활용

2 링크나 주소가 들어가는 경우도 있다

3. 지금 내가 주고받을 타입이 무엇인지 <- ( 이것은 상황에 따라 있을수도 있고 없을 수도 있다. )

4. success - 성공할 때 무슨 화면을 보여줄 것인지

5. error - 에러날때 무슨 화면을 보여 줄 것인지 .

CDN을 복사 해주고 , ajax() 메서드는 기본적인 순서가 있다.

1. 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 파일

 

ajax() 와 json 은 짝으로 같이 다닌다.

json 데이터의 키 , 값 을 쌍 으로 제공한다.