Ajax request_jquery를 시뮬레이션하는 jQuery Mockjax 플러그인의 자세한 예
- WBOY원래의
- 2016-05-16 15:20:371268검색
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 플러그인 관련 지식을 예제를 통해 설명했습니다.