Study_web/Ajax 썸네일형 리스트형 Ajax(Asynchronous JavaScript and XML) - 예제 2(JSON 이용) JSON - JSON은 JavaScript Object Notation의 약어로 XML 데이터를 대신하기 위해 사용된다. - JSON은 키와 값을 쌍으로 가지는 구조이다. - 배열을 사용할 때는 대괄호( [ ] ) 안에 중괄호 ( { } )를 사용하여 조합한다. - jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가 필요할 때 이를 로드할 수 있는 $.getJSON( ) 함수를 제공한다. - 서버로부터 get 방식의 요청을 하고, 응답을 JSON 형식으로 받기 위해서 $.getJSON( ) 함수를 사용한다. - $.getJSON( )함수의 첫번째 매개변수는 서버의 url주소를 지정한다. ( 'item.json' ) - 서버로 요청이 성공적으로 완료되면, 두번째 매개변수로 기술한 콜백함수.. 더보기 Ajax(Asynchronous JavaScript and XML) - 예제 1 - $.ajax() 함수는 Ajax 요청을 설정하고 제어할 수 있도록 jQuery에서 제공하는 유틸리티 함수이다. - $.ajax() 함수를 실핼할 때 옵션으로 URL값을 지정하면 해당 URL서버로 Ajax요청을 한다. - success 옵션에 지정한 콜백함수(fuction(data))는 요청이 성공했을 때 호출된다. - 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다. - $.ajax() 함수는 서버에서 반환되는 데이터의 형식에 따라 다르게 동작한다. 서버측에서 html데이터를 반환하면 html을 받아와 처리하기 위해서 데이터 타입(dataType) 옵션에 html을 지정한다. 예제 1-1 example 1-2 메뉴 보기 1 메뉴 보기 2 2 menu.html menu paste stake .. 더보기 Ajax(Asynchronous JavaScript and XML) - (1) 특징, 장단점 Ajax(Asynchronous JavaScript and XML) - Asynchronous 비동시성의, 비동기의 (동시에 일어나지 않는) - synchronous 동기(동시에 일어나는) 기존 기술과의 차이점 - 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성 응답으로 되돌려준다. - > 결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로 대역폭을 낭비하게 된다. - 반면 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 장점 페이지 이동없이 고속으로 화면을 전환할 수 있다. 서버 처리를 기.. 더보기 이전 1 다음
