Ajax request_jquery를 시뮬레이션하는 jQuery Mockjax 플러그인의 자세한 예
1. 원칙
jquery-mockjax는 프런트엔드 Ajax 요청의 반환 데이터를 백그라운드로 모의하는 데 사용됩니다.
원리는 아주 간단합니다
Ajax 요청을 보내려는 js 코드에 중단점을 넣은 다음 [jquery-mockjax 도입]과 [jquery-mockjax 도입 안 함]의 경우 $.ajax.toString() 값을 비교합니다. .
분명히 jquery-mockjax가 도입되면 이 모의 라이브러리는 jquery에서 제공하는 ajax 기능을 대체하게 됩니다. 이렇게 하면 조롱하기가 쉽습니다.
실제 개발 과정에서는 프론트엔드와 백엔드가 통일된 인터페이스를 협의한 뒤 각자의 작업을 시작했습니다. 현재 백그라운드에서 데이터를 가져와야 하는 Ajax 요청이 있습니다.
$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
}); 하지만 이 서비스는 아직 만들어지지 않았을 수도 있습니다. 백엔드를 개발한 사람(PHP, Ruby, .NET, GoldFusion 등을 사용하는 잘생긴 사람)이 떠났거나 다른 일로 바쁠 수도 있습니다. 어쨌든 이 요청을 하면 원하는 결과를 얻지 못하고 404(찾을 수 없음) 오류만 표시됩니다.
이건 정말 안타깝고, 재촉해도 소용없습니다. 옆에 있는 테스터들이 테스트해 보라고 아우성치고 있고, 저는 즉각적인 결과를 보고 싶어합니다. 현재로서는 자신에게만 의존할 수 있습니다. 더 좋은 방법 중 하나는 Ajax 요청을 시뮬레이션하는 것입니다. 여기서는 jQuery Mockjax 플러그인을 사용합니다.
주소: jQuery Mockjax
jQuery 플러그인입니다. 다운로드하여 인용할 때 jQuery 뒤에 배치하세요.
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="vendor/jquery.mockjax.js"></script> </body> </html>
그런 다음 요청 코드 이전에 요청을 시뮬레이션하는 코드를 실행하고, 플러그인에서 제공하는 $.mockjax() 메서드를 사용하고, url 및 responseText 두 매개변수를 임시로 지정합니다.
$.mockjax({
url: '/products/',
responseText: 'Here you are!'
}); 동일한 URL로 Ajax 요청을 모니터링하고 요청이 발행되면 응답을 가로채서 시뮬레이션합니다. responseText의 값은 시뮬레이션된 응답 내용이므로 첫 번째 예제의 실행 결과가 원활하게 실행될 수 있습니다. is 'Here you are' 이 내용은 div#result에 표시됩니다. 더 이상 요청을 모의할 필요가 없으면 $.mockjax.clear() 메서드를 사용하여 삭제할 수 있습니다.
$.mockjax.clear();
백그라운드 서비스 개발이 완료되면 이 방법을 사용하여 시뮬레이션된 요청을 모두 지우고 실제 요청 효과를 경험할 수 있습니다. 모든 시뮬레이션 요청을 한 번에 삭제하지 않고 대신 특정 시뮬레이션 요청을 대상으로 하는 경우 시뮬레이션 요청의 ID를 전달할 수 있으며 각 시뮬레이션 요청은 ID 값을 반환합니다.
var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo); 이렇게 하면 두 번째 시뮬레이션 요청이 지워지고 첫 번째 시뮬레이션 요청이 유지됩니다.
Ajax 요청의 URL 주소는 시뮬레이션된 요청의 URL과 일치해야 하므로 페이지에 요청이 많다고 가정하면 각 요청을 시뮬레이션하는 것은 매우 고통스럽습니다. 다행히 플러그인의 url 매개변수는 매우 어렵습니다. 와일드카드 제공 * 방법:
$.mockjax({
url: '/books/*'
}); URL 주소가 /books/cook인 요청을 일치시키는 것 외에도 /books/math라는 주소로 요청을 일치시킬 수도 있습니다. 더 복잡한 일치 패턴을 위해 정규 표현식을 사용할 수도 있습니다.
$.mockjax({
url: /^\/data\/(cook|math)$/i
}); 플러그인의 데이터 매개변수를 사용하여 다양한 요청 데이터를 기반으로 다양한 시뮬레이션 응답을 수행합니다.
$.mockjax({
url: '/books/',
data: {
type: 'cook'
},
responseText: 'You want a cook book!'
});
$.mockjax({
url: '/books/',
data: {
type: 'math'
},
responseText: {
"content": "You want a math book!"
}
}); 동일한 URL 주소라도 요청한 데이터가 다르면 얻어지는 응답 내용이 다릅니다. 일반 텍스트 문자열 외에도 응답 콘텐츠에 json을 사용할 수도 있습니다
형식 문자열.
플러그인은 기본 매개변수 설정 개체 $.mockjaxSettings도 제공합니다. 지정되지 않은 매개변수는 다음 기본값을 사용합니다.
$.mockjaxSettings = {
logging: true,
status: 200,
statusText: "OK",
responseTime: 500,
isTimeout: false,
throwUnmocked: false,
contentType: 'text/plain',
response: '',
responseText: '',
responseXML: '',
proxy: '',
proxyType: 'GET',
lastModified: null,
etag: '',
headers: {
etag: 'IJF@H#@923uf8023hFO@I#H#',
'content-type' : 'text/plain'
}
}; 기본값을 수정한 후 후속 시뮬레이션 요청에서는 수정된 값을 사용합니다.
$.mockjaxSettings.contentType = "application/json";
여기에서는 contentType의 기본값만 수정됩니다.
위에서는 Ajax 요청을 시뮬레이션하기 위한 jQuery Mockjax 플러그인 관련 지식을 예제를 통해 설명했습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7651
15
1392
52
91
11
73
19
36
110
Ajax 요청 시간 초과를 연장하는 방법은 무엇입니까?
Jan 26, 2024 am 10:09 AM
Ajax 요청 만료 시간을 연장하는 방법은 무엇입니까? 네트워크 요청을 할 때 많은 양의 데이터나 복잡한 계산을 처리해야 하는 상황이 자주 발생하며, 이로 인해 요청 시간이 초과되어 데이터가 정상적으로 반환되지 않을 수 있습니다. 이 문제를 해결하기 위해 Ajax 요청의 만료 시간을 연장하여 요청이 성공적으로 완료될 수 있도록 보장할 수 있습니다. 다음은 Ajax 요청의 만료 시간을 연장하기 위한 몇 가지 방법과 특정 코드 예제를 소개합니다. timeout 속성을 사용하여 Ajax 요청을 할 때 timeout 속성을 다음과 같이 설정할 수 있습니다.
Ajax 요청이 만료되는 데 얼마나 걸리나요?
Nov 20, 2023 am 10:29 AM
AJAX 요청에는 고정된 만료 시간이 없습니다. "비동기 JavaScript 및 XML"은 JavaScript를 사용하여 전체 페이지를 새로 고치지 않고 서버에 요청을 보내고 응답을 받는 웹 페이지에서 비동기 요청을 보내는 기술입니다.
컨트롤러를 사용하여 Yii 프레임워크에서 Ajax 요청을 처리하는 방법
Jul 28, 2023 pm 07:37 PM
Yii 프레임워크에서 컨트롤러는 요청 처리에 중요한 역할을 합니다. 일반 페이지 요청을 처리하는 것 외에도 컨트롤러를 사용하여 Ajax 요청을 처리할 수도 있습니다. 이 기사에서는 Yii 프레임워크에서 Ajax 요청을 처리하는 방법을 소개하고 코드 예제를 제공합니다. Yii 프레임워크에서 Ajax 요청 처리는 다음 단계를 통해 수행될 수 있습니다. 첫 번째 단계는 컨트롤러(Controller) 클래스를 생성하는 것입니다. Yii 프레임워크에서 제공하는 기본 컨트롤러 클래스 yiiwebCo를 상속받을 수 있습니다.
프로젝트에 적합한 Ajax 요청 라이브러리를 선택하는 방법
Jan 30, 2024 am 08:32 AM
실용 가이드: 귀하의 프로젝트에 적합한 Ajax 요청 라이브러리는 무엇입니까? 프론트엔드 개발이 지속적으로 발전하면서 Ajax는 웹 개발에 없어서는 안 될 부분이 되었습니다. 프로젝트에 적합한 Ajax 요청 라이브러리를 선택하는 것은 개발 효율성을 높이고 사용자 경험을 최적화하는 데 중요합니다. 이 기사에서는 독자가 자신의 프로젝트에 적합한 도구를 선택할 수 있도록 일반적으로 사용되는 몇 가지 Ajax 요청 라이브러리를 소개합니다. jQueryAjax jQuery가 가장 인기 있는 JavaScript 라이브러리 중 하나라는 사실은 부인할 수 없습니다. 풍부한 혜택을 제공합니다
필수 도구: 일반적으로 사용되는 Ajax 요청 라이브러리가 무엇인지 이해합니까?
Jan 30, 2024 am 11:00 AM
개발 필수사항: 일반적으로 사용되는 Ajax 요청 라이브러리가 무엇인지 살펴보세요. 최신 프런트 엔드 개발에서는 비동기 요청에 Ajax를 사용하는 것이 표준 기능이 되었으며, 적절한 Ajax 요청 라이브러리를 선택하면 네트워크 요청을 보다 효율적으로 처리하여 개발 효율성과 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 개발자가 프로젝트에 적합한 도구를 선택하는 데 도움이 되도록 일반적으로 사용되는 Ajax 요청 라이브러리를 탐색합니다. jQueryAjax: 가장 인기 있는 JavaScript 라이브러리 중 하나인 jQuery는 강력한 Ajax 요청 기능을 제공합니다.
Ajax 요청 만료 시간을 맞춤설정할 수 있나요?
Jan 26, 2024 am 11:13 AM
Ajax 요청의 만료 시간을 맞춤설정할 수 있나요? 웹 개발에서는 종종 Ajax를 사용하여 페이지에 데이터를 동적으로 로드하는 비동기 요청을 구현합니다. Ajax 요청을 할 때 요청의 시간 초과를 제어해야 하는 경우가 있습니다. 즉, 시간 제한을 설정하고 지정된 시간 내에 응답이 수신되지 않으면 처리해야 합니다. 그렇다면 Ajax 요청의 만료 시간을 사용자 정의할 수 있습니까? 이 문서에서는 이 문제를 자세히 소개하고 특정 코드 예제를 제공합니다. jQuery의 Ajax 기능 사용
Ajax 요청 시간 초과의 원인은 무엇입니까?
Jan 26, 2024 am 10:53 AM
Ajax 요청은 어떤 상황에서 만료되나요? 웹 애플리케이션이 개발되면서 Ajax(Asynchronous JavaScript and XML) 기술은 웹 개발의 필수적인 부분이 되었습니다. Ajax를 통해 서버에서 데이터를 얻고 전체 페이지를 새로 고치지 않고도 웹 페이지의 콘텐츠를 동적으로 업데이트할 수 있습니다. 그러나 Ajax를 사용하여 요청을 보낼 때 요청 만료가 발생하는 경우가 있습니다. 그렇다면 어떤 상황에서 Ajax 요청이 만료되나요?
Ajax 요청에 대한 시간 초과를 설정하는 방법은 무엇입니까?
Jan 26, 2024 am 09:23 AM
Ajax 요청 만료 시간을 설정하는 방법은 무엇입니까? 특정 코드 예제가 필요합니다. 인터넷 애플리케이션이 개발되면서 Ajax는 웹 개발에 없어서는 안 될 부분이 되었습니다. Ajax 요청을 보낼 때 요청이 너무 길어서 사용자 경험이 저하되거나 브라우저가 정지되는 것을 방지하기 위해 요청 만료 시간을 제한해야 하는 경우가 있습니다. 이 기사에서는 Ajax 요청의 만료 시간을 설정하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다. Ajax 요청의 만료 시간을 설정하려면 주로 XMLHttpRequest가 필요합니다.
