파일에 있는 데이터를 불러오는 방법으로 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클라이언트에서 파일을 업로드할 경우 ajax 즉, 비동기 방식으로 업로드는 하는 방법을 알아봅니다. 어떻게 하면 그리고 왜 비동기식 파일 업로드가 필요할까요?# AJAX를 사용한 파일 업로드 알아보기예전에는 주로 form 태그에 몇 가지 속성을 사용하여 submit 방식으로 파일 업로드를 수행하였습니다. 하지만 최근에는 업로드하는 경우 AJAX 방식을 사용한 비동기식 파일 업로드가 많이 사용됩니다. 특히 SPA(Single Page Application)의 경우 더욱 더 많이 사용되지요. 이 경우 blob 방식으로 변환하는 방법도 있고 아니면 FormData 객체를 사용할 수 있습니다. 아래는 FormData 객체를 사용하는 방법을 알아봅니다.! ajax 방식의 파일 업로드 자바스크립트에서 구현하기파일 업로
Last Modified : 2018-02-22 23:54:42서버와 통신하기 위해 동기식 또는 비동기식 방법을 택할 수 있습니다. 아무래도 비동기식 방법은 서버에 부하를 덜어주기 때문에 유용한데요... 제 블로그의 경우 포스팅을 수정하거나 등록시 기존의 동기식 방법을 비동기식으로 변경하였습니다. 변경을 통해 얻을 수 있던 장점들은 아래와 같습니다.! 비동기식 변경 후 장점1. 서버에 전달 할 내용이 비동기식으로 변경하여 전체 소스를 읽는 리소스 낭비가 없다.2. 1번 덕분에 자동 저장 기능을 만들 수 있다. 예를 들어 30초 마다 자동으로 서버에 데이터 전송(기존 방식은 리소스 부담으로 어려움)# 비동기식 방법을 위한 자바스크립트 코드 추가<script>$(function() { var save_bt = $('#save_bt'); // 저장할 버튼을 변수에 선언 sa
Last Modified : 2015-11-02 17:59:07제이쿼리는 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:24ajax를 사용하여 데이터를 불러올 때 파싱에러가 발생했다면? 일단 인코딩 문제도 아닌 것 같은데 그 이유를 알 수 없다면 아래의 상황을 의심해보자...예전에는 서버에서 데이터를 불러올때 인코딩 문제가 가장 많았다 인코딩은 db, 서버언어, 프론트언어 어디서든 발생할 수 있기 때문이다. 사실 이런 문제로 시간을 많이 보냈지만 지금처럼 SPA(single page app)이 많아 지고 비동기식 호출이 많아 지면서 콘솔에 알지 못하는 파싱 에러가 출력될 수 있다.가장 먼저 의심해야할 부분 중 하나로 비동기식 코드의 ajax를 살펴보자... 예를들어 json 타입의 데이터를 불러올 경우 불러올 데이터에 따옴표(quatation)가 둘어가 있는지 확인해보자.# 서버쪽 따옴표 escape, 프론트는?물론 서버쪽은
Last Modified : 2017-03-05 20:42:31비동기 방식으로 새로운 콘텐츠를 불러오는 경우 로딩중이라는 아이콘이나 모달창등을 어디서나 쉽게 볼 수 있다. 오늘 우리가 만들어보려 하는 것은 바로 'Loading...' 문구를 콘텐츠 영역 가까이에 표시해보려고 한다. 아래에는 이를 구현하기 위해 필요한 html, css 그리고 자바스크립트 코드이다. 먼저 비동기 AJAX 구현시 이런 인터페이스가 왜 필요한지부터 간단하게 알아보자.페이지에 AJAX를 사용해 새로운 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 에러라고 생각한 뒤 이탈하려는 유
Last Modified : 2017-08-28 12:33: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:33Ajax등의 비동기 통신으로 받은 데이터가 문자열이나 객체 구조를 띄는 경우가 있습니다. 실제로 데이터베이스 또는 로컬에 저장할때 문자열로 변환 후 저장하기도 하는데 이런 경우 다시 객체 구조로 변환해야 사용할 수 있죠. 이 방법으로 JSON.parse()를 사용합니다.# JSON.parse()를 사용하여 객체로 변환하기아래 예제는 받아온 데이터가 responseText라는 변수에 저장하였고 이를 다시 변환해 사용하는 간단한 예제입니다.먼저 responseText에는 다음과 같은 문자열이 저장되어 있습니다.var responseText = '{ "name": "webisfree", "url": "webisfree.com" }';매우 간단한 예제코드입니다. 이제 위 텍스트를 객체 형태로 변환해볼까요? 아래를
Last Modified : 2017-10-20 14:05:22반나절을 헤메다가 100%는 아니지만 어느 정도 해결된 인코딩 문제의 해결 과정에 대하여 이야기하려 합니다. 인코딩 문제는 웹사이트 구축시 매우 자주 발생하는 이슈중 하나죠. 해결도 비교적 간단하지 않습니다.! 문제 발생JSON 타입의 파일을 자바스크립트(jQuery)를 사용해 AJAX로 불러온 후 화면에 출력하려고 코딩 하던 중 뜻하지 않은 오류가 발생했습니다. 이상하게도 불러올 값 중에서 제목은 아무런 문제가 발생하지 않았으나 본문을 불러올때 AJAX 기능에 문제가 생기더군요...!! 증상일단 본문 인코딩 때문이라 생각하고 태그도 없애고 길이도 줄여가고 인용코드인 따옴표등도 삭제하기도 하고... 참 많은 방법을 사용했습니다. 그 결과 일부 문자열 출력시 정상 동작하였으나 원하는 텍스트 전체를 불러올 경우
Last Modified : 2015-11-30 14:01:45CKEDITOR를 사용하여 AJAX로 불러온 데이터를 추가하는 방법입니다. 아래 방법이 유용한 이유는 CKEDITOR를 사용하여 다른 방법으로 텍스트를 추가할 경우 함께 추가된 img 및 태그 요소가 적용되지 않을 수 있습니다. 이 경우 아래 방법을 사용하면 모두 정상적으로 코드가 추가되게 됩니다. 그럼 아래 코드를 봐주세요.# CKEDITOR 에디터 html 코드 적용하는 예제소스// Insert Text into CKEDITORCKEDITOR.instances.blogEditor.setData(); // 에디터에 내용 초기화(비우기) setTimeout(function() { CKEDITOR.instances.blogEditor.document.getBody().setHtml(response.
Last Modified : 2017-08-11 01:42:44ajax 요청은 페이지 로딩 없이 데이터를 불러올 수 있다는 장점이 있다. 하지만 지나친 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자바스크립트에서 서버에 데이터를 전달해주는 API(인터페이스) FormData에 대하여 알아보겠습니다.! FormData는 무엇인가?자바스크립트를 사용하여 데이터를 서버에 보낼 수 있으며 Ajax 방식, 비동기식으로 데이터나 파일 모두 전송 가능하다는 점이 장점입니다. 최근 FormData가 많이 사용되는 이유는 비동기식 통신으로 <form></form> 태그를 직접 사용하지 않아도 되기 때문입니다.- key/value 방식으로 입력폼에 값을 쉽게 추가할 수 있음- AJAX 비동기으로 사용이 가능- 데이터 및 파일 전송이 가능# FormData 메소드 알아보기아래는 FormData에 사용되는 메소드 목록입니다. 데이터를 추가하거나 삭제, 출력 등이 가능한 명령어입니다. 하나씩 알아보겠습니다.@ append(
Last Modified : 2019-08-01 08:29:17react native에서 ajax를 사용하여 네트워크를 사용하는 방법, api를 호출하는 방법을 알아봅니다. react native는 어떻게 사용할까요?# react에서 ajax 호출 네트워크 사용방법먼저 react native에서 ajax를 사용하려면 몇 가지 방법이 있습니다. 가장 먼저 자바스크립트의 XMLHttpRequest를 사용하는 방법과 react native의 fetch()를 사용하는 방법입니다.또 async를 사용할 수 있죠. 아래는 많이 쓰이고 간단한 방법인 fetch()를 알아봅니다.! fetch()를 사용하여 ajax 호출하기fetch의 문법을 먼저 알아봅니다. 가장 간단한 방법으로 아래와 같이 사용합니다.fetch(url, [options])이때 option은 선택할 옵션을 입력하며
Last Modified : 2018-11-05 22:58:06비동기식으로 파일을 전송하겠다는 생각을 해본적이 없었기에 가능한지 궁금했습니다. 우선 결론부터 말하자면 가능하다는 것입니다.그러나...가능은 하지만 그리 간단하지는 않습니다. 모든 브라우저에 적용하기 어려운 부분이 있어 파일 전송 플러그인을 사용하는 것이 가장 효과적인 방법입니다.
Last Modified : 2015-11-06 01:04:02AngluarJs에서 비동기 방식의 ajax를 $http 서비스를 사용하여 수행할 수 있습니다. 이때 만약 request에 대한 특정 명령이나 취소 등을 수행하려면 어떻게 할 수 있을지 아래에서 알아봅니다. 우선 취소하는 방법 부터 알아봅니다.# $http 요청 취소하는 방법 먼저 취소를 위해서는 현재 pending된 request가 있는지 알아야합니다. 이때 $http 서비스 객체의 pendingRequests 프로퍼티를 확인하여 어떤 요청이 진행 중인지 확인할 수 있죠. 아래 예제는 취소가 필요한 상황에 cancelRequest()라는 함수를 동작시켜 취소하고자 합니다.function cancelRequest() { angular.forEach($http.pendingRequests, function
Last Modified : 2018-02-12 04:35:31제이쿼리(jquery)에서 사용하는 when() 메소드에 대하여 알아봅니다.# 제이쿼리 when() 메소드제이쿼리의 when()은 ajax의 결과를 리턴받아 처리하도록 도와줍니다. 즉 ajax를 사용하는 경우 발생하는 Promise 객체를 처리할 수 있습니다. 아래는 간단한 문법입니다.$.when(ajax1, ajax2, ...).done(function(resp1, resp2, ...) { ...});여러개의 ajax를 ajax1, ajax2와 같이 사용하고 뒤의 콜백에서 resp1, resp2...로 결과를 처리합니다.! when()은 언제 사용하는가?보통 하나의 ajax를 호출하는 경우보다는 여러개의 ajax 콜이 필요한 웹사이트에서 단계적으로 또는 동시에 결과를 처리하기 위해서 많이 쓰입니다.- 순
Last Modified : 2019-08-17 12:14:34웹 어플리케이션이 싱글페이지(SPA) 서비스를 제공하면서 서버측 랜더링이 점점 축소되는 것 같습니다. 여기서 말하는 서버측 렌더링은 ajax 비동기 방식이 아닌 서버언어를 그대로 사용하여 불러오는 것을 말합니다.이는 클라이언트 렌더링과 서버측 렌더링으로 바꾸어 말할 수 있습니다. 일단 두 가지를 단순하게 비교하면 초기 페이지를 로딩할 때 클라이언트 렌더링의 로딩 속도보다 서버 렌더링 속도가 더 빠르다 할 수 있죠. 하지만 전페 페이지를 기준으로 본다면 이야기는 달라집니다. 페이지 로딩이 끝난 뒤에도 클라이언트는 계속해서 불러올 수 있으므로 전페로 본다면 클라이언트가 더 빠르다 얘기할 수 있습니다.그렇다면 어떤 경우에 렌더링 방식이 더 효과적일까요 그리고 꼭 서버언어를 사용하는 경우는 언제가 있을까요? 그리고
Last Modified : 2017-09-21 00:18:41AngularJS에서 AJAX를 끝마치고 다른 디렉티브 ~ 하위 디렉티브에 이벤트 콜백 함수를 호출하는 방법들은 무엇이 있을까요?# $broadcast를 사용한 이벤트 전달 방법# $watch와 변수 isLoaded를 사용하는 방법# Directive의 scope 설정시 ajax 호출 함수를 추가하는 방법위 방법이 있을 것 같습니다. 세 가지 모두 자주 사용되는 방법입니다. 일반적인 경우 1번 $broadcast가 많이 사용될 것입니다.
Last Modified : 2017-08-11 01:41:41자바스크립트를 사용하여 AJAX 통신을 사용할 때 다른 자바스크립트 라이브러리를 많이 사용하였습니다. 대표적으로 jQuery의 ajax()를 말 할 수 있겠죠. 물론 지금까지도 사용되되는 XMLHttpRequest(XML)를 사용할 수도 있으나 상대적으로 복잡하고 옵션값 등을 설정하거나 Promise()를 함께 사용하는 것도 어려웠죠.! ES 6의 fetch API자바스크립트의 ES 6가 점점 표준이 되면서 fetch API를 사용하는 경우도 점점 많아졌습니다. fetch API는 사용하기 간단하고 자체로 Promise 객체를 반환하여 함께 사용하기도 편리합니다. 아래는 fetch API를 사용하여 서버와 비동기 통신을 어떻게 할 수 있는지 그 방법과 예제에 대하여 자세히 알아봅니다.@ 장점- 사용이 간단함
Last Modified : 2019-08-01 08:08:29AngularJS에서 AJAX 콜백을 받은 후에 코드를 수행하는 방법에 대하여 알아봅니다. 먼저 생각할 수 있는 부분은 아래와 같이 3가지가 있습니다.Promise를 넘겨주는 방법$watch 서비스를 사용하는 방법ng-if를 사용하는 방법위 세가지 방법을 사용하여 가능합니다.# Promise를 사용하는 방법ajax에서 전달받은 promise를 return 받아 .then()에서 코드를 수행하는 방법입니다. 코드는 명확하지만 다소 길고 복잡할 수 있습니다. 수행하는 ajax()가 포함될 함수를 적용할 디렉티브의 스코픙 추가하여야하는 번거로움이 있습니다.# $scope.watch를 사용하는 방법이 방법은 모델, 데이터의 값이 변하는 경우에 watch()를 사용하여 콜백함수를 실행하는 방법입니다. 만
Last Modified : 2017-12-05 00:17:57jquery에서 서버와 비동기로 통신할 수 있는 ajax()의 단축 메소드 post()에 대하여 알아봅니다.# jQuery post() 메소드제이쿼리의 post()는 ajax인 서버와의 비동기 통신을 가능하게해주는 메소드입니다. ajax() 메소드와 기능적으로는 동일하며HTTP post 방식의 통신에 사용되도록 정해진 단축 메소드입니다. 그렇다면 어떻게 post()를 사용하는지 아래에서 예제로 알아봅니다.# jquery post() 메소드 예제보기ajax()의 단축 메소드이므로 사용 방법은 아주 간단한데 $.post()에 서버 url주소와 전달할 데이터를 바로 넘겨주면됩니다. 아래 예제는 임의의 서버와 통신하는 예제로 수신 결과를 콘솔에서 출력하는 간단한 예제입니다.var url = 'webisfree.co
Last Modified : 2018-08-23 21:17:07hijax란 무엇인가요? 123
Last Modified : 2017-03-29 03:12:11
