들어가며 JavaScript에서 웹 개발을 할때 Front의 코드를 구현할때 Ajax를 이용하면 쉽게 서버로부터 데이터를 받아오고, 전송을 할 수 있다. 아래 소스코드는 nodeJs와 같이 웹 서버 프레임워크가 설치가 되어있고, 서버가 실행이 되어 있어, 해당 요청 URL을 처리를 할 수 있는 상태가 필요하다. 전송하는 방법은 앞서 설명했던 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만. POST로도 데이터 전송이 가능하다는 점~ 서버에서 Web Front로 데이터 전송 서버로 부터 초기의 데이터를 Web Application으로 불러오는 소스코드입니다. ajax로 설정한 url을 요청을 하면..

JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제 들어가며 만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다. APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 ..

Ajax란 무엇이도냐 (Asynchronous JavaScript and XML) 브라우저가 -request->서버에 전송하는 방법은 1. Form 2. Link () 3. 주소창에 입력 Web이라는 환경 안에서는 browser가 서버에 request를 보내는 방법이 없었습니다. (url로 요청을 해야겠지요?) request를 보내면, response를 받아서 browser가 refresh를 합니다. (그러면 기존에 있는 화면을 전체 변경 하겠지요) 4. XMLHttpRequest라는게 새롭게 추가되었지요. (programming으로 변경 javascript로) javascript로 request를 발생시킬 수 있는... 왜 XML이 붙어있을까? request를 보낼때 url이라고 보내는데 (parame..

참조문서 : https://blog.seotory.com/post/2016/04/understand-jsonp JSONP는 json with padding의 약자이다. 태그는 SOP 정책에 속하지 않는다는 점을 이용해, 서로 다른 도메인간의 javascript 호출을 위하여 jsonp가 사용되었다. 1. 원리 API서버에 데이터를 요청할 페이지에서 서버의 데이터를 받아 처리할 콜백 함수를 준비한다. 그 후에 script 태그를 생성하고 API서버에 request한다. 데이터 요청을 받은 서버에서는 콜백 함수를 실행하는 스크립트를 출력한다. 이 때 callback 함수의 인자에는 요청받은 데이터(기존 JSON)가 들어간다. 즉, 기존에 서버에서 {"key1" : "value1", "key2" : "valu..

참조문서 https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy https://developer.mozilla.org/ko/docs/Web/HTTP/Access\_control_CORS 클라이언트단에서 해결 브라우저에서 옵션 변경 크롬 확장프로그램 플러그인 JSONP 서버단에서 해결 CORS 이외에도 document.domain 속성을 사용하는 방법, Cross-document messaging 등이 있다. 1. 동일 출처 정책(SOP) 만약 나의 API서버를 외부 웹 서비스에서 막 접근해서 가져다 쓴다면 문제가 있다. 따라서 이런 행위를 차단하려고, 동일한 도메인이 아니면 아래처럼 크로스도메인 이슈를 발생시킨다. XMLHttpRequ..

참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 1 cs 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다. $(document).ready(function () {} // 단축표기 $(function() {..

참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..

JS를 이용한 HTML include HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자 1. 사용법 에 를 넣어준다. 에 를 넣고 를 호출해준다. 여기서는 navbar를 관리하고 있다. 2. includeHTML.js 코드 function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttr..

Ajax 데이터통신 기본 1. 파일 내용(1) test.html 글번호 아이디 코멘트 ajaxReturnOutput (2) test2.jsp 글번호: 아이디: 코멘트: 실행결과)버튼 클릭시 출력되는 예제이다. cf.) serialize() 예제 반복횟수 아이디 코멘트 beforeParameter ajaxReturnOutput 출처: https://devbox.tistory.com/entry/jQuery-jQeury를-이용해-JSON-데이터-가져오기?category=578062 [장인개발자를 꿈꾸는 :: 기록하는 공간]

Ajax 설정 cp.) 요청 매개 변수와 함께 Ajax 요청을 수행한다. data 속성을 사용하면 요청 매개 변수를 쉽게 지정할 수 있다. $ajax() 메서드의 옵션 객체에 url 속성을 입력하고 data 속성에 객체를 입력한다.ex.) url: 'Home/ActionWithData'. data: name:'rintiantta',age:21, success: function(data) .......이렇게 하면 http://localhost:8080/Home/ActionWithData?name=rintiantta&age=21로 Ajax 요청을 수행한다. 1. $ajax 설정값 (1) url HTTP 요청을 할 대상이되는 url단순히 html 페이지에 대한 주소가 될 수도 있고 WCF.ASMX 서비스에서 ..