JQUERY를 사용하여 여러 AJAX 요청을 구현하는 방법

아래 편집자는 JQUERY를 사용하여 여러 AJAX 요청 대기를 구현하는 예를 여러분과 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터를 따라가서 살펴볼까요

서문 일반적으로 jQuery의 ajax 함수는 Ajax 호출을 합니다. 함수 ajax는 Ajax 호출만 할 수 있습니다. Ajax 호출이 성공하면 콜백 함수가 실행됩니다. 선택적으로 Ajax 호출이 오류를 반환하면 다른 콜백 함수를 호출합니다.

그러나 이 기능은 여러 Ajax 요청을 할 수 없으며 이러한 요청의 결과에 따라 콜백 함수를 등록할 수 없습니다.

한 가지 시나리오는 사용자 상호 작용이 비활성화되었을 때 웹 페이지가 페이지의 여러 부분에서 데이터를 수집하기 위해 여러 Ajax 요청을 하는 경우입니다.

이 페이지는 페이지가 모든 데이터를 가져온 후에만 사용자 상호 작용을 허용합니다. 이 기사에서는 여러 Ajax 요청을 기반으로 콜백 함수를 등록하기 위해 jQuery에서 제공하는 방법을 소개합니다.

이 방법은 Deferred 객체 개념을 기반으로 합니다. 관련 코드 먼저, 서버 Ajax 호출을 허용하는 두 가지 ASP.NET 웹 API 함수가 백그라운드에 있습니다.

코드는 다음과 같습니다.

백그라운드 수신

ajax 요청 코드

단일 Ajax 호출을 하려면 jQuery의 ajax 함수를 사용하면 됩니다. 앞에는 간단한 예가 있습니다.

ajax 호출 예 성공 및 오류 콜백 함수는 단일 Ajax 호출을 기다리고 있습니다. jQuery 라이브러리는 콜백 함수가 여러 Ajax 호출을 기다리도록 하는 방법을 제공합니다. 이 방법은 Deferred라는 개체를 기반으로 합니다. 지연된 객체는 지연된 객체가 해결되었는지 아니면 거부되었는지에 따라 콜백 함수를 등록할 수 있습니다.

다음은 Deferred의 예입니다.

Deferred 예 Deferred 객체는 연결될 수 있습니다. 다음은 Deferred 객체 체인의 예입니다.

Deferred 객체에는 promise라는 메서드가 있습니다. Promise 객체를 반환합니다. Promise 객체는 상태가 변경되는 것을 방지하기 위해 Deferred 메서드의 하위 집합을 노출합니다.

이는 지연된 객체가 수동으로 해결되거나 거부되는 것을 방지한다는 의미입니다.

Promise 객체는 다음과 같은 지연된 메서드를 노출합니다: then, done, failure, Always, Pipe, Progress, State 및 Promise.

Resolve, Reject, Notify, ResolveWith, RejectWith 및 통지와 같은 Deferred 메서드를 노출하지 않습니다. Promise 객체는 상태를 수동으로 변경할 수 없는 Deferred 객체로 생각할 수 있습니다.

jQuery의 ajax 함수는 jqXHR 객체를 반환합니다.

이 jqXHR 객체에 대한 두 가지 중요한 사실이 있습니다.

우선, jqXHR 객체는 XMLHTTPRequest 객체의 상위 집합입니다.

예를 들어, jqXHR 객체는 ReadyState 속성을 참조하여 XMLHTTPRequest의 상태를 쿼리할 수 있습니다.

readyState가 4이면 Ajax 요청이 완료된 것입니다.

두 번째로, jqXHR 객체는 Promise 인터페이스를 구현하고 모든 Promise 메서드를 노출합니다.

기본적으로 jqXHR 개체는 Promise 개체로 처리될 수 있습니다.

예를 들어 done 메소드는 jqXHR 객체의 성공 콜백 함수로 사용될 수 있습니다.

jQuery 라이브러리는 여러 Deferred 객체를 허용하고 Promise 객체를 반환하는 when이라는 함수를 제공합니다.

모든 Deferred 객체가 해결되면 반환된 Promise 객체도 해결됩니다. Deferred 객체가 거부되면 거부됩니다.

Deferred 객체, Promise 객체 또는 jqXHR 객체일 수 있는 경우 함수에 전달된 Deferred 객체입니다.

다음은 여러 Ajax 요청을 기다리는 코드 예제입니다

먼저 두 개의 변수는 두 개의 jQuery Ajax 호출에서 반환된 jqXHR 개체를 저장합니다.

그런 다음 두 객체를 함수에 전달합니다. 반환된 Promise 객체는 함수에 연결됩니다.

그런 다음 함수는 Promise 객체에 대한 핸들러를 추가합니다.

then 함수의 첫 번째 매개변수는 Promise가 성공할 때 호출되는 성공 함수입니다.

then 함수의 두 번째 매개변수는 Promise가 거부될 때 호출되는 실패 함수입니다.

Failure 기능은 각 Ajax 호출의 상태를 확인합니다. Ajax 호출이 완료되지 않으면 중단됩니다. 페이지가 실행되고 닫혔기 때문에 실패한 함수는 여전히 범위 밖의 변수 j1 및 j2에 액세스할 수 있습니다.

자바스크립트가 꺼져 있기 때문입니다. 클로저는 외부 함수가 닫혀 있어도 외부 함수의 변수에 액세스할 수 있도록 하는 내부 함수입니다. 즉, 내부 함수는 처음 정의된 환경을 유지할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

웹팩을 사용하여 파일을 패키지하는 방법

ES6의 프록시 모드(프록시)에 대한 자세한 소개

웹팩 구축에 대한 자세한 소개

Vue의 $attrs 속성에 대한 자세한 소개

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