모던 웹을 위한 JavaScript + jQuery 입문 3판 78강 - jQuery로 GET 요청하기 > javascript

무료강좌-디비라

javascript

자바스크립트 강의 리스트

※ 가장 하단이 첫강좌입니다

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 78강 - jQuery로 GET 요청하기

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
15444120771831.jpg

 

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3판 70 8강

되겠구요

이번 강의에서는 지난 강의에서 만들었던 서버를 사용해 에이젝스 가

무엇이고 어떻게 사용하는 것인지 간단하게 알아보도록 하겠습니다

일단 책을 보시게 되면 에이젝스 를 xmlhttp 리퀘스트 라는 객체와

제이쿼리 에이젝스 를 사용해서 다루게 되는 데요

xmlhttp 리퀘스트 가 에이젝스 를 하는 가장 기본적인 객체 지만

사용방법이 너무 어렵기 때문에 별도의 라이브러리를 사용해서 에이젝스 를

해온 것이 일반적입니다

그래서 일반적으로 제이쿼리 같은 경우에는 ui 를 다루는 라이브러리와

함께

에이젝스 라이브러리가 들어 있는 거라고 할 수 있겠는데요

일반적으로 현대의 리 액트 라던지

뷰 라던지 아니면 앵귤러 라던지 에 대해서 들어보셨을 거에요 현재 지금

요리에 때 책의 번역이 끝나서 아마 연속되는 강의로 2달 정도 뒤에

올리도록 할 텐데요

요 녀석들은 모두 ui 를 관리하는 ui 라이브러리 어 라고 할 수

있습니다

물론 앵글러 는 규모가 좀 크기 때문에 다른 것도 들어있는데

그래서 이런 녀석들을 활용하게 될 경우에는 에이젝스 기능을 사용하기 위해

제이쿼리 를 가져오는 게 약간 ui 라이브러리 를 두개 들고 온다는 점

에서 충돌이 발생하게 되거든요 그래서 책에서는 xmlhttp 리퀘스트

객체와 제이쿼리 에이젝스 를 다루지만 이 강의에서는 요리 액트 가 팀

녀석들에게 에이젝스 를 주 열 수있는 슈퍼 agent 라는 라이브러리를

사용하는 방법에 대해서 알아보도록 하겠습니다

그래서 강의에서는 이번 강의에서 제이쿼리 에이젝스 를 알아보고

다음 강 의해서 제이쿼리 에이젝스 와 에이젝스 에 대한 심화 적인 내용을

조금 살펴본 다음에 마지막으로 슈퍼에 이젠 틀을 사용해 보면서 강의를

마무리 해 보도록 하겠습니다

일단 지난번에 만들었던 서버를 다시 한번 설명하도록 할텐데요

일단 메인 이라는 파일이 있고 이 메인 인간은 파일에서 퍼블릭 이라는

폴더를 읽게 됩니다

이퍼블릭 폴더 내부에는 인덱스 점 html 이라는 html 파일을 하나

만들었고요

제이쿼리 에이젝스 를 사용할 것이기 때문에 제이쿼리 라이브러리를 같은

폴더에 넣어 줬습니다

이어서 메인 점 js 폴더 를 보게 되면 지금 오른쪽과 같이 되어

있는데요

아 이 템 즈 라는 리스트를 만들고 배열을 만들고 이 데이터를 html

로 제공을 해주는 데이터 점 html

그리고 j 순으로 제공을 해주는 데이터 점 제이슨 그리고 xml 로

제공을 해주는 데이터 첨 xml 을 제공을 해서 사용자에게 공급을 하게

됩니다

그럼 한번 실행을 해보도록 할텐데요 요번에 제가 윈도우 업데이트가 됐는데

여기에서 명령 창 열기 가 없어지고 여기에서 파워 실 열기로

바뀌었더라구요

뭐 거의 같은 녀석 이기 때문에 물론 사용할 수 있는 명령어가 천지차이

긴 하지만 파워 실이 훨씬 더 기능이 많거든요

그래도 일단 노드를 사용할 때는 거의 같은 방식으로 사용할 수 있기

때문에

파워 셸을 사용하셔도 내용을 진행하는 데 별로 차이가 없으실 거라고

생각을 합니다

어쨌거나 노드 명령어를 입력 여자 해서 서버 를 실행한 다음에 인덱스 점

html 코드를 쳐보도록 하겠습니다

참고적으로 에이젝스 라는 말을 조금 어려워요 이게 비동기 자바스크립트

xml xml 이라고 해서 비동기적으로 자바 스크립트를 사용해 xml

파일을 추출해 온다 라는 뜻인데요

뭐 그냥 너무 어렵게 생각하지 마시고 웹페이지 내부에서 다른 서버로

요청을 걸 수 있다면 그걸 xml xd 에이젝스 라고 생각을 해 주시면

되겠습니다

참고적으로 에이젝스 를 아작 쓰라고 읽으시는 분도 있는데요 저도 처음에는

에이젝스 라고 읽다가 다른 분들의 그가 작 쓰라고 해서 아작 쓰라고

읽었던 적이 잠시 있는데 이게 축구팀이 되더라구요 근데 이거는 영어가

아니라 그쪽 나라 언어이기 때문에 일반적으로는 에이젝스 있는 게 맞고요

위키피디아 공식 사전에서 발음 기호를 보셔도 에이젝스 라고 잃는다고

나와있으니까 a 젝 트 로 읽어주시면 되겠습니다

어쨌거나 에이젝스 를 제이쿼리 로 하는 방법은 딸라 기호를 써주시고 점을

찍은 다음에 에이젝스 라는 녀석을 사용을 해주시면 됩니다

요녀석을 사용을 하게 되면 뭐 매개 변수를 입력할 수 있는 것도 다

나오게 되는데요

매개변수로 유아 리를 1 입력을 하고 u 아래를

데이터 점 html5 가져보도록 할게요

그리고

썩 섹스 라는 녀석을 입력을 해주시면 되는데요 입력을 하다보면 자동완성

기능으로 어떤 것을 입력해야 되는 지 쪽 나오게 되요

지금 왼쪽에 조금 짤 이게 됐는데 첫 번째로 그

첫 번째로 데이터 두번째로 텍스트 스테이터스 그리고 세번째로 제이쿼리

xhr 을 넣게 되는데 첫 번째가 데이터 두번째가 텍스트의 스테이터스

세번째가

xhr 되겠는데요

면 녀석을 한번 출력해 보도록 하겠습니다

콘솔 점

로그 데이터 그리곤 텍스트 스테이터스 그리고 xhr 1 좀 모셔 하도록

할게요

그래서 두 녀석을 입력을 한 다음에

1 2 7.0 점 0.15 e73 에 들어가 주시게 되면 요 녀석의

나오게 되는데요

fcb 를 눌러서 개발자 도구를 띄우고 몰 출력을 하는지 콘솔 탭에서

확인해 보도록 하겠습니다

일단 텍스트 스테이터스 라고 되어 있는 녀석은 썩 쎄 쓰라고 나오는

모습을 볼 수 있어요

지난번에 언급했던 것처럼 이 백서 센스가 200 성공했다는 뜻을 나타내는

데 용 그냥 성공했다는 뜻을 나타낸다 라고 생각해주시면 되겠고 중요한 건

바로 데이터 인데 데이터 내부의 이응 답했던 html 코드가 그냥 들어

있는 모습을 보실 수 있습니다 이게 전부라서 더 이상 할말이 없는데요

어쨌거나 다른 녀석들도 한번 가져와서 출력해 보도록 할게요

지주 녀석들은 주석 처리를 해 보도록 하겠 고요

여성 데이터 점 xml 을 가져와서 데이터와 텍스트 스테이터스 를 출력해

보도록 하겠습니다

뭐 텍스트 스테이 쓰는 뭐 지금 로컬에서 작업을 하기 때문에 뭐 통신

오류 같은게 발생할 리가 없죠 그래서 무조건 적으로 쏙 센스가 뜰 것이기

때문에 생략하도록 하겠다 고 요

또 마찬가지로 데이터 점 제이슨 에도 요청을 해 보도록 하겠습니다

제이슨을 요청을 하고 데이터를 출력해 보도록 하겠는데요

이렇게 코드를 저장을 하고 다시 실행을 해 보시게 되면 지금 화면과 같이

나오게 됩니다

일단 첫번째로 나오는 게 뭐 순서는 실행할때 마다 바뀔 수 있는데요

첫번째로 나오는 것은 xml 객체 9 프로덕츠 y 내부의 네임 프라이스

등이 들어 있는 모습을 확인할 수 있는 xml 이 들어있구요

두번째로 출력된 녀석은 그냥 자바스크립트 객체 입니다

한마디로 제일 손으로 만든 녀석을 받게 되면 자바스크립트 객체로 받게

되고

엑셈 엘로 제공하는 녀석을 받게 되면 곧바로 xml 객체로 나온다 라고

생각을 해 주시면 되겠습니다

일단 요게 에이젝스의 전부에요 그냥 html 페이지에서 동적으로 어떠한

서버에 요청을 걸 수 있다면 그걸 우리가 에이젝스 라고 하는데요

요 기술을 왜 많이 쓰냐 하면 우리가 일반적으로 네이버 같은 페이지에

들어가 보시게 되면

요렇게 페이지가 나오게 되는데요 여기에서 우리가 뭐 매일 이라던지 카페

라던지 블록을 누르게 되면 페이지가 이동하는 게 일반적 이에요 그런데

이러한 페이지 이동없이 예를 들어서 페이스북을 보게 되면 못 당연히

네이버도 에이젝스 을 쓰고 있습니다

어쨌거나 페이스북을 보게 되면 스크롤을 내리게 되면 자동적으로

노력이 불러오는 것도 에이젝스 9 0 스크롤을 내딛게 되면 내릴 때마다

추가적인 데이터를 불러 오게 되는데요 이러한 데이터를 불러오는 과정도

모두 동쪽으로 처리가 되죠 그래서 이렇게 동적 으로 이루어지는 모든

과정이 에이젝스 라고 할 수 있습니다

그래서 굉장히 많이 사용된다고 보시면 되겠는데요

이렇게 데이터를 가져오기 만하면 이제 이 데이터를 화면에 출력하는

것만으로 뭔가 화면에 변화를 줄 수 있겠죠

그래서 예를 들어서 아래쪽에 있는 녀석 안 잠시 주석 처리를 해서

html 경험한 살펴보도록 하겠는데요

셀 타임아웃을 사용을 해서 특정한 시간 이후에

1초 있다가 화면에 있는 내용을 변경해 보도록 하겠습니다

이렇게 작성을 해주신 다음에 html 받은 것을 곧바로

바지 태그 내부에 html 로 꼽아 버리게 된다면 코드를 저장을 하고

실행을 했을 때 1초 있다가 화면에 있는 내용이 바뀌게 되죠 그래서

프로그래밍 적으로 이렇게 화면의 내용을 바꿀 수 있다는게

이젠 에이젝스 에 가장 큰 장점이라고 할 수 있겠습니다

사실 에이젝스 가 아까 언급했던 것처럼 비동기로 자바 스크립트를 사용해

xml 데이터를 추출해 오는걸 에이젝스 라고 부르게 되는데요

현재는 이 개념이 굉장히 확대 되어서 그냥 서버 있는 데이터를 가져와서

요 가져 온다 라는 개념과 두번째로 화면에 있는 내용을 변경을 한다

요 두가지가 모두 작용을 해야지 에이젝스 라고 부르게 됩니다

어쨌거나 에이젝스 를 사용하면 이렇게 한 웹페이지 내부에서 동쪽으로

화면에 요소를 변경할 수 있는데요

html 을 사용하실 경우에는 이렇게 그냥 html 코드를 뽑아 주시면

됩니다

어쨌거나 html 은 다 살펴봤으니 까

주석 처리를 하도록 하겠구요 이어 섬 xml 데이터를 사용하는 경우를

보도록 하겠습니다

일단 xml 데이터를 보시게 되면 아까 보았던 것처럼 xml 로 데이터가

들어오게 되는데요

그냥 곧바로 달 안에 넣어 주신 다음에 인 여성 대부 에서 파인더를 해서

프로덕트 를 찾아주시면 되겠구요 이녀석을 곧바로 이치를 돌려서

그냥 하나 하나의 요소에 접근을 해 주시면 되겠습니다

내부에서는 디스 키워드를 사용해서 또 네임을 찾아주실 수 있겠구요

내부에서 또 프라이스 를 찾을 수 있을 겁니다

현재 화면 오른쪽에 있는 요 구성을 그대로 옮겨오는 거라고 생각을 해

주시면 되겠는데요

프라이스 복사를 해서 네임과

프라이스 를 추출 하도록 하겠습니다 이때 내부에서 텍스트를 끄집어 낼

거니까 섹스 를 사용하도록 하겠고요

어쨌거나 이렇게 작성을 하고 간단하게 콘솔 단목 우에 네임과 프라이스 를

출력해 보도록 하겠습니다

아래쪽에 있는 제이슨은 잠실 주석처리 덜 하도록 하겠구요

어쨌거나 요런식으로 코드를 구성을 하고서 실행을 한 다음에 콘솔 창을

보시게 되면 우주 2000원 홍차 5천원 커피 5천원 이라고 데이터가

달라 오는 걸 볼 수 있습니다

따라서 이를 활용을 하게 되면 이를 그냥

만들 수 있겠죠

그 자바스크립트 문서 객체 로요 그래서 뭐 h1 으로 놓고 이 h1

내부의 텍스트를

네임 플러스

짝대기 프라이즈 플러스 원 이라고 적도록 하고

이렇게 만들어진

보고 있죠

헤더를 일반적으로 이렇게 제이쿼리 객체를 변수에 넣을 땐 예전에 언급했던

것처럼 달라 기호를 쓰게 됩니다

요녀석을

div 태그를 하나 만들어서

큰 이 무슨 짓을 한 거야

넣도록 하고요 으

어펜드 헤더 해주면 되겠고 이렇게 만들어진 녀석을

5 펜디 에트로 바지 태그 내부에 축적 붙여 주도록 하겠습니다

이렇게 코드를 실행하게 되면 화면이 실행이 됐을 때 u 아래의 h1

태그와 div 태그가 생성 되서 붙게 점

뭐 그냥 구성한 대충 해본 거 고요 실행했을 때 이렇게 화면의 내용이

동적으로 변경 된다는 걸 보실 수 있을 겁니다

예를 들어서 버튼 같은걸 만들어서

아 뭐 아이디를 헬로 라고 주도록 하고

데이터 가져오기 라는 버튼을 만들었을 때

버튼 점 클릭

성산 5

평 평 을 주게 되면 버튼을 클릭할 때마다 웹 서버에 요청을 해서

추가적인 데이터를 들고와서 화면에 반영하게 되겠죠

그래서 이러한 식으로 그냥 동적으로 데이터를 가져오는 게 에이젝스의 전부

라고 생각해주시면 되겠습니다

뭐 데이터 가져오게 할 때마다 웹서버에 요청이 갈 거고 그 요청을 반영을

해서 화면에 요소를 추가할 겁니다

지금은 우리가 우유 홍차 커피 같은 단순한 것 데이터만 추출을 하지만

신문기사 라던지 아니면 사용자들이 게시판에 쓴 글이 라던지 를 이렇게

동쪽으로 가져오게 되면 웹페이지를 하나의 애플리케이션 처럼 사용할 수

있게 됩니다

어쨌거나 xml 을 사용하는 방법도 간단하게 알아 보았구요

뭐 제 1성 제천 훨씬 10점 그냥 자바스크립트 개체처럼 다루기 만 하면

되니까

데이터 점 포 이치로 그냥 돌려 버린 다음에

요 안에 있는 각각 이 아이템들을 사용해서

html 태그를 구성을 해서 화면에 있는 요소를 변경하여 주면 됩니다

o 아이템 점도 임

그리고 아이템 점프 라이스를 사용하기만 하면 위쪽에 있는 파인드 같은

귀찮은 과정 듯이 곧바로 출력할 수 있겠죠

7 행을 하면 아래쪽에 우유 홍차 커피 가 들어가는 모습을 볼 수

있습니다

어쨌거나 지금까지 html 데이터를 동적으로 요청을 해서 화면에 꼽는

방법 그리고 xml 을 요청을 해서 화면에 꼽는 방법 그리고 제이슨을

요청을 해서 화면에 꼽는 방법에 대해서 알아봤는데요

요게 에이젝스의 가장 기본이라고 생각을 해 주시면 좋겠습니다

어쨌거나 지금까지는 모두 계시라는 녀석에 대해서 살펴보았는데요

일반적으로 우리가 어떠한 데이터가 있을때 이 데이터에 처리할 수 있는

일을 크루 더 라고 부르게 됩니다

그 아래쪽에 다가 적도록 할게요

크 로 드 라고 부르게 되는데 씨는 크리 at 그리고 아랜 리드 그리고

주는

업데이트 고 튀는 딜리트 약자가 되겠는데요 어떠한 데이터를 추가를 하거나

어떠한 데이터를 읽어 들이거나 어떠한 데이터를 업데이트 하거나

어떠한 데이터를 제거하거나 라고 할 수 있습니다

현재 우리가 h x 랑 요 메소드를 사용해서 했던 것은 서버 에서

데이터를 리드 에서 출력한 거죠 그래서 지금 알라 본 것은 요 것이고

이것을 할 때 웹서버에 요청하는 방식이 바로 계십니다

제시 라는 메소드를 웹 서버에 요청을 하면 웹서버가 애가 데 읽을

데이터를 달라는 것이구나 라고 판단을 하고

읽을 데이터 를 주게 됩니다 그리고 크리에이트 는 일반적으로 우리가

포스트 메서드 라는 것을 활용을 하게 되고요

업데이트는 푸시 라는 메서드를 그리고 딜리트 는 딜리트 라는 메소드를

활용하게 됩니다

물론 그냥 포스팅 메소드를 사용해서 요청을 하고 겐 메서드를 사용해서

요청을 하고 풋내 3rd 를 사용하여 요청을 하고 딜리트 메소드를

사용해서 요청을 한다고 서버 가 그걸 알아서 처리하는 건 당연히 아니고요

우리가 앱 점

포스트 라던지 를 사용해서 또 하나의 url 을 만들고 이 유아 레레

대해서 처리를 작성을 해야 하는 겁니다

다만 클라이언트 개발자 와 서버 개발자가 내가 이런걸 요청하면 너가

그런걸로 주면 되라는 식으로 도 상호적인 약속을 할 수 있죠

그러한 약속을 정의 한게 바로 포스트 메서드 겠네 3rd 품에 3rd

딜리 tms 더 라고 생각해 보시면 되겠구요

지금까지는 우리가 갠 메서드를 알아보았는데

다음 강의 부터는 포스트와 푹 꽈 딜리트 에 대해서 살펴보도록 하겠습니다

어쨌거나 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다

감사합니다


댓글 0개

등록된 댓글이 없습니다.

 
Total 83건 1 페이지
썸네일
제목

Menu