5가지 최고의 JavaScript Ajax 구성 요소 라이브러리 공유

AJAX는 서버에 대한 비동기 HTTP 호출을 수행하는 데 사용되는 일련의 웹 개발 기술 클라이언트 프레임워크입니다. 이 기사에서는 5가지 최고의 JavaScript Ajax 구성 요소 라이브러리를 공유합니다.

AJAX는 비동기 HTTP 호출을 수행하는 데 사용되는 일련의 웹 개발 기술 클라이언트 프레임워크입니다. 서버에 기술적인 클라이언트 프레임워크를 개발합니다. AJAX는 비동기 JavaScript 및 XML을 나타냅니다. AJAX는 한때 웹 개발 세계에서 흔한 이름이었으며, 많은 인기 있는 JavaScript 위젯이 AJAX를 사용하여 구축되었습니다. 예를 들어, 특정 사용자 상호 작용(예: 버튼 누르기)은 서버에 대한 비동기 호출을 수행하며, 서버는 웹 페이지를 다시 로드하지 않고도 데이터를 검색하여 클라이언트에 반환합니다.

AJAX의 현대적 재도입

JavaScript가 발전하여 이제 프론트 엔드 라이브러리 및/또는 React, Angular, Vue 등과 같은 프레임워크를 사용하여 동적 웹사이트를 구축합니다. 최신 비동기 JavaScript 호출에는 XML이 아닌 JSON 검색이 포함되므로 AJAX의 개념도 상당한 변화를 겪었습니다. 클라이언트 애플리케이션에서 서버에 대한 비동기 호출을 수행할 수 있는 많은 라이브러리가 있습니다. 일부는 브라우저 표준에 통합되는 반면 다른 일부는 유연하고 사용하기 쉽기 때문에 대규모 사용자 기반을 보유하고 있습니다. 일부 지원 약속이 있고 다른 일부는 콜백을 사용합니다. 이 기사에서는 서버에서 데이터를 가져오는 데 사용되는 상위 5개 AJAX 라이브러리를 소개합니다.

Fetch API

Fetch API는 서버에서 리소스를 검색하기 위한 XMLHttpRequest를 현대적으로 대체합니다. XMLHttpRequest와 달리 더 강력한 기능 세트와 더 의미 있는 이름 지정 기능이 있습니다. 구문과 구조를 기반으로 Fetch는 유연하고 사용하기 쉽습니다. 그러나 다른 AJAX HTTP 라이브러리와 구별되는 점은 모든 최신 웹 브라우저를 지원한다는 것입니다. Fetch는 요청-응답 접근 방식을 따릅니다. 즉, Fetch는 요청을 하고 Response 객체로 확인되는 약속을 반환합니다.

Request 개체를 전달하여 가져오거나, 가져오려는 리소스의 URL만 전달할 수 있습니다. 다음 예에서는 Fetch를 사용하여 간단한 GET 요청을 생성하는 방법을 보여줍니다.

fetch('https://www.example.com', {
    method: 'get'
  })
  .then(response => response.json())
  .then(jsonData => console.log(jsonData))
  .catch(err => {      //error block
   })

보시다시피 Fetch의 then 메소드는 응답 객체를 반환하며 추가 작업을 위해 일련의 then을 사용할 수 있습니다. .json() 메서드를 사용하여 응답을 JSON으로 변환하고 콘솔에 출력합니다.

양식 데이터를 POST해야 하거나 Fetch를 사용하여 AJAX 파일 업로드를 생성해야 하는 경우 어떻게 해야 합니까? 이 시점에서는 Fetch 외에도 입력 양식이 필요하고 FormData 라이브러리를 사용하여 양식 개체를 저장합니다.

var input = document.querySelector('input[type="file"]')var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'blizzerand')
fetch('/avatars', {
  method: 'POST',
  body: data
})

Axios

Axios는 AJAX 호출을 위해 XMLHttpRequest를 기반으로 구축된 최신 JavaScript 라이브러리입니다. 이를 통해 브라우저와 서버에서 HTTP 요청을 할 수 있습니다. 또한 ES6 기본 Promise API도 지원합니다. Axios의 다른 뛰어난 기능은 다음과 같습니다.

1. 요청 및 응답을 차단합니다.

2. Promise를 사용하여 요청 및 응답 데이터를 변환합니다.

3. JSON 데이터를 자동으로 변환합니다.

4. 실시간 요청을 취소하세요.

5. Axios를 사용하려면 먼저 설치가 필요합니다.

npm install axios

아래는 Axios가 실제로 작동하는 모습을 보여주는 기본 예시입니다.

// Make a request for a user with a given IDaxios.get('/user?ID=12345')
 .then(function (response) {  console.log(response);
 })
 .catch(function (error) {  console.log(error);
 });

Fetch에 비해 Axios는 구문이 더 간단합니다. 이전에 Fetch를 사용하여 만든 AJAX 파일 업로더와 같이 좀 더 복잡한 작업을 수행해 보겠습니다.

var data = new FormData();
  data.append('foo', 'bar');
  data.append('file', document.getElementById('file').files[0]);  var config = {
    onUploadProgress: function(progressEvent) {     var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
    }
  };
  axios.put('/upload/server', data, config)
   .then(function (res) {
    output.className = 'container';
    output.innerHTML = res.data;
   })
   .catch(function (err) {
    output.className = 'container text-danger';
    output.innerHTML = err.message;
   });

Axios가 더 읽기 쉽습니다. Axios는 React 및 Vue와 같은 최신 라이브러리에서도 매우 인기가 있습니다.

jQuery

jQuery는 AJAX 호출부터 DOM 콘텐츠 조작까지 모든 것을 처리하는 데 사용되는 JavaScript의 최전선 라이브러리였습니다. 다른 프런트 엔드 라이브러리의 "영향"으로 인해 관련성이 감소했지만 여전히 jQuery를 사용하여 비동기 호출을 수행할 수 있습니다.

이전에 jQuery를 사용해 본 적이 있다면 이것이 아마도 가장 쉬운 솔루션일 것입니다. 그러나 $.ajax 메서드를 사용하려면 전체 jQuery 라이브러리를 가져와야 합니다. 이 라이브러리에는 $.getJSON, $.get 및 $.post와 같은 도메인별 메서드가 있지만 구문은 다른 AJAX 라이브러리만큼 간단하지 않습니다. 다음 코드는 기본 GET 요청을 작성하는 데 사용됩니다.

$.ajax({
 url: '/users',
 type: "GET",
 dataType: "json",
 success: function (data) {   console.log(data);
 }
 fail: function () {   console.log("Encountered an error")
 }
});

jQuery의 가장 큰 장점은 질문이 있는 경우 수많은 지원과 문서를 찾을 수 있다는 것입니다. FormData() 및 jQuery를 사용하여 AJAX 파일 업로드의 많은 예를 찾았습니다. 가장 간단한 방법은 다음과 같습니다.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url : 'upload.php',
    type : 'POST',
    data : formData,
    processData: false, // tell jQuery not to process the data
    contentType: false, // tell jQuery not to set contentType
    success : function(data) {      console.log(data);
      alert(data);
    }
});

SuperAgent

SuperAgent는 가독성과 유연성에 더 중점을 둔 가볍고 진보적인 AJAX 라이브러리입니다. SuperAgent는 다른 라이브러리와 달리 학습 곡선이 완만합니다. 동일한 Node.js API에 대한 모듈이 있습니다. SuperAgent에는 GET, POST, PUT, DELETE 및 HEAD와 같은 메서드를 허용하는 요청 개체가 있습니다. 그런 다음 .then(), .end() 또는 새로운 .await() 메서드를 호출하여 응답을 처리할 수 있습니다. 예를 들어 다음 코드는 SuperAgent를 사용하는 간단한 GET 요청입니다.

request
  .post('/api/pet')
  .send({ name: 'Manny', species: 'cat' })
  .set('X-API-Key', 'foobar')
  .set('Accept', 'application/json')
  .then(function(res) {
   alert('yay got ' + JSON.stringify(res.body));
  });

이 AJAX 라이브러리를 사용하여 파일을 업로드하는 등 더 많은 작업을 수행하고 싶다면 어떻게 해야 합니까? 또한 매우 쉽습니다.

request
  .post('/upload')
  .field('user[name]', 'Tobi')
  .field('user[email]', 'tobi@learnboost.com')
  .field('friends[]', ['loki', 'jane'])
  .attach('image', 'path/to/tobi.png')
  .then(callback);

Request - 단순화된 HTTP 클라이언트

요청 라이브러리는 HTTP 호출을 수행하는 가장 쉬운 방법 중 하나입니다. 구조와 구문은 Node.js에서 요청을 처리하는 방법과 매우 유사합니다. 현재 이 프로젝트는 GitHub에 18,000개의 별을 보유하고 있으며 사용 가능한 가장 인기 있는 HTTP 라이브러리 중 하나라는 점은 언급할 가치가 있습니다. 예를 들면 다음과 같습니다.

var request = require('request');
request('http://www.google.com', function (error, response, body) {
 console.log('error:', error); // Print the error if one occurred
 console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
 console.log('body:', body); // Print the HTML for the Google homepage.
});

제가 개인적으로 가장 좋아하는 것은 Axios입니다. 읽기 쉽고 눈이 더 즐겁기 때문입니다. 또한 잘 문서화되어 있고 표준화된 솔루션이 있으므로 Fetch에 충실할 수도 있습니다.

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.

위 내용은 5가지 최고의 JavaScript Ajax 구성 요소 라이브러리 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!