파일에 있는 데이터를 불러오는 방법으로 load() 메소드를 사용하는 방법에 대하여 알아보려합니다.load() 메소드는 비동기 방식으로 특정 위치에 있는 파일의 객체 또는 문서를 불러올 수 있는 AJAX 메소드입니다. 이런 비동기 방식은 당연히 ajax()가 매우 익숙한데 이 메소드의 단축 메소드로 하는 일은 거의 동일합니다. 이런 단축 메소드는 get(), post(), getJSON()등이 이에 속합니다. 그럼 load() 메소드의 사용방법에 대하여 알아보도록 하겠습니다. 일단, load() 메소드의 사용방법은 아주 간단합니다. 아래는 간단한 사용방법입니다.$.load(url, data[Option], callback)// Ex) $.load('test.html', {bdn: 'js'}, functi
Last Modified : 2019-08-14 22:01:03jQuery를 사용하여 비동기 통신 AJAX를 사용할때 대기시간을 설정할 수 있습니다. 이 값을 설정하면 대기하는 시간이 지날 경우 에러 등의 상태로 전환하게 됩니다.알려진바로는 timeout의 기본값은 브라우저 및 환경에 따라 각기 다르다고 합니다.대기시간을 설정하는 이유는 통신 지연등의 이유도 있지만 Long polling이라는 방식에서도 사용됩니다. 이는 연결 대기시간을 늦추어 완벽하지는 않지만 게속 통신이 가능하도록 유지하는 방법 중 하나입니다.그럼 아래는 jQuery에서 AJAX의 대기시간을 설정하는 예제입니다. 이때 timeout 값을 설정하도록 합니다.# 제이쿼리 AJAX의 대기시간 설정 예제보기 $.ajax({ url: '/blog/', type: 'get', dataType: 'json
Last Modified : 2017-08-28 12:33:58
자바스크립트가 비동기방식의 ajax가 없었다면 꽃을 피웠다 얘기할 수 있었을까요? 재미있게 시작했지만 분명 자바스크립트에게 ajax, 비동기 방식의 호출은 가장 큰 발전의 계기가 되었음이 틀림없습니다... 아래는 이 중요한 ajax에 대하여 하나하나 알아보려합니다. 먼저, ajax가 무엇인지 알아보고 자바스크립트를 사용해 이를 구현하는 다양한 방법들에 대하여도 함께 알아보도록 하겠습니다.! ajax란 무엇인가?ajax는 비동기식 자바스크립트 통신을 의미합니다. 즉 서버와의 웹통신 방법을 비동기식으로 웹페이지를 리로드하지 않고 필요한 순간에 접속하여 데이터를 가져오는 방법입니다. 비동기 방식을 구현하기위해서는 자바스크립트의 XMLHttpRequest 라는 API가 존재하는데 이는 비동기 방식을 구현해주는 가장
Last Modified : 2019-08-01 08:15:59서버와 통신하기 위해 동기식 또는 비동기식 방법을 택할 수 있습니다. 아무래도 비동기식 방법은 서버에 부하를 덜어주기 때문에 유용한데요... 제 블로그의 경우 포스팅을 수정하거나 등록시 기존의 동기식 방법을 비동기식으로 변경하였습니다. 변경을 통해 얻을 수 있던 장점들은 아래와 같습니다.! 비동기식 변경 후 장점1. 서버에 전달 할 내용이 비동기식으로 변경하여 전체 소스를 읽는 리소스 낭비가 없다.2. 1번 덕분에 자동 저장 기능을 만들 수 있다. 예를 들어 30초 마다 자동으로 서버에 데이터 전송(기존 방식은 리소스 부담으로 어려움)# 비동기식 방법을 위한 자바스크립트 코드 추가<script>$(function() { var save_bt = $('#save_bt'); // 저장할 버튼을 변수에 선언 sa
Last Modified : 2015-11-02 17:59:07
자바스크립트를 사용하여 AJAX 비동기 통신을 위해 별도의 라이브러리를 많이 사용하고 있습니다. 예를들면 jQuery의 ajax() 메소드를 사용하거나 아니면 axios 라이브러리 등을 단지 AJAX 구현을 위한 목적으로 추가해 사용해왔습니다.왜냐하면 순수 자바스크립트 및 기존 비동기 통신이 어렵고 비효율적이기 때문입니다. 특히 XMLHttpRequest를 사용해서는 원하는 기능을 모두 구현하기 위해서는 매우 복잡하고 Promise 객체를 함께 사용하는 것도 쉽지 않았기 때문이죠.! ES 6의 fetch API를 알아보자자바스크립트의 ES 6가 점점 표준이 되면서 fetch API를 사용하는 경우도 점점 많아졌습니다. fetch API는 ES 6의 비동기 통신 방법으로 자체로 Promise 객체를 반환하
Last Modified : 2020-03-12 23:31:09
제이쿼리는 ajax() 함수외에도 다양한 단축메소드가 존재합니다. 이중에서도 getJSON() 메소드에 대하여 알아보고자 합니다. 참고로 ajax 단축 메소드는 이외에는 get(), post(), load()등의 메소드가 존재합니다. getJSON() 메소드는 언제 사용할까요? getJSON()은 비동기식으로 서버와 접속해 데이터를 불러올 때 사용하는 점은 같으나 JSON 타입의 데이터를 불러옵니다. 이는 ajax() 메소드의 dataType: 'json' 과 동일한 역할을 수행합니다.$.ajax({dataType: 'json', ... }) // 왼쪽의 축약형 getSON() 메소드일단 아래에서는 getJSON() 메소드의 간단한 사용 모습을 알아보자.getJSON(url, data[Option], cal
Last Modified : 2016-05-16 20:02:20
비동기 방식(AJAX)을 사용한 웹사이트 구현시 제이쿼리의 ajax()메소드를 많이 사용한다. 이때 AJAX의 요청이 시작 또는 완료될 경우 특정한 메시지나 문구를 방문자에게 알림창 등의 방식으로 보여주기 위하여 ajaxStart() 그리고 ajaxStop()메소드를 사용할 수 있다. 먼저 이 두가지 메소드를 간단하게 설명하면 아래와 같다. ajaxStart() 메소드 - AJAX 요청이 시작되는 시점에 해당 함수를 실행ajaxStop() 메소드 - 실행중인 모든 AJAX 요청이 멈추게되면 해당 함수를 실행 # AJAX 실행시 함수 실행이 필요한 경우비동기 방식은 페이지 reload에 따른 화면 전환이 발생하지 않으므로 사용자가 인지하기 어렵다. 이런 경우 사용자가 쉽게 알아볼 수 있는 UI를 제공하는 것이
Last Modified : 2016-06-13 15:28:24
요즘의 웹에서 비동기 방식의 ajax 호출이 웹환경에서의 꽃이라 할만큼 중요한 부분을 차지합니다. 그만큼 비동기 방식의 통신이 많이 사용되고 반드시 필요하기 때문이죠. 제이쿼리에서 ajax를 사용한 비동기 방식에 대하여 간단하게 알아보고 어떻게 사용하는지 아래에서 알아보겠습니다.# ajax란 무엇이고 장점은?먼저 ajax에 대하여 알아보겠습니다. ajax를 설명하자면... 동기 방식과 달리 페이지 전체를 다시 불러오지 않고 필요한 부분 일부만 호출하여 웹사이트에 반영하는 기술입니다. 이런 비동기 방식을 사용하면 다음과 같은 장점이 있습니다.! ajax 비동기 방식의 장점 보기비동기 방식의 장점은 무엇인지 알아봅니다. 간단하게 아래와 같은 장점이 있습니다.1. 일부만 불러오므로 호출시간과 페이지 로딩 시간이
Last Modified : 2019-10-21 14:28:51
자바스크립트를 사용하여 비동기 방식(ajax)으로 처리하는 웹사이트가 많이 늘어나고 있습니다. 그 이유는 역시 비동기식 방식(asynchronous way)이 가진 많은 장점 때문인데요...아래는 자바스크립트를 사용하여 비동기 방식의 네트워크(ajax)를 구현하는 방법에 대하여 자세히 알아보고자합니다. 그럼 우선적으로 동기식과 비동기식의 차이점 및 특징은 무엇이 있을까요?! 동기식과 비동기식의 차이동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이함을 의미합니다. 만약 서버에서 호출된 결과까지의 시간이 지연이 생길 경우 웹에서는 아무런 작동 없이 기다려야하며 새로운 콘텐츠를 추가, 불러오기 위해서는 페이지를 리로드 하거나 이동하는 것이 필요합니다. 하지만 비동기 방식은 이와 상관없
Last Modified : 2019-10-21 14:07:33
ajax 요청은 페이지 로딩 없이 데이터를 불러올 수 있다는 장점이 있다. 하지만 지나친 ajax 요청으로 데이터베이스 서버에 과부화를 줄 수도 있고 접속 인원이 많은 시간대에 데이터 트래픽이 과중될 경우 서버가 동작하는 않는 등의 문제가 생길 수 있을 것이다. 이런 문제는 아무리 데이터베이스 설계가 잘되있고 완벽한 환경을 갖추었다해도 언제든지 발생할 여지가 있다.이런 문제가 발생하는 부분 중 하나로 예를들자면... 만약 검색어 영역에서 키보드를 누를때마다 미리보기를 위한 ajax 요청이 발생하는 경우를 생각해 볼 수 있을 것이다. 만약 수 많은 사용자가 키보드를 계속해서 누를 경우... 사용자가 많다면 지나치게 많은 요청이 발생할 수 있고 이는 해결하기 위한 방안이 필요할 것이다.이런 경우에 어떠한 대안이
Last Modified : 2016-07-15 08:24:15SOP(Same Origin Policy) 때문에 자신의 도메인이 아닌 다른 웹사이트에 있는 코드를 가져오는 방법이 간단하지 않습니다. 브라우저 정책에 어긋나기 때문에 오류를 발생하기 때문이죠. 하지만 이를 우회할 수 있는 방법이 있으니 가장 큰 방법으로 아래의 세가지입니다.1. JSON Padding2. YQL3. 서버단 페이지에서 코드를 불러와 파싱 후 ajax로 불러오는 방법위 방법들 중 세번째 방법은 직접 ajax()를 사용하지 않고 서버단에서 불러온 뒤 다시 파싱하는 방법으로 동일 출처 정책에 상관없이 불러온다는 장점이 있습니다. 그 외의 방법들 중 두번째 방법이 오늘 말하고자 하는 YQL입니다. YQL 방법을 사용하여 비동기로 불러오는 방법과 jsonp 이 두가지 방법의 차이 및 특징은 무엇이 있
Last Modified : 2016-07-20 13:21:27
자바스크립트를 사용하여 서버와 통신하는 다양한 방법이 존재합니다. 오늘은 이미지핑(image ping) 기술에 대하여 알아보고 어떻게 사용하는 예제를 통해 배워보려합니다.# 이미지핑이란?서버와의 통신을 확인할때 한번쯤 ping이란 명령어를 사용해보신 적 있으신가요? 예전에는 인터넷 속도나 연결상태를 확인하기 위해서 커맨드에서 자주 사용하던 명령어입니다. 만약 특정 ip에 ping을 사용하면 일정시간을 주기로 해당 ip에 통신하여 연결상태를 알려주는 역할을 하게됩니다.C:/> ping 1.23.456.7810ms9ms.....오늘 알아볼 이미지핑 역시 이처럼 서버와 계속해서 통신하면서 이를 활용하여게 여러가지 용도로 사용할 수 있습니다.! 이미지핑은 어떻게 사용하는가코드는 매우 간단합니다. 접근할 주소를 im
Last Modified : 2017-12-22 01:34:07자바스크립트를 사용하여 비동기 방식으로 파일 업로드하는 것이 가능합니다.비동기 ajax로 파일 업로드가 가능이 전에는 파일을 비동기식으로 데이터에 전달하기 어려웠으나 자바스크립트 API인 FormData를 사용하면 쉽게 파일을 서버에 ajax로 전달할 수 있죠.자세한 내용은 아래 포스팅에서 설명하였으니 링크를 참고하시기 바랍니다.링크 바로가기 >https://webisfree.com/2018-02-21/자바스크립트-ajax를-사용하여-비동기-방식-파일-업로드-예제(아래는 업데이트 이 전 글 내용)비동기식으로 파일을 전송하겠다는 생각을 해본적이 없었기에 가능한지 궁금했습니다. 우선 결론부터 말하자면 가능하다는 것입니다.그러나...가능은 하지만 그리 간단하지는 않습니다. 모든 브라우저에 적용하기 어려운 부분이
Last Modified : 2020-08-26 20:08:23