jquery 도메인 간 요청 데이터 가져오기-프런트엔드 Q&A-php.cn

jquery 도메인 간 요청 데이터 가져오기

PHPz

풀어 주다： 2023-05-18 16:32:10

원래의

1468명이 탐색했습니다.

웹 개발에서는 일반적으로 특정 비즈니스 요구 사항을 완료하기 위해 다른 도메인 이름에서 데이터를 요청해야 합니다. 이 과정에서 jQuery 프레임워크의 get 요청은 매우 일반적인 방법입니다. 이 기사에서는 jQuery의 get 메소드를 사용하여 도메인 간 요청을 만들고 데이터를 얻는 방법을 소개합니다.

1. 크로스 도메인 요청이란 무엇인가요? 동일한 브라우저에서 요청한 리소스의 도메인 이름, 포트 또는 프로토콜이 현재 문서와 다른 경우 이를 크로스 도메인 요청이라고 합니다. 이는 브라우저의 동일 출처 정책 제한으로 인해 발생합니다. 즉, 두 URL의 프로토콜, 호스트 이름 및 포트 번호가 동일한 경우에만 동일한 출처의 데이터를 전송할 수 있습니다. 도메인 간 요청을 할 때 브라우저는 현재 도메인 이름에서 다른 도메인 이름으로의 요청을 제한하는 보안 메커니즘을 자동으로 트리거합니다.

2. jQuery의 get 메소드

jQuery는 JavaScript를 기반으로 하는 크로스 브라우저 JavaScript 라이브러리입니다. 동적 페이지, 독립 실행형 JavaScript 애플리케이션 및 비동기 요청을 개발하는 데 널리 사용됩니다. jQuery에서 get 메소드는 ajax 모듈에 속하며 HTTP GET 요청을 통해 서버에서 데이터를 가져오는 데 사용됩니다.

교차 도메인 요청을 구현할 때 jQuery에서 get 메서드를 사용하여 요청을 보내고 응답 데이터를 받아야 합니다. 이 메소드는 다음 세 가지 매개변수를 전달해야 합니다.

url: 요청된 리소스의 URL 주소

data: 서버로 전송된 데이터
success: 요청이 성공한 후의 콜백 함수; 여기서 성공 콜백 함수는 필수이며 요청이 성공한 후 반환된 데이터를 처리하는 데 사용됩니다.
3. 교차 도메인 요청 예

이제 JSON 형식의 데이터 세트를 제공하는 API 인터페이스가 있고 다른 도메인 이름에서 이 데이터 세트를 요청해야 한다고 가정합니다. 다음은 간단한 JSON 데이터 형식입니다.

{
    "name": "Apple",
    "color": "Red, Yellow, Green",
    "shape": "Round"
}

로그인 후 복사

jQuery의 get 메소드를 통해 이 JSON 형식 데이터를 가져옵니다.

$.get("https://api.example.com/fruits/apple", function(data) {
    console.log(data);
});

로그인 후 복사

여기서는 요청된 URL을 get 메소드의 첫 번째 매개변수로 전달합니다. 이 메서드를 통해 API 인터페이스에 Get 요청을 보내고 요청이 성공한 후 인터페이스에서 반환된 JSON 데이터를 가져옵니다. 이 JSON 데이터는 콜백 함수의 data 매개변수로 전달되며, 이 함수에서 데이터를 처리할 수 있습니다.

단, 실제 사용 중에는 오류 메시지와 함께 요청이 실패할 수 있습니다. 이 경우 jQuery의 실패 메소드를 사용하여 오류 메시지를 얻을 수 있습니다.

$.get("https://api.example.com/fruits/apple", function(data) {
    console.log(data);
}).fail(function() {
    console.log("请求失败");
});

로그인 후 복사

이 예에서는 요청의 오류 정보를 가져오기 위해 실패 메소드를 사용합니다. 요청이 실패하면 콘솔은 "요청 실패"라는 오류 메시지를 인쇄합니다. 이렇게 하면 그에 따라 오류 메시지를 처리할 수 있습니다.

4. 교차 도메인 요청의 전제 조건

교차 도메인 요청에서 서버는 다른 도메인 이름의 요청을 허용하도록 몇 가지 설정을 지정해야 합니다. 그렇지 않으면 브라우저가 요청을 차단하고 오류 메시지를 표시합니다. 이 문제를 해결하기 위해 서버 측에 CORS(Cross-Origin Resource Sharing) 헤더 정보를 추가하여 다른 도메인 이름의 요청을 허용할 수 있습니다.

API 인터페이스에서는 HTTP 응답 헤더에 "Access-Control-Allow-Origin"을 추가하여 허용된 요청의 출처를 지정할 수 있습니다. 예를 들어, PHP에서는 다음 코드를 추가할 수 있습니다.

header("Access-Control-Allow-Origin: *");

로그인 후 복사

이 예에서 별표 기호는 모든 도메인 이름에 대한 요청이 허용된다는 의미입니다. 특정 도메인 이름만 데이터를 요청하도록 허용하는 경우 별표를 대상 도메인 이름으로 바꿀 수 있습니다. 예를 들어 example.com이 데이터를 요청하도록 허용하는 경우 다음과 같이 설정할 수 있습니다.

header("Access-Control-Allow-Origin: https://example.com");

로그인 후 복사

물론 Node.js를 사용하는 경우 Express 및 Koa와 같은 프레임워크를 사용하여 CORS 헤더 정보를 설정할 수 있습니다. . 다음은 간단한 Express 샘플 코드입니다.

const express = require('express');
const app = express();

// 添加CORS头信息
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

// 返回JSON数据
app.get('/fruits/apple', (req, res) => {
    res.json({"name": "Apple", "color": "Red, Yellow, Green", "shape": "Round"});
});

// 监听端口
app.listen(3000, () => console.log('Example app listening on port 3000!'));

로그인 후 복사

이 예에서는 Express 프레임워크를 사용하여 HTTP 서비스를 생성하고 미들웨어에 CORS 헤더 정보를 추가합니다. get 요청에서는 JSON 형식의 데이터 세트를 클라이언트에 반환합니다. 모든 것이 정상이면 클라이언트는 성공적으로 데이터를 가져올 수 있습니다.

5. 요약

이번 글의 소개를 통해 우리는 크로스 도메인 요청이 무엇인지, jQuery의 get 메소드를 사용하여 크로스 도메인 요청을 수행하는 방법, 서버에 필요한 몇 가지 설정을 소개했습니다. 도메인 간 요청은 웹 개발에서 흔히 발생하는 문제이며, jQuery 프레임워크를 사용하면 이 문제를 쉽게 해결하고 매우 효율적인 방법으로 데이터를 얻을 수 있습니다.

위 내용은 jquery 도메인 간 요청 데이터 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!