AJAX는 비동기 JavaScript 및 XML을 의미합니다. 전체 페이지를 다시 로드할 필요 없이 동적이고 대화형 웹 페이지를 생성하기 위해 웹 개발에 사용되는 기술입니다. AJAX를 사용하면 서버에서 데이터를 요청하고 웹페이지의 일부를 비동기적으로 업데이트할 수 있습니다. 즉, 요청이 백그라운드에서 처리되는 동안 사용자가 페이지와 계속 상호 작용할 수 있습니다.
API(애플리케이션 프로그래밍 인터페이스)는 서로 다른 소프트웨어 애플리케이션이 서로 통신할 수 있도록 하는 일련의 규칙 및 정의입니다. 웹 개발의 맥락에서 API는 웹 서버와 상호 작용하고, 데이터를 검색하고, 데이터를 보내는 데 자주 사용됩니다. API는 공개(누구나 사용 가능) 또는 비공개(특정 사용자 또는 애플리케이션으로 제한)일 수 있습니다.
AJAX와 API를 함께 사용하면 웹 애플리케이션에서 데이터를 동적으로 가져오고, 보내고, 업데이트할 수 있습니다. 이 조합을 사용하면 지속적인 페이지를 다시 로드하지 않고도 원활한 사용자 환경을 제공하는 풍부하고 반응성이 뛰어난 대화형 웹 애플리케이션을 구축할 수 있습니다.
AJAX는 단일 기술이 아니라 함께 작동하는 여러 기술의 조합입니다.
AJAX의 기본을 보여주기 위해 간단한 HTML 페이지를 만들고 JavaScript를 사용하여 AJAX 요청을 서버에 보내겠습니다.
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title> </head> <body>
<h1>AJAX Request Example</h1>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script src="app.js"></script> </body> </html>
2.JavaScript 파일(app.js) 만들기:
document.getElementById('loadData').addEventListener('click', function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('dataContainer').innerHTML = xhr.responseText;
} else {
console.error('Failed to load data');
}
};
xhr.send();
});
3.AJAX 요청 테스트:
An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. APIs define the methods and data formats that applications can use to interact with each other, making it easier to build software by providing reusable components and services.
APIs typically use JSON (JavaScript Object Notation) or XML (eXtensible Markup Language) to format data. JSON is more lightweight and easier to read, making it the preferred choice for most modern APIs.
{
"id": 1,
"title": "Example Post",
"body": "This is an example of a post.",
"userId": 1
}
<post> <id>1</id> <title>Example Post</title> <body>This is an example of a post.</body> <userId>1</userId> </post>
To make your first AJAX request, you need a basic HTML and JavaScript environment. Follow these steps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First AJAX Request</title>
</head>
<body>
<h1>Fetch Data with AJAX</h1>
<button id="fetchDataBtn">Fetch Data</button>
<div id="dataDisplay"></div>
<script src="ajax.js"></script>
</body>
</html>
Create a JavaScript File (ajax.js):
document.getElementById('fetchDataBtn').addEventListener('click', function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
document.getElementById('dataDisplay').innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
console.error('Error fetching data');
}
};
xhr.onerror = function() {
console.error('Request failed');
};
xhr.send();
});
3.Test the AJAX Request:
The XMLHttpRequest object is used to interact with servers. It allows you to make HTTP requests to retrieve or send data without reloading the page.
When the server responds to an AJAX request, the response is available in the xhr.responseText property. You can use JavaScript to process this data and update the webpage dynamically.
To debug AJAX requests, use browser developer tools:
The Fetch API is a modern alternative to XMLHttpRequest for making HTTP requests. It provides a more powerful and flexible feature set and returns Promises, making it easier to handle asynchronous operations.
fetch('https://jsonplaceholder.typicode.com/posts/1')<br><br>
.then(response => response.json())<br><br>
.then(data => {<br><br>
document.getElementById('dataDisplay').innerHTML = <br>
<h2>${data.title}</h2> <br>
<p>${data.body}</p> <br>
;<br><br>
})<br><br>
.catch(error => console.error('Error fetching data:', error));<br>
fetch('https://jsonplaceholder.typicode.com/posts', {<br><br>
method: 'POST',<br><br>
headers: {<br><br>
'Content-Type': 'application/json'<br><br>
},<br><br>
body: JSON.stringify({<br><br>
title: 'New Post',<br><br>
body: 'This is a new post.',<br><br>
userId: 1<br><br>
})<br><br>
})<br><br>
.then(response => response.json())<br><br>
.then(data => console.log('Post created:', data))<br><br>
.catch(error => console.error('Error creating post:', error));<br>
The Fetch API provides a json() method to parse the response body as JSON. This method returns a Promise that resolves with the parsed JSON data.
Use .catch() to handle errors in Fetch requests. This method catches any errors that occur during the fetch operation or while processing the response.
REST (Representational State Transfer) is an architectural style for designing networked applications. RESTful APIs follow specific conventions for managing resources over the web.
fetch('https://jsonplaceholder.typicode.com/posts')<br><br>
.then(response => response.json())<br><br>
.then(posts => {<br><br>
posts.forEach(post => {<br><br>
console.log(post.title);<br><br>
});<br><br>
})<br><br>
.catch(error => console.error('Error fetching posts:', error));<br>
CRUD stands for Create, Read, Update, Delete — four fundamental operations for managing data.
CRUD Operations with AJAX
CRUD stands for Create, Read, Update, Delete—four fundamental operations for managing data.
Create: Use POST to add new data.
Read: Use GET to retrieve data.
Update: Use PUT or PATCH to modify existing data.
Delete: Use DELETE to remove data.
Example of CRUD Operations with Fetch:
CORS (Cross-Origin Resource Sharing) is a security feature that restricts web pages from making requests to a different domain than the one that served the web page. To work with APIs across different domains, the server must enable CORS.
Promises simplify the management of asynchronous operations in JavaScript. They provide a more readable way to handle AJAX requests compared to callbacks.
fetch('/api/posts')<br><br>
.then(response => response.json())<br><br>
.then(data => console.log(data))<br><br>
.catch(error => console.error('Error:', error));<br>
Async/Await is syntactic sugar built on top of Promises, making asynchronous code easier to read and write.
async function fetchPosts() {<br><br>
try {<br><br>
const response = await fetch('/api/posts');<br><br>
const data = await response.json();<br><br>
console.log(data);<br><br>
} catch (error) {<br><br>
console.error('Error:', error);<br><br>
}<br><br>
}
<p>fetchPosts();<br>
</p>To handle multiple AJAX requests in sequence, use Promises or Async/Await to chain requests.
fetch('/api/user')<br><br>
.then(response => response.json())<br><br>
.then(user => fetch(/api/posts?userId=${user.id}))<br><br>
.then(response => response.json())<br><br>
.then(posts => console.log(posts))<br><br>
.catch(error => console.error('Error:', error));<br>
To build a real-world application, you need a backend API and a frontend interface. For this example, we’ll use a simple API to fetch weather data.
const apiKey = 'YOUR_API_KEY';<br><br>
const city = 'London';<br><br>
fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey})<br><br>
.then(response => response.json())<br><br>
.then(data => {<br><br>
document.getElementById('weatherDisplay').innerHTML = <br>
<h2>Weather in ${data.name}</h2> <br>
<p>Temperature: ${(data.main.temp - 273.15).toFixed(2)}°C</p> <br>
<p>Condition: ${data.weather[0].description}</p> <br>
;<br><br>
})<br><br>
.catch(error => console.error('Error fetching weather data:', error));<br>
Use JavaScript to create dynamic elements that update based on user input or server responses.
document.getElementById('searchButton').addEventListener('click', function() {<br><br>
const city = document.getElementById('cityInput').value;<br><br>
fetchWeatherData(city);<br><br>
});
<p>function fetchWeatherData(city) {<br><br>
fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey})<br><br>
.then(response => response.json())<br><br>
.then(data => {<br><br>
document.getElementById('weatherDisplay').innerHTML = <br>
<h2>Weather in ${data.name}</h2> <br>
<p>Temperature: ${(data.main.temp - 273.15).toFixed(2)}°C</p> <br>
<p>Condition: ${data.weather[0].description}</p> <br>
;<br><br>
})<br><br>
.catch(error => console.error('Error fetching weather data:', error));<br><br>
}<br>
</p>Use HTML and CSS to format the data received from APIs. JavaScript allows you to manipulate the DOM and display the data dynamically.
Debouncing and Throttling are techniques used to limit the rate at which a function is executed. This is especially useful when working with APIs to avoid unnecessary requests.
function debounce(func, delay) {<br><br>
let timeout;<br><br>
return function(...args) {<br><br>
clearTimeout(timeout);<br><br>
timeout = setTimeout(() => func.apply(this, args), delay);<br><br>
};<br><br>
}
<p>const fetchWeatherDebounced = debounce(fetchWeatherData, 300);<br><br>
document.getElementById('cityInput').addEventListener('input', function() {<br><br>
fetchWeatherDebounced(this.value);<br><br>
});<br>
</p>Use JavaScript to manage the state of your AJAX requests and provide feedback to users, such as loading indicators or error messages.
function fetchWeatherData(city) {<br><br>
const loader = document.getElementById('loader');<br><br>
loader.style.display = 'block'; // Show loader
<div class="highlight js-code-highlight">
<pre class="highlight plaintext">fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`)
.then(response => response.json())
.then(data => {
loader.style.display = 'none'; // Hide loader
// Display weather data...
})
.catch(error => {
loader.style.display = 'none'; // Hide loader
console.error('Error fetching weather data:', error);
});
}
To improve performance, cache API responses using JavaScript or a service worker. This reduces the number of requests sent to the server and speeds up the application.
const cache = new Map();
<p>function fetchWeatherData(city) {<br><br>
if (cache.has(city)) {<br><br>
displayWeatherData(cache.get(city)); // Use cached data<br><br>
} else {<br><br>
fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey})<br><br>
.then(response => response.json())<br><br>
.then(data => {<br><br>
cache.set(city, data); // Cache the response<br><br>
displayWeatherData(data);<br><br>
})<br><br>
.catch(error => console.error('Error fetching weather data:', error));<br><br>
}<br><br>
}<br>
</p>Use browser developer tools to inspect network requests, view responses, and debug JavaScript code:
Provide users with clear error messages and fallback options when AJAX requests fail.
fetch('https://api.example.com/data')<br><br>
.then(response => response.json())<br><br>
.then(data => {<br><br>
// Display data...<br><br>
})<br><br>
.catch(error => {<br><br>
console.error('Error fetching data:', error);<br><br>
document.getElementById('errorMessage').innerText = 'Failed to load data. Please try again later.';<br><br>
});<br>
In this tutorial, you’ve learned how to use AJAX and APIs to build dynamic web applications. You explored the basics of AJAX, the Fetch API, interacting with RESTful APIs, and advanced techniques like error handling, optimization, and security.
As you continue learning, explore more advanced topics like:
By Peymaan Abedinpour | پیمان عابدین پور
위 내용은 AJAX 및 API 실험: 초보자를 위한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
