Javascript_JQuery, Ajax

이번주에 어려웠던 부분이었다 jQuery와 Ajax...
정말 어떨때 쓰는건지 어떻게 쓰는 건지 1도 감이 안왔는데, 혼자 천천히 수업노트 다시 정리하면서, 여러글을 보다 보니, 한 2정도는 이해가 간다.

1.JQuery

제이 쿼리는 자바스크립트의 라이브러리 이다.
그리고 이후에 다룰 ajax에서는 제이 쿼리가 ajax의 프레임 워크의 기능을 한다고 한다.

1-1) 라이브러리

그럼 우선은 라이브러리 와 프레임워크 이 차이점을 살펴보고자 한다.

1. 기본적으로 제어의 주도권이 어디있는지의 차이
2. 라이브러리는 호출하는 쪽에 주도성을 가지고 있다.
3. 프레임 워크는 그 틀이 이미 주도성을 가지고 있다.

이러한 이유에서 자바스크립트를 편하게 이용하기 위한 JQuery는 자바스크립트가 그 주도성을 가지고 있기 때문에 라이브러리이고, Ajax의 경우에는 JQuery의 틀에 맞춰서, 자료를 불러오는 역할만을 담당하니 프레임 워크로 해석이 될 수 있다고 생각한다.

1-2) 사용법

JQuery의 cdn을 가지고 와서 맨위에 설치해 두면
바로 JQuery 문법이 사용 가능한다.

사용할때는 아래와 같이 사용 한다.

document.getElementById('one').innerHTML = '!!!';
        $('#one').text('hello jQuery');

위에 것을 아래의 것으로 변경해서 사용할 수 있다.

$("선택자").hide();

• 선택자는 클래스, 아이디, 태그, all(*)이 올 수 있다.
• 실행은 기본적으로 .뒤에 나타내고 아래와 같은 표현들을 쓸 수 있다.

내용 받아오기

• 웹사이트를 통해 값을 입력 받았을때, 그값을 이용하기 위해 가져올때 사용 한다.

$("test1").text();
$("test2").html();
$("test3").val();

text()는 태그내에 있는 텍스트 내용만을 설정하거나 가지고 온다.
html()은 태그까지 포함한 모든 내용을 설정하거나 가지고 온다.
val()은 보통 form태그에 요소 값을 설정하거나 가지고 온다.

$('.dataLoadButton').click(function() {        
            let id = $('.id').val()
            let pw = $('.pw').val()

위와 같은 식으로 id와 pw를 입력했을때 그값을 가져올때 많이 사용한다.

효과주기

• 마우스 이동등을 통해 다양한 효과를 줄 수 있다.

$("p").hide();
$("p").show();
$("p").toggle();
$("#div1").fadeIn();
$("#div1").fadeOut();
$("#div1").fadeToggle();
$("#div3").fadeIn(3000);

전에 셀렉트박스를 js없이 만드느라 엄청 고생했었는데, toggle버튼을 이용하면 손쉽게 만들 수 있다. 그중에서 가장 많이 사용되는건 아무래도 click일거 같다.

$('.btn3').click(function() {
            $('.box2').animate({
                width: '300px',
                height: '300px',
                opacity: 1,
            }, 'slow');
        });

클래스 변경하기

• 클래스의 각각의 값을 주고, 제이쿼리를 이용해
  클래스값을 변경하는 것도 가능하다.

$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");

---

아무래도 제이쿼리는 자바스크립트의 라이브러리 이기 때문에 우선적으로 사용방법과 주로 사용되는 곳들만 기억하고, 그때그때 도서관에서 찾아보는게 좋을듯 하다.

2.Ajax

AJax는 Asynchronous JavaScript and XML의 줄임말로 말그대로 자바스크립트와 다른 정보를 비동기적으로 연결해주는 기법 이다.

여기서 xml이라고만 적혀있지만 사실은 html, dom,xml등 다양한 기술들을 혼합하여 만든다

<사용방법>

• 위에 언급한 바와 같이, ajax의 프레임 워크에 jquery가 있는데, jquery에서는 $.ajax로 사용 한다.

$.ajax({
                url:'https://raw.githubusercontent.com/yoojin-park19/ajaxlogintest/main/userdata.json', 
                async: true, 
                success: function(response){

• es6에서는 promise 기반인 fetch, axios로 사용 한다.

const url = 'https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json';
        axios.get(url).then((response) => {console.log(response)});

<사용 이유>

이러한 사용방법을 가진 Ajax의 사용 이유는
서버와 브라우저가 비동기식으로 데이터를 교환 하기위함 이다.

화면을 새로 갱신하기 위해 전체를 다시 갱신하게 되면 엄청난 자원과 시간이 낭비되게 된다. 그래서 ajax는 전체가 아닌 일부분만 갱신하고, 이때 XMLHttpRequest객체를 통해 서버에 request 한다.(클라이언트 폴링: 사용자가 직접 원하는 정보를 서버에 요청하는 방법)

이때 JSON 이나 XML 형태로 필요한 데이터만 받아온다.
이를 이용하면 자원, 시간을 세이브 할 수 있다.

<진행방법>

1. XMLHttpRequest 객체 생성
2. 웹 서버에 요청 전송하기
3. 웹 서버에서 응답이 도착하면 화면에 반영하기

var oReq = new XMLHttpRequest();
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

위는 객체를 생성하여 요청을 보내고 답변을 받는 방식이지만, 일반적으로는 아래와 같은 내장함수를 사용한다.

$.ajax({
    url: ,
    type: 'GET',
    success: function 성공 (data) {
        console.log(data);
    },
    error: function 실패 (error) {
        console.error(error);
    }
});

이런식으로 AJax는 특정 부분의 정보를 비동기적으로 처리하고 싶을때 사용한다.

데이터 타입

var data = {"name":"Park"}
$.ajax({
    dataType : "json",
    data : JSON.stringify(data),
    success : function(result) {
        alert(result.success); // result 는 반환받은 JSON으로 만들어진 객체다.
    },
});

• 위는 데이터 타입을 JSON(우리가 아는 그 쌍따옴표)형식으로 받아서 data라는 변수에 문자열로 변환해 저장하는 것이다.(jQuery의 AJAX에서는 자체적으로 JSON Object로 변환 시켜준다)

  var data = {"name":"Park"}
  $.ajax({
    dataType : "html"
    data : JSON.stringify(data),
    success : function(result) {
    jQuery("#Container").html(result); 
    // 반환받은 html을 추가한다.
    },
});

이런식으로 html 형식으로도 받을 수 있다.
하지만 주로 위의 방법을 더 많이 사용 한다.

• 리얼타임으로 실행할 수 없다.

---

하나씩 차근차근 해봅시다.
다같이 화이팅!!!!