AJAX에서 비동기식 동기 요청을 구현하는 방법

이 튜토리얼에서는 AJAX에서 비동기식 및 동기식 요청을 구현하는 방법에 대해 설명합니다. FormData 유형 및 이벤트 수신 인터페이스를 구현하려면 AJAX가 필요합니다. 그러면 페이지 데이터가 변경될 때만 서버에서 새 데이터를 요청하는 방법이 있습니까? , 페이지 새로 고침을 방지하면서 페이지에 표시된 데이터를 동적으로 바꾸시겠습니까? 오늘은 AJAX의 개념에 대해 이야기해보겠습니다.

XMLHttpRequest 객체

　 XMLHttpRequest는 단지 JavaScript 객체, 정확하게 말하면 생성자입니다. 즉, 전혀 신비한 것이 아니며, 유일한 특별한 점은 클라이언트(예: 브라우저)에서 제공된다는 것입니다(자바스크립트에 기본이 아닌). 또한 속성, 메서드 및 속성도 있습니다. 새 키워드를 통해 인스턴스화해야 하며, 이를 마스터하기만 하면 됩니다.

XMLHttpRequest to get data

우리는 페이지 새로 고침을 방지하여 프로젝트에서 데이터를 가져오는 데 AJAX가 사용된다는 것을 알고 있는데, 데이터는 어디서 오는 걸까요? 이 데이터를 얻는 방법을 어떻게 알 수 있나요? 대답은 우리가 일반적으로 API를 사용하여 다양한 데이터베이스와 상호 작용한다는 것입니다.

　 "API"는 "Application Programing Interface"(예: Application Programing Interface)의 약어입니다. 일부 데이터가 열려 있고 사용되기를 기다리고 있으며 이 데이터를 얻는 방법은 API를 사용하는 것입니다. API의 일반적인 형태는 URL이며, 얻고자 하는 데이터를 찾는 데 도움이 되는 지정된 매개변수 이름과 매개변수 값을 제공합니다.

요청 준비를 위한 XMLHttpRequest

서버와 상호작용하려면 먼저 다음 질문에 대해 생각해야 합니다.

데이터를 가져오길 원합니까, 아니면 데이터를 저장하고 싶습니까? ——요청 방법은 "GET" 또는 "POST"입니다. 요청을 어디로 보낼까요?　　　——즉, 해당 API 주소입니다. 응답을 기다리는 방법은 무엇입니까? - "동기"와 "비동기"의 두 가지 옵션이 있습니다.

XMLHttpRequest 인스턴스의 .open() 메서드는 위의 세 가지 질문에 답하는 데 사용됩니다. .open() 메소드는 요청 메소드, 요청 URL 주소, 비동기 요청인지 여부에 대한 부울 값의 세 가지 매개변수를 수신합니다.

다음은 .open() 메서드를 호출하는 예입니다.

// 이 코드는 "example.php"에 대한 GET 동기 요청을 시작합니다.

xhr.open("get", "example.php", false)

// "DELETE", "HEAD", "OPTONS", "PUT"도 open()의 첫 번째 매개변수로 사용할 수 있습니다. 방법.

　위 코드에서는 세 번째 매개변수를 false로 전달하여 동기화를 수행합니다. 일단 동기로 설정되면 send() 메서드는 요청이 완료될 때까지 차단됩니다.

(3) 동기 요청과 비동기 요청

사람들은 일반적으로 AJAX가 비동기라고 생각하지만 사실 AJAX는 데이터를 받은 후 페이지 새로 고침을 피하는 기술입니다. 동기식이든 비동기식이든 개발자는 비즈니스 요구 사항에 맞게 구성해야 합니다(일반적으로 비동기식임에도 불구하고).

동기 AJAX를 언제 사용해야 하는지 궁금하실 겁니다. 제 개인적인 경험으로는 해당 장면을 찾기가 어려운 것 같습니다.

마지막으로 응답을 기다리는 "동기"와 응답을 기다리는 "비동기"의 차이점을 간략하게 설명하겠습니다. "동기"는 요청이 전송되면 후속 JavaScript 코드가 실행되지 않음을 의미하고 "비동기"는 이는 요청이 전송된 후 후속 JavaScript 코드가 계속 실행되고 요청이 성공하면 해당 콜백 함수가 호출된다는 것을 의미합니다.

FormData 유형의 XMLHttpRequest 레벨 2

　 W3C는 XMLHttpRequest 레벨 2 사양을 제안했습니다. 모든 브라우저가 사양에 지정된 콘텐츠를 구현하는 것은 아니지만 여전히 모든 또는 대부분의 브라우저에서 구현되는 일부 콘텐츠가 있습니다.

FormData type

　FormData는 XMLHttpRequest 레벨 2에서 제공하는 새로운 데이터 유형(생성자)입니다. POST 요청을 양식 제출로 위장하는 방법을 아직도 기억하시나요? FormData를 사용하면 XHR2 개체가 전달된 데이터 유형이 FormData의 인스턴스임을 인식하고 적절한 헤더 정보를 자동으로 구성하므로 이 프로세스가 더 쉬워집니다.

POST 요청을 양식 제출로 위장하는 방법은 무엇입니까?

POST 메서드를 사용하여 이 순서로 양식 데이터를 제출하는 경우 "Content-Type" 요청 헤더를 이 값으로 설정해야 합니다.

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

참고: form이 기본 방법이므로 form을 사용할 때 필수 값은 아닙니다.

FormData는 다음과 같이 사용됩니다:

// 添加数据
let data1 = new FormData()
data1.append("name", "Tom")
xhr.send(data1)
 
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)

또한 FormData의 또 다른 이점은 기존 AJAX 요청과 비교할 때 바이너리 데이터(이미지, 비디오, 오디오 등)를 업로드할 수 있다는 것입니다.

FormData의 브라우저 호환성.

Desktop 버전 IE 10+ 및 기타 브라우저가 지원됩니다.

모바일 버전 Android, Firefox Mobile, OperaMobile이 지원되며 다른 브라우저는 알 수 없습니다.

XMLHttpRequest 레벨 2 이벤트 수신 인터페이스

XMLHttpRequest의 첫 번째 버전은 onreadystatechange 이벤트에 대한 콜백 함수만 지정할 수 있습니다. 이벤트는 모든 상황에 대응합니다.

XMLHttpRequest의 두 번째 버전에서는 더 많은 이벤트에 대한 콜백 함수를 지정할 수 있습니다.

onloadstart 요청 발행

onprogress 데이터 보내기 및 로드

onabort 요청이 중단되었습니다. 예를 들어 사용자가 abort() 메서드를 호출했습니다.

onerror 요청이 실패했습니다.

onload 요청이 성공적으로 완료되었습니다.

ontimeout 　시간 사용자가 지정한 한도가 만료되었습니다. 요청이 아직 완료되지 않았습니다.

onloadend 결과나 실패에 관계없이 요청이 완료되었습니다.

이 사례를 읽으신 후 방법을 숙달하셨다고 생각합니다. 더 흥미로운 정보를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!

관련 읽기:

프런트 엔드 js 프레임워크 요약 및 사용법 설명

json 데이터를 구문 분석할 때 ajax 단위 초 형식 문제를 해결하는 방법

js 및 서블릿 파일 업로드 구현 단계 h5

위 내용은 AJAX에서 비동기식 동기 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!