[javascript] JAX 호출을 통한 웹페이지 검색 기능 구현

11 Dec 2023

javascript

본 문서에서는 JAX(Call)를 사용하여 외부 웹페이지에서 데이터를 불러오고, 해당 데이터를 검색하는 간단한 예제를 소개합니다.

JAX(Cross-Origin) 호출이란?

JAX(Cross-Origin)는 웹브라우저에서 다른 도메인에 위치한 데이터에 접근하기 위한 방법 중 하나입니다. 일반적으로 동일 출처 정책(Same Origin Policy)으로 인해 다른 도메인에 위치한 데이터에 접근할 수 없지만, JAX를 통해 해당 제한을 우회할 수 있습니다.

예제 코드

다음은 JAX 호출을 사용하여 외부 웹페이지에서 데이터를 불러오고, 해당 데이터를 검색하는 간단한 예제입니다.

function searchWebsite(url, searchTerm) {
    fetch(url)
    .then(response => response.text())
    .then(data => {
        if (data.includes(searchTerm)) {
            console.log('검색어를 포함한 데이터를 찾았습니다.');
        } else {
            console.log('검색어를 포함한 데이터를 찾을 수 없습니다.');
        }
    })
    .catch(error => console.log('데이터를 불러오는 도중 에러가 발생했습니다: ', error));
}

// 예제 사용
const url = 'https://example.com';
const searchTerm = '검색어';
searchWebsite(url, searchTerm);

위 예제 코드는 fetch를 사용하여 특정 URL의 데이터를 불러온 후, 해당 데이터에 특정 검색어가 포함되어 있는지 확인하는 함수를 정의한 것입니다.

결론

JAX(Cross-Origin) 호출은 웹 페이지에서 다른 도메인에 위치한 데이터에 접근하는 유용한 방법입니다. 이를 활용하여 원하는 데이터를 불러와 검색하는 등의 기능을 구현할 수 있습니다.

더 많은 정보를 원하시거나, 특정 상황에 맞는 자세한 코드 및 예제를 찾고 싶으시다면, 관련 웹 사이트 또는 JavaScript 라이브러리의 공식 문서를 참고하시기 바랍니다.

참고 자료

Mozilla Developer Network (MDN) - Fetch API
JavaScript.info - Promise
W3Schools - JavaScript Fetch API