Front-end 국비지원 #055일

JooSehyun·2023년 1월 1일
$.ajax()HTML과 XML의 차이MockarooOpen width Live ServerPHP 란?XMLajaxappenddatatypedothomejqueryjsonlengthloadphpsuccessurl비동기성신문사 연동알드라이브조선 스포츠
0

JQuery

Jquery Ajax 시작하기

Ajax 란?

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.
[출처] https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

일단 예제로 먼저 알아보자!

01. load 기본

HTML

    <p id="news_1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus harum perspiciatis iure quidem explicabo iusto quos eius! Beatae libero alias sit voluptatibus cum sint earum, nesciunt aliquam vitae quidem autem.</p>
    <p id="news_2">Iure quidem explicabo iusto quos eius! Beatae libero alias sit voluptatibus cum sint earum, nesciunt.</p>

이런 Ajax_news라는 html파일이 있다.

HTML

    <h1>Load1</h1>
    <div id="newsWrap_1"></div>
    <h1>Load2</h1>
    <div id="newsWrap_2"></div>
    <script>
        $("#newsWrap_1").load("index_ajax_news.html #news_1")
        $("#newsWrap_2").load("index_ajax_news.html #news_2")
    </script>

여기에서 금방 위에 써놓은 p태그를 불러오려고 한다.
script에서는 load("경로.확장자 + 넣을 태그")를 적어준다.

Open width Live Server 로 열어준다!

결과

앞으로 우리는 Ajax_news라는 html파일에서 수정을 하면 즉시 바뀌는 방법을 알아냈다.
이것을 이용하여 API에 필요한 데이터를 가져와 꾸미기도 가능하다.

02. Ajax 기본

Mockaroo 사용

일단 우리는 Json 파일을 만들어줄 생성기가 필요하다.

  1. 구글에 Mockaroo를 검색한다. https://www.mockaroo.com/

  1. 메인페이지에서 Field Name과 Type 등을 선택한다.

  1. Format은 JSON , XML 등 고를 수 있다.
    다운받은 JSON의 파일 예제이다. 9번 밑으로는 생략..
[
    {
        "id":1,"first_name":"Warden","last_name":"Hartfield","email":"whartfield0@ow.ly"
    },
    {"id":2,"first_name":"Basilius","last_name":"Jacqueme","email":"bjacqueme1@marketwatch.com"},
    {"id":3,"first_name":"Flin","last_name":"Heersma","email":"fheersma2@nymag.com"},
    {"id":4,"first_name":"Sherie","last_name":"Holtom","email":"sholtom3@biglobe.ne.jp"},
    {"id":5,"first_name":"Reba","last_name":"Denington","email":"rdenington4@kickstarter.com"},
    {"id":6,"first_name":"Kristine","last_name":"St Angel","email":"kstangel5@1und1.de"},
    {"id":7,"first_name":"Ned","last_name":"Abbatucci","email":"nabbatucci6@mtv.com"},
    {"id":8,"first_name":"Reta","last_name":"Skyppe","email":"rskyppe7@ibm.com"},
    {"id":9,"first_name":"Bogey","last_name":"Smees","email":"bsmees8@indiegogo.com"},
    
    .
    .
    .
    .

JSON 파일 부르는방법은 script에서 부른다.

script

$(function(){
            $.ajax({
                url:"js/MOCK_DATA.json",
                dataType:"json",
                //type: //타입이 중요하다면 post
                success:function(data){//(data) 는 매개변수이다.
                    console.log(data);//live server로 보면 MOCK_DATA.json 목록이 콘솔에 나온다.
                    if(data.length > 0){
                        let table=$("<table />"); //<태그 /> 이렇게 쓰면 <태그></태그>처럼 열고 닫히는 의미를 포함
                        for(let i in data){
                            let $id=data[i].id;//$id=data안에 [i] 배열구조안에 id를 가져와
                            let $first_name=data[i].first_name;
                            let $last_name=data[i].last_name;
                            let $email=data[i].email;
                            let row=$('<tr />').append(
                                $('<td />').text($id),
                                $('<td />').text($first_name),
                                $('<td />').text($last_name),
                                $('<td />').text($email)
                            )
                            table.append(row);
                        }
                        $('#wrap').append(table);
                    }
                }
                
            })
        });

결과

XML 파일로 만들어 보자

XML

<?xml version='1.0' encoding='UTF-8'?>
<dataset>
    <record>
        <id>1</id>
        <last_name>Colleck</last_name>
        <gender>Male</gender>
    </record>
        <record><id>2</id><last_name>Aslen</last_name><gender>Female</gender></record><record><id>3</id><last_name>Atthowe</last_name><gender>Male</gender></record><record><id>4</id><last_name>Spur</last_name><gender>Male</gender></record><record><id>5</id><last_name>Heineke</last_name><gender>Male</gender></record><record><id>6</id><last_name>Hares</last_name><gender>Female</gender></record><record><id>7</id><last_name>Mantrip</last_name><gender>Female</gender></record><record><id>8</id>
        .
        .
        .
</dataset>

문득 HTML과 XML 의 차이가 궁금했다.

(태그명만 다르고 구성이 비슷해 보였기 때문..)


HTML과 XML의 차이

XML과 HTML은 발전 방향이 다르기 때문에 단순 비교를 해선 안된다.
첫째, HTML이 데이터의 표현에 그 목적을 두고 있다면 XML은 데이터 교환을 위한 구조정의에 그 목적을 두고 있다.
즉, XML은 데이터 저장과 전송을 목적으로 만들어진 마크업 언어이다.
XML은 eXtensible Markup Language의 약자로, 기본적으로 HTML과 같은 마크업 언어의 한 종류이다.
하지만 XML이란 언어를 정확히 이해하려면 마크업 언어라는 부분에 초점을 맞추기 보다, "데이터의 저장하고 전달하기 위해 디자인 된 언어"에 초점을 두어야한다.
즉, 언어로부터 독립적으로 여러 에플리케이션에서 사용할 수 있도록 데이터를 저장해주고 전달해주는 매개체가 되는 존재이다.

script

똑같다 xml 파일을 불러주면 된다.

$.ajax({
            url:"js/dataset.xml",
            dataType:'xml',
            success: function(data){
                let $data=$(data).find('record');
                if($data.length > 0){
                    let $table=$("<ul />");
                    $.each($data,function(i, o){
                        let $id=$(o).find('id').text();
                        let $last_name=$(o).find('last_name').text();
                        let $gender=$(o).find('gender').text();
                        //변수를 다 담았고 테이블에 넣어준다.
                        let row=$('<li />').append(
                            $('<ul />').append(
                                $('<li />').text("번호: "+$id),
                                $('<li />').text("이름: "+$last_name),
                                $('<li />').text("성별: "+$gender)
                            )
                        );
                        $table.append(row);
                    });
                    $('#box').append($table);
                };
            }
        });

03. 신문사 연동해보기

HTML

<div class="chosunNews"></div>

CSS

.chosunNews{width: 800px; height: auto; padding: 10px 20px; border: 5px solid #ddd; margin: 50px auto; position: relative;}
.chosunNews::before{content: "조선 스포츠"; width: 100px; height: 30px; background: #000; color: #222; position: absolute; top: -35px; left: 10px; text-align: center; padding-top: 5px; color: #fff; font-weight: bold; border-radius: 10px;}
ul{list-style: none;}
li{line-height: 180%; border-bottom: 1px solid #ccc;}

script

$(function(){
	$.ajax({url:"https://www.chosun.com/arc/outboundfeeds/rss/category/sports/?outputType=xml",

로 링크를 걸었지만 안돼서 php를 만들어서 한다.

PHP

PHP 란? (자바스크립트와 차이점)

PHP를 설명드리기 앞서서 웹 페이지 프로그래밍 언어에 대해 간단히 말씀드리겠습니다.
웹 페이지 프로그래밍 언어에는 JavaScript와 PHP 등이 있습니다.
JavaScript는 클라이언트 측 스크립트이고, PHP는 서버 측 스크립트라고 생각하시면 됩니다.
웹 브라우저는 서버에서 내려받은 내용을 사용자(클라이언트)에게 보여주는 역할을 합니다.
HTML 코드로 작성한 웹 페이지는 텍스트 & 이미지 등으로 레이아웃이 고정된 페이지입니다.
즉, 정적인 웹페이지입니다.
반면에, 자바스크립트와 PHP는 동적으로 웹페이지를 만들어주는 역할을 합니다.
장바구니처럼 사용자 조작에 따라 화면이 바뀌는 동적인 웹페이지를 만들려면 웹페이지에 프로그래밍을 코딩해줘야합니다.
동적이라는것은 페이지에서 움직이는 것을 말하며, 정적이라는것은 움직이지않고 고정되어있는 것을 말합니다.
[출처]https://choseongho93.tistory.com/61

PHP

<?php
    $ch=curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_URL, "https://www.chosun.com/arc/outboundfeeds/rss/category/sports/?outputType=xml");
    $url_source=curl_exec($ch);
    curl_close($ch);

    echo $url_source;

?>

로 php를 만들어주고

script

$(function(){
            $.ajax({
                url:"news.php",
                dataType:"xml",
                success:function(data){
                    let $items=$(data).find('item')
                    if($items.length > 0){
                        $items=$items.slice(0, 10);
                        let $ulTag=$('<ul />');
                        $.each($items, function(i, o){ 
                            let $title=$(o).find('title').text();
                            let $link=$(o).find('link').text();
                            let $description=$(o).find('description').text();
							let $aTag=$('<a />').attr({"href": $link, "target":"_blank"}).text($title);
                            let $liTag=$('<li />').append($aTag, '<p />').append($description);
						$ulTag.append($liTag);
                        })
						$('.chosunNews').append($ulTag); 
                    }
                }
            });
        });

결과

를 넣어으면 .. 안된다

그래서 dothome에서 알드라이브를 연동하여 넣어서 서버를 열어야 보일 것이다.

결과

profile
JooSehyun
이전 포스트

Front-end 국비지원 #054일

다음 포스트

Front-end 국비지원 #056일

0개의 댓글