16주차: AJAX XHR, Fetch, jQuery 및 Axios

이번 주에는 Colt Steele The Advanced Web Developer Bootcamp의 AJAX XHR, Fetch, jQuery 및 Axios에 중점을 두었습니다.

 -Intro to AJAX   
 -JSON and XML
 -Fetch Introduction
 -Fetch Options 
 -Fetch Error Handling 
 -The Problem with Fetch
 -jQuery AJAX 
 -jQuery $.ajax Method
 -jQuery AJAX Shorthand Methods 
 -Axios Intro 

AJAX 소개

AJAX는 비동기 JavaScript 및 XML입니다.
XML은 대부분 JSON으로 대체되었습니다.

####AJAX는 라이브러리, 프레임워크 또는 기술이 아닙니다.

AJAX는 웹 개발에 대한 접근 방식입니다.

웹사이트 구축 방법에 대한 개념입니다.

AJAX는 웹사이트가 단일 페이지 애플리케이션 기능을 제공하는 현재 페이지를 방해하지 않고 백그라운드에서 서버에서 데이터를 보내고 요청할 수 있도록 합니다.



JavaScript로 요청하기

XMLHTTP요청

가져오기 API

타사 라이브러리: jQuery, Axios 등..

JSON 및 XML

둘 다 데이터 형식입니다.

API는 HTML로 응답하지 않습니다. API는 구조가 아닌 순수한 데이터로 응답합니다.

API는 컴퓨터 간에 또는 코드 비트 간에 정보를 공유하기 위해 존재합니다.

XML은 Extended Markup Language의 약자입니다.

<pin>
  <title>Some Title</title> 
  <author>Author Name</author> 
  <num-saves>2000</num-saves> 
</pin> 

XML은 문법적으로 HTML과 비슷하지만 HTML처럼 프레젠테이션을 설명하지는 않습니다.

JSON JavaScript는 거의 JavaScript 개체처럼 보입니다.

'pin': {
  'title': 'this is title', 
  'author': 'Author', 
   'num-saves': 1800 
  }

가져오기 소개

fetch(url) 
.then(function(res) {
  console.log(res); 
})
.catch(function(error) {
 console.log(error); 
}); 

Fetch로 JSON 구문 분석

fetch(url).then(function(res) {
 return res.json(); 
 }).then(function(data) {
  console.log(data); 
 }).catch(function() { 
  console.log("problem!"); 
 }); 

가져오기 옵션

가져오기 방법을 사용하려면 항상 요청이 갈 URL을 제공해야 합니다.

fetch(url) {
   method: 'POST', 
   body: JSON.stringify({
     name: 'blue', 
     login: 'bluebird' 
   })
})

.then(function (data) {
//do something 
})
.catch(function (error) {
//handle error 
}); 

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

가져오기 오류 처리

일이 잘못되면 어떻게 됩니까?
가져오기 오류 처리

fetch(url) 
.then(function(res) {
  if (!res.ok) {
    throw Error(404); 
   }
   return res; 
}).then(function(response) {
  console.log("ok"); 
}).catch(function(error) {
  console.log(error); 
}); 

가져오기의 문제

가져오기는 사용하기 쉽고 XML보다 훨씬 깨끗합니다.
브라우저 지원이 제한될 수 있습니다.

###jQuery AJAX





jQuery를 AJAX 메서드
.$.아약스
.$.get
.$.post
.$.getJSON

이들은 속기 방법입니다

###jQuery $.ajax 메서드

.$.아약스
"기본"jQuery 메소드

$.ajax({
 method: "GET", 
 url: "some.api.com", 
 })
.done(function(res) {
  console.log(res)
})
.fail(function(){
//do something
})

이 코드는 내부적으로 XMLHttpRequest를 생성합니다.

###액시오스 소개
Axios는 가벼운 HTTP 요청 라이브러리입니다.

axios.get(url) 
.then(function(res) {
 console.log(res.data); 
})
.catch(function(e){
 console.log(e); 
})

후드 아래에서 XMLHttpRequest를 생성합니다.