[JS + jquery] Ajax 관련 메서드와 Ajax로 JSON 데이터 바인딩, XML 데이터 바인딩

 

1. Ajax 관련 메서드 

Ajax는 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버측에 자료 xml, html, json 를 요청할 때 사용한다. 

 

- Ajax 관련 메서드 

load()  : 외부 콘텐츠를 가져올 때 사용한다. 

$.ajax() : 데이터를 서버에 http post, get 방식으로 전송할 수 있으며, html, xml, json, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드이다. -> $.post() , $.get(), $.getJSON()을 합쳐 놓은 것이다.

$.post() : 데이터를 서버에 http post 방식으로 전송한 후 서버 측의 응답을 받을 때 사용한다. 

$.get() : 데이터를 서버에 http get방식으로 전송한 후 서버 측의 응답을 받을 때 사용한다. 

$.getJSON() : 데이터를 서버에 http get 방식으로 전송한 후 서버측의 응답을 json 형식으로 받을 때 사용한다. 

$.getScrit() : ajax를 이용하여 외부 자바 스크립트를 불러온다. 

.ajaxStop(function() {..}) : 비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다.

.ajaxSucess(function() {..}) : ajax 요청이 성공적으로 완료되면 함수가 실행된다. 

.ajaxComplete(function() {..}) : ajax 통신이 완료되면 함수가 실행된다. 

 

 

1️⃣ load() 메서드 

load() 메서드는 사용자가 지정한 url 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다. 

jquery_ajax_news.html의 아이디가 news1와 news2 를 가져옴 

 

2️⃣ $.ajax() 메서드 

$.ajax() 메서드는 사용자가 지정한 url 경로에 파일의 데이터를 전송하고 입력한 url 경로 파일로부터 요청한 데이터를 불러온다. 

 

$.ajax({

   url : "전송 페이지",

   type : "전송 방식", 

   data : "전송할 데이터", 

   dataType : "요청한 데이터 형식 (html, json, xml, text, jsonp)",

   success : function(data) {

     전송에 성공하면 실행할 코드;

   },

   error : function(data) {

     전송에 실패하면 실행할 코드;

  }

});

 

 

- $.ajax() 메서드의 옵션 종류

async : 통신을 동기, 비동기 방식으로 설정하는 옵션이다.  기본값 true (비동기)

beforeSend  : 요청하기 전에 함수를 실행하는 이벤트 핸들러이다.

cache : 요청한 페이지에서 인터넷에 캐시를 저장할지의 여부를 설정한다. 기본값은 true

complete : Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러이다.  

contentType : 서버로 전송할 데이터의 content type을 설정한다.  

data : 서버로 전송할 데이터를 지정한다.

dataType  : 서버에서 받아올 데이터의 형식을 지정한다. 

error : 통신에 문제가 발생했을 때 함수를 실행한다.  

success : Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행한다.  

timeout : 통신 시간을 제한한다. 시간 단위는 밀리초이다. 

type  : 데이터를 전송할 방식 get/post를 설정한다. 

url  : 데이터를 전송할 페이지를 설정한다. 기본값은 현재 페이지 

username : http 액세스를 할 때 인증이 필요한 경우 사용자 이름을 지정한다. 

 

- Ajax 전송 데이터 가공 메서드의 종류 

serialize() : 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 'name=value1 & name2 = value2,..'와 같은 쿼리 스트링 형식의 데이터로 반환 $("form").serialize();

serializeArray() : 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 '[{name1: value1}, {name2:value2}, ...'와 같은 배열 객체로 변환해 반환한다. $("form").serializeArray();

$.param() : {name1 : value1 & name2 : valu2 ..} 와 같이 작성된 객체를 가공해 'name1=value1  & name2=value2'와 같은 쿼리 스트링 형식의 데이터로 반환한다. $.param(Object);

JSON.parse() : 객체 형태로 작서한 문자열 데이터를 객체로 가공하여 반환한다. JSON.parse('{"name":"value"}');

JSON.stringify() : 객체를 문자열 데이터로 가공하여 반환한다. JSON.stringify({"name1":"value1" , "name2":"value2"});

 

2. Ajax로 JSON데이터 바인딩하기 

비동기 통신 기술을 이용하여 서버 데이터베이스에서 데이터를 요청하고 데이터베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는것을 바인딩이라고 한다. 

 

❗ JSON(JavaScript Object Notation) 

json은 데이터를 전달할 때 사용하는 표준 형식이다. json은 속성과 값으로 하나의 쌍을 이루고 있다. 

{"속성1" : "값1", "속성2" : "값2"}

예제의 json 데이터가 있다. 

이는 

https://mockaroo.com/

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

여기서 json, xml 데이터를 다운 받아서 사용한다. 

여기의 data에는 json 데이터가 참조된다. 

테이블 형식으로 출력된다. 

 

 

3. Ajax로 XML 데이터 바인딩하기 

❗ XML(eXtensible Markup Language) 확장성 마크업 언어 

xml은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있다. 

즉 서버의 데이터로 가공하는 것은 어렵지 않기 때문에 xml은 주로 데이터를 배포할 목적으로 사용한다. 

 

위의 사이트에서 xml 데이터를 다운받았다. 

$.each() 메서드는 제이쿼리 배열 메서드로 

선택자로 선택한 요소가 배열에 순서대로 저장된다. 

배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다. 

https://hyejin.tistory.com/198?category=1019892 

[JS + jquery] 제이쿼리 배열 메서드