[ajax] Error code 0, message undefined

[ajax] Error code 0, error undefined

작성일자 : 2018년 11월 18일

1. 현상

HTML form 내에서 ajax를 사용하는 Javascript 함수 호출 시 간헐적 에러 발생

예시

HTML

<form onsubmit='JavaScript:example(data)>  // submit 시 example 함수 실행 --------------------(2) <!-- Logic --> <button type="submit" value="submit"></button> //button Click 시 form에 submit 전달 --------------------(1)  </form>

Javascript

function example(data){         // 아래 오류 발생 ajax 수행 ---------------(3) $.ajax({ method : "GET", url : "url", data : {data: data}, success: function(){ //Logic },                 // 에러 발생 후 아래 함수 실행 -----------(4) error: function(request, status, error){  alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);                           // 실행 결과 code 0, undefined Error 발생 문구 alert --------------- (5) } }); }

alert 내용

code : 0 message :        error : undefined

2. 원인

 AJAX 응답을 받기 전에 브라우저 새로 고침이 트리거 된 경우 발생

즉 Submit에 의해 form의 (action 미 설정 시 현재위치 새로고침) action과, ajax 호출 함수인 example이 트리거 되고,

example 함수에 의한 ajax 수행 중 ajax 결과를 받기 전에 action에 의해 새로고침이 트리거 될 때 발생

응답 속도에 따라 동일한 Flow가 success가 될 수도, Fail이 될 수도 있는 상황

3. 해결방안

form에 의한 action을 없애고, ajxa 결과 반환 후 action을 수행하도록 설정

수정 후 예시

HTML

<form onsubmit='JavaScript:example(data, event)>  // event 인자 추가 // submit 시 example 함수 실행 --------------------(2) <!-- Logic --> <button type="submit" value="submit"></button> //button Click 시 form에 submit 전달 --------------------(1)  </form>

Javascript

function example(data, event){         event.preventDefault(); // event 중단 함수         // 아래 오류 발생 ajax 수행 ---------------(3) $.ajax({ method : "GET", url : "url", data : {data: data}, success: function(){ // Logic                         // Ajax 응답 후 수행 할 Action 추가 },                 // 에러 발생 후 아래 함수 실행 -----------(4) error: function(request, status, error){  alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);                           // 실행 결과 code 0, undefined Error 발생 문구 alert --------------- (5) } }); }

4. 참고

https://stackoverflow.com/questions/2000609/jquery-ajax-status-code-0