집 > 기사 > 웹 프론트엔드 > Ajax에서 GET 및 POST 사용에 대한 자세한 설명

Ajax에서 GET 및 POST 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-02 14:54:471443검색

이번에는 Ajax에서 GET과 POST를 사용하는 방법에 대해 자세히 설명하겠습니다. Ajax에서 GET과 POST를 사용할 때 주의사항은 무엇인가요?

이전 에세이에서 향수를 불러일으키는 방식으로 다양한 브라우저와 호환되는 XHR 객체를 생성하는 방법을 요약했습니다.

XHR 객체를 설정한 후 클라이언트가 해야 할 일은 어떤 방식으로든 데이터를 서버에 전달하는 것뿐입니다. 이에 상응하는 응답을 얻기 위해 이번 Ajax 기술 요약 2분기에서는 데이터를 제출하는 두 가지 방법에 대해 집중적으로 살펴보겠습니다.

이 작업을 수행하기 전에 HTTP 전송 프로토콜을 이해해야 합니다.

HTTP는 클라이언트와 서버 간의 요청-응답 프로토콜로 작동합니다.

예: 클라이언트(브라우저)가 서버에 HTTP 요청을 제출하면 서버가 클라이언트에 응답을 반환합니다. 응답에는 요청에 대한 상태 정보와 요청되었을 수 있는 콘텐츠가 포함되어 있습니다. HTTP 프로토콜을 기반으로 데이터를 전송하려면

두 가지 HTTP 요청 방법: GET 및 POST

클라이언트와 서버 간에 요청-응답을 할 때, 가장 일반적으로 사용되는 두 가지 방법은 GET과 POST입니다.

GET - 지정된 리소스에서 데이터를 요청합니다.
POST - 처리할 데이터를 지정된 리소스에 제출

이것은 W3C의 GRT 및 POST 사용 시나리오 설명입니다. 문자 그대로 이해하면 GET은 서버에서 데이터를 얻는 데 사용됩니다. POST는 제출된 경로와 데이터의 URL에서 이를 확인할 수 있습니다: img 스크립트의 src 속성에 있는

;

3. "동일 출처 정책"이며 "교차 도메인"에 사용될 수 있습니다. 가까운 시일 내에 교차 도메인에 대한 내용을 요약하고 싶습니다. 질문, 먼저 여기에 구멍을 파십시오)

여기서는 양식 제출의 차이점

1. Ajax 양식 제출에서 get은 open() 함수를 사용하여 데이터를 제출합니다. 여기서 데이터는 URL 키 및 값 형식으로 URL 뒤에 연결됩니다.

xhr.open('get','xxx.php?name=tom & age=18');
xhr.send(null);

브라우저의 URL은 다음과 같습니다.

get이 URL을 제출합니다

여기에서 볼 수 있습니다. GET은 매개변수 데이터입니다. 제출된 양식의 작업 속성이 가리키는 URL에 대기열이 추가됩니다. . 값은 양식의 각 필드에 해당하며 URL에서 확인할 수 있습니다. ID의 URL 길이는 제한되어 있습니다. URL이 너무 길면 너무 긴 문자가 자동으로 차단됩니다. 이는 쉽게 문제를 일으킬 수 있습니다. 너무 많은 매개변수가 전달되어 URL이 너무 길어지면 URL이 자동으로 너무 긴 문자를 가로채고 결국 전달된 매개변수를 얻을 수 없게 됩니다. 이는 또한 GET으로 전송되는 데이터 크기를 일반적으로 2KB를 초과하지 않도록 제한합니다.

또한 URL 스크린샷에서 볼 수 있듯이 GET

보안

은 매우 낮습니다. GET 메서드를 통해 데이터를 제출하면 사용자 이름과 비밀번호가 나타납니다. URL에. 다음과 같은 경우:

- 로그인 페이지가 브라우저에 의해 캐시될 수 있습니다.

- 다른 사람이 고객의 컴퓨터에 액세스할 수 있습니다. 그러면 다른 사람들이 브라우저 기록에서 고객의 계좌 번호와 비밀번호를 읽을 수 있습니다. 따라서 어떤 경우에는 GET 방식이 심각한 보안 문제를 일으킬 수 있습니다.

GET 방식이 장점이 없는 것은 아닙니다. 속도 테스트에서 GET 제출 속도는 POST 방식보다 수십 배 빠릅니다.

2. Ajax 양식 제출에서 POST는 open() 함수에 URL만 제공하면 되며 send() 함수는 데이터를 제출합니다.

//获取form数据
var formDom = document.querySelector('form');
var formData = new FormData(formDom);
//发送数据
xhr.open('post',formDom.action);
xhr.send(formData);

POST는 HTTPPOST 메커니즘을 통해 양식의 각 필드와 그 내용은 HTML HEADER에 위치하며 action 속성이 가리키는 URL 주소로 함께 전송됩니다. 사용자는 이 프로세스를 볼 수 없습니다. 더 높은 보안

POST는 대량의 데이터를 전송하며 일반적으로 기본적으로 제한이 없습니다. 이 데모에서는 FormData 개체를 사용하여 사진, 서식 있는 텍스트 및 기타 파일을 전달할 수 있지만 이는 불가능합니다.

요약하자면 Get은 서버에 데이터를 요청하는 것이고 Post는 데이터를 서버에 제출하라는 요청입니다. FORM(폼)에서 Method의 기본값은 "GET"입니다.

기본적으로 GET과 POST일 뿐입니다. 전송 메커니즘이 다르다는 것은 하나를 취하고 하나를 보내는 것이 아닙니다!

요컨대, 이 두 가지 양식 제출 방법 사이에는 장단점이 없으며 일상 업무의 필요에 따라 파악해야 하는 적응 시나리오만 다를 뿐입니다.

나중에 브라우저와 서버 간의 상호 작용에서 경로를 작성하는 여러 가지 방법을 요약하겠습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!