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