[AJAX] - Asynchronous JavaScript and XML

웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 시작됐으며, 더 좋은 UX를 제공할 수 있는 기술이다. 간단하게 AJAX는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고받을 수 있습니다. 요즘 가장 많이 사용되는 데이터 포맷 형식은 JSON이다.

 

[특징]

1. 페이지 새로고침 없이 서버에 요청할 수 있다.

2. 서버로부터 데이터를 받고 작업을 수행한다.

 

[사용법]

1. XMLHttpRequest 객체를 이용한 방법

2. Fetch API를 이용한 방법 - XHR보다 간단하게 코드를 짜 서버와 통신을 쉽게 할 수 있다. 하지만 익스플로러에서는 적용이 되지 않는다고 하니, 참고해서 사용해야 한다.

 

 

[예제 - XHR(1)]

function ajax(data) {
 var xhr = new XMLHttpRequest();
 xhr.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 xhr.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 xhr.send();
}

 

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보낸다.

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백 함수가 실행된다.

콜백 함수가 실행될 때는 이미 ajax함수는 반환하고 콜 스택에서 사라진 상태다.

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직이다.

 

 

 

[XMLHttpRequest 객체의 메서드]

 

1. open 메서드

 

- 첫 번째 파라미터 

: HTTP 요구 방식(request method) ─ GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식이다.(반드시 대문자로)

 

- 두 번째 파라미터

: 요구하고자하는 URL 주소

 

- 세 번째 파라미터(옵션)

: 요구가 비동기식(Asynchronous)으로 수행될지를 결정한다. True(기본값)이면 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행된다. 이것이 AJAX 의 첫 번째 A (Asynchronous : 비동기성)이다.

 

 

2. send 메서드

 

: GET방식으로 요청을 하는 경우에는 파라미터가 없다.

 

: send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다. 데이터는 서버에서 쉽게 parse 할 수 있는 형식(format)이어야 한다.  JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능하다.

예시) "name=value&anothername="+encodeURIComponent(myVar)+"&so=on" 

 

 

 

[Response 속성들]

1. readyState

 

  • 0 (uninitialized) - (request가 초기화되지 않음)

  • 1 (loading) - (서버와의 연결이 성사됨)

  • 2 (loaded) - (서버가 request를 받음)

  • 3 (interactive) - (request(요청)을 처리하는 중)

  • 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

2. status

 

  • 200: "OK"

  • 403: "Forbidden"

  • 404: "Page not found"

3. statusText

: "OK" or "Not Found" 반환

 

 

 

 

[예제 - XHR(2)]

function getFactAjax() {
        let number = numberInput.value;

        let xhr = new XMLHttpRequest();
        xhr.open("GET", "http://numbersapi.com/" + number);// url에 값을 추가

        xhr.onload = function () {
          if (this.status == 200 && number != "") {
            fact.style.display = "block";
            factText.innerText = this.responseText;
          }
        };

        xhr.send();
        }

 

[예제 - Fetch]

function getFactFetch() {
        let number = numberInput.value;

        fetch("http://numbersapi.com/" + number)
          .then((response) => response.text())
          .then((data) => {
            if (number != "") {
              fact.style.display = "block";
              factText.innerText = data;
            }
          })
          .catch((err) => console.log(err));
      }

 

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] Advice Slip API 이용한 간단한 웹앱 - Fetch  (0) 2020.08.19
[JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch  (0) 2020.08.10
[JavaScript] Event - addEventListener, 이벤트 객체  (0) 2020.05.14
[JavaScript] JSON - JSON.parse(), JSON.stringify()  (0) 2020.05.13
[JavaScript] 함수  (0) 2020.05.13

css postioning 

 

화면 상 어디에 위치시킬 것인가 지정하는 속성
html화면 기준 x, y좌표를 지정해 위치를 조정한다.

 

1. static

: position 속성의 기본값으로 다른 요소와의 관계를 가지며 자동으로 배치되어 위치 조정 불가능하다. 따라서 top, left, right, bottom 설정을 할 수 없다. 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 아이템들이 쌓인다.

 

2. relative

: 다른 요소와의 관계를 가지며 자동으로 자신이 원래 있던 위치(즉, static일 때)를 기준으로 좌표를 지정한다.
주로 absolute속성과 같이 쓰일 때, 부모 컨테이너에 relative를 준다.

 

3. absolute

: 절대위치를 기점으로 좌표를 설정하고, static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

 

4. fixed

: window 즉 페이지를 기준으로 위치 설정(다른 position 값을 다 무시) 되며 스크롤을 내려도 항상 화면상의 그 위치에 있다. 화면의 절대 위치를 설정으로 위치가 고정되어진다. 그래서 보통 퀵메뉴, 메뉴바에 사용을 많이 한다.

 

5. sticky
: 원래 자리에 있으면서 대신 스크롤링 될 때, 없어지지 않고 원래 자리에 계속 위치함

 

 

예시

 

 

<body>
  <div class="box1">static</div>
  <div class="box2">relative</div>
  <div class="box3">absolute</div>
  <div class="box4">fixed</div>
</body>
body{
  border:3px solid green;
}

.box1{
  width:70px;
  height:70px;
  background-color: pink;
  position:static;
}
.box2{
  width:70px;
  height:70px;
  background-color: purple;
  position: relative;
  left:60px;
  bottom:20px;
}
.box3{
  width:70px;
  height:70px;
  background-color: orange;
  position: absolute;
  top: 30px;
  left:30px;
}
.box4{
  width:70px;
  height:70px;
  background-color: red;
  position: fixed;
  left:30px;
}
반응형
저작자표시 비영리 변경금지

'HTML & CSS' 카테고리의 다른 글

[CSS] 배경 이미지  (0) 2020.04.26
[HTML5 / CSS3] overflow속성  (0) 2020.04.25
[HTML5 / CSS3] 블럭 구조 vs 인라인 구조 vs 인라인블럭 구조  (0) 2020.04.25

JavaScript Event Listener 

 

Event

 

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 브라우저에서 많은 이벤트들이 발생하는데, 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다. 따라서 개발자는 HTML엘리먼트 별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다.

 

 

 

이벤트 등록

 

 

이벤트 리스너(event listener)

 

사용법

 

target.addEventListener(type, listener[, options])

: type은 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달한다. listener로 해당 이벤트 타입을 처리할 함수를 설정해준다. 마지막으로, options으로 이벤트를 전파할 방식을 설정해주는 것인데, 버블링 또는 캡처링 방식이 있지만 보통 default값(false)을 사용하기에 사용을 잘하지 않는다.

 

 

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

 

// HTML
<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>
//JavaScript
// 이벤트 리스너(함수)
function modify(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// 이벤트 리스너 등록
var el = document.getElementById("outside");
el.addEventListener("click", function(){modify("안녕")}, false);
// 출력
one
two // one 클릭 시, "안녕"으로 바뀜

 

 

 

 

이벤트 객체

 

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다. 이벤트 객체(event object)란 특정 타입의 이벤트와 관련이 있는 객체다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다. 이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다.

 

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);
// 출력

// one 클릭 시
<td id="t1">one</td>
TD

// two 클릭 시
<td id="t2">two</td>
TD

 

event.target은 이벤트가 발생한 element를 가리킨다.

element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있다.

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch  (0) 2020.08.10
[JavaScript] AJAX 란 무엇인가?  (0) 2020.07.17
[JavaScript] JSON - JSON.parse(), JSON.stringify()  (0) 2020.05.13
[JavaScript] 함수  (0) 2020.05.13
Javascript 기초 문법 - 변수, 연산자, 타입  (0) 2020.04.17

 JSON.parse, JSON.stringify 

 

JSON

 

JSON은 객체, 배열, 숫자 ,문자열, boolean, null을 '직렬화'하기 위한 구문으로, JavaScript 구문에 기반을 두고 있지만 분명한 차이가 있다. 즉 JavaScript는 JSON이 아니다.

 

1. 객체와 배열
속성의 이름은 반드시 '큰따옴표'로 표시한 문자열이어야 한다. 


2.숫자
선행 0은 허용하지 않는다. 소숫점 뒤에는 적어도 한 자릿수가 있어야한다. Nan과 infinity는 지원하지 않는다.

 

3. JSON.parse()

 

문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환한다.

 

사용법

JSON.parse(text[, reviver])

 

매개변수

text : JSON으로 변환할 문자열

reviver : 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.

 

반환값

주어진 JSON 문자열에 대응하는 Object(객체)

 

예외(오류)

변환할 문자열이 유효한 JSON이 아닐 경우 SyntaxError

 

const json = '{"result" : true, "count" : 42}';
const obj = JSON.parse(json);

console.log(obj.count); // output : 42
console.log(obj.result); // output : true
console.log(obj); //Object { result: true, count: 42 }

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"bamm"');           // "bamm"
JSON.parse('[1, 3, "false"]'); // [1, 3, "false"]
JSON.parse('null');            // null

 

4. JSON.stringify()

 

주어진 값(JavaScript 값이나 객체)에 해당하는 JSON문자열을 반환한다. 선택 사항으로 특정 속성만 포함하거나 사용자 정의방식으로 속성을 대체한다.

 

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

 

사용법

JSON.stringify(value[, replacer[, space]])

 

매개변수

value : JSON 문자열로 변환할 값

replacer : 문자열화 동작 방식을 변경하는 함수, 혹은 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트(whitelist)로 쓰이는 String 과 Number 객체들의 배열. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

 

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch  (0) 2020.08.10
[JavaScript] AJAX 란 무엇인가?  (0) 2020.07.17
[JavaScript] Event - addEventListener, 이벤트 객체  (0) 2020.05.14
[JavaScript] 함수  (0) 2020.05.13
Javascript 기초 문법 - 변수, 연산자, 타입  (0) 2020.04.17

+ Recent posts

티스토리툴바