[Ajax] Ajax통신과 동시에 링크 이동이 이루어지는 경우!(status 0에러) => Ajax통신이 성공했을 때 링크를 띄우자!

제목처럼 Ajax통신과 동시에 링크 이동이 이루어지는 경우를 세팅할 때 주의해야할 점이 있다!!

 

간단하게 생각해보면

그냥 Ajax통신하는 동시에 링크이동을 해주면 되겠지!하겠지만

다른 동작들과 달리 링크이동이 포함되어 있기 때문에 조금 더 까다롭게 생각할 필요가 있다.

 

문제점

urlBtn.addEventListener('click', urlMove);
function urlMove(){
	CountCheck('버튼클릭');	//Ajax통신
	window.open('!!urlurl!!', '_blank');	// 링크이동
}

처음에는 위에서 했던 것 처럼 Ajax통신 후에 링크이동을 해라! 하는 식으로 써줬지만...

지금 생각하면 차례대로 시작을 하더라도 Ajax연결이 다끝날때까지 기다려주지 않으니까ㅠ,ㅠ...

 

조금 느린 브라우저를 만나 Ajax연결이 오래걸리면?

DB에 연결이 되기도 전에 링크 이동이 이루어지면서 연결이 문제가 생기는 것이고

연결조차 실패했기 때문에 처음보는 status code로 0을 만나게 되는 것이다!!

 

function CountCheck(datanum){
    $.ajax({
		url:'...',
		type: 'POST',
		data: {
			category : datanum
		},
		statusCode: {
			...
		},
		error: function (err) {
		//400과 404를 제외한 에러가 발생했을시
			if(err.status !== 400 && err.status !== 404){
				alert(`네트워크 오류로 서버와의 통신이 실패하였습니다.${err.status}`);
			}
		},    
		cache: false
	});
}

위와 같은식으로 error status를 찍어보면 에러코드를 확인할 수 있다!!

 

해결방법

그래서 해결법으로 선택한 방법은

Ajax 200코드 안에 코드를 넣어서

안전하게 Ajax통신이 성공적으로 이루어지면 링크이동이 이루어지도록 하는 것이다!

 

urlBtn.addEventListener('click', urlMove);
urlBtn2.addEventListener('click', urlMove2);
function urlMove(){
	CountCheck('버튼클릭', true, 'url1');	//Ajax통신
}
function urlMove2(){
	CountCheck('버튼클릭', true, 'url2');	//Ajax통신
}

먼저 Ajax통신하는 함수 쪽에 2번째, 3번째 인자도 함께 전달해준다.

두번째 인자는 true로 존재하는 경우에만 링크연결이 이루어지도록 하는 곳에 쓰일것이고,

세번째 인자는 url을 총 두 곳에 연결해야하기때문에 두 경우를 구분해주기 위해 사용할 것이다.

 

function CountCheck(datanum, linkCheck, url){
	$.ajax({
		url:'urlurlurl',
		type: 'POST',
		data: {
			category : datanum
		},
		statusCode: {
			200: function(args) {
				if(linkCheck){
					if(url === 'url1'){
						location.href='!!링크!!';
					}
					if(url === 'url2'){
						location.href='!!링크!!';
					}
				}
			},
			400: function(err){
				errorMessege(err);
			},
			404: function(err){
				errorMessege(err);
			},
		},
		error: function (err) {
		//400과 404를 제외한 에러가 발생했을시
			if(err.status !== 400 && err.status !== 404){
				alert("네트워크 오류로 서버와의 통신이 실패하였습니다.");
			}
		},    
		cache: false
	});
}

이런식으로 Ajax연결이 끝나고 200안으로 들어왔을 때

linkCheck의 경우가 true인 경우에만! 링크연결을 해주면 된다

 

***********주의************

Safari등 일부 브라우저의 경우 Ajax를 이용해 새 창을 띄운다던지, 간접적으로 함수를 호출하여

window.open을 이용하면 작동을 안한다!!

그래서 Ajax를 이용해서 새 창을 띄우려면 location.href를 사용할것을 추천합니당:)