AJAX는 서버에 대한 비동기 HTTP 호출을 수행하는 데 사용되는 일련의 웹 개발 기술 클라이언트 프레임워크입니다. 이 기사에서는 5가지 최고의 JavaScript Ajax 구성 요소 라이브러리를 공유합니다.
AJAX는 비동기 HTTP 호출을 수행하는 데 사용되는 일련의 웹 개발 기술 클라이언트 프레임워크입니다. 서버에 기술적인 클라이언트 프레임워크를 개발합니다. AJAX는 비동기 JavaScript 및 XML을 나타냅니다. AJAX는 한때 웹 개발 세계에서 흔한 이름이었으며, 많은 인기 있는 JavaScript 위젯이 AJAX를 사용하여 구축되었습니다. 예를 들어, 특정 사용자 상호 작용(예: 버튼 누르기)은 서버에 대한 비동기 호출을 수행하며, 서버는 웹 페이지를 다시 로드하지 않고도 데이터를 검색하여 클라이언트에 반환합니다.
JavaScript가 발전하여 이제 프론트 엔드 라이브러리 및/또는 React, Angular, Vue 등과 같은 프레임워크를 사용하여 동적 웹사이트를 구축합니다. 최신 비동기 JavaScript 호출에는 XML이 아닌 JSON 검색이 포함되므로 AJAX의 개념도 상당한 변화를 겪었습니다. 클라이언트 애플리케이션에서 서버에 대한 비동기 호출을 수행할 수 있는 많은 라이브러리가 있습니다. 일부는 브라우저 표준에 통합되는 반면 다른 일부는 유연하고 사용하기 쉽기 때문에 대규모 사용자 기반을 보유하고 있습니다. 일부 지원 약속이 있고 다른 일부는 콜백을 사용합니다. 이 기사에서는 서버에서 데이터를 가져오는 데 사용되는 상위 5개 AJAX 라이브러리를 소개합니다.
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는 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는 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는 가독성과 유연성에 더 중점을 둔 가볍고 진보적인 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);
요청 라이브러리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!