jQuery의 Ajax 오류 디버깅 분석

JQuery는 Ajax를 매우 잘 캡슐화합니다. 하지만 일상적인 개발에서는 여전히 가끔 Ajax 오류가 발생합니다. Ajax 오류 보고서에 대한 간략한 분석은 다음과 같습니다

Ajax는 "Tom and Jerry" 데이터를 post를 통해 xxx.php 파일에 제출합니다. 성공하면 반환된 데이터가 인쇄되고, 실패하면 오류 이유가 인쇄됩니다.

$.ajax({
 url:"xxx.php",
 type:"post",
 datatype:"json",
 data:{"cat":"tom","mouse":"jack"},
 success:function(data){
 console.log(data);
 },
 error:function(jqXHR,textStatus,errorThrown){<br> console.log(jqXHR.);<br> console.log(textStatus);<br> console.log(errorThrown);<br> }
});

jQuery 공식 문서에 따르면 ajax의 오류에는 jqXHR, textStatus 및 errorThrown이라는 세 가지 매개변수가 있습니다.

jqXHR에는 네 가지 속성도 있습니다.

1.readyState: 현재 상태, 0 - 초기화되지 않음, 1 - 로드 중, 2 - 이미 로드됨, 3 - 데이터 상호 작용, 4 - 완료.

2.status: 일반적인 404, 500 및 기타 오류 코드와 같은 HTTP 상태 코드를 반환했습니다.

3.statusText: 404 오류 메시지를 찾을 수 없음, 500은 내부 서버 오류 등 상태 코드에 해당하는 오류 메시지입니다.

4.responseText: 서버 응답에서 반환되는 텍스트 정보

textStatus와 errorThrown은 모두 문자열 유형으로 각각 반환된 상태 및 서버 오류 정보입니다.

일반적인 상황에서 ajax는 오류 함수로 들어가 textStatus 및 jqXHR.readyState를 인쇄합니다. ajax가 오류를 보고하는 이유는 아마 아실 것입니다. 여전히 불분명하다면 모든 매개변수를 인쇄해 보세요.

Ajax 오류가 발생할 때 발생하는 상황을 요약했으며, 앞으로 새로운 특수 상황이 발생하면 더 추가할 예정입니다.

사례 1

문제: 프런트엔드는 jQuery 프레임워크를 사용하고, 백엔드인 php+mysql과 상호작용하기 위해 ajax를 사용합니다. ajax에서 오류를 보고한 것으로 나타났습니다(ajax는 post 유형, json 형식을 사용하고 요청 데이터는 Json 객체임). 인쇄된 textStatus는 구문 분석 오류를 의미하는 "parsererror"입니다.

처리 중: 이 인쇄는 ajax가 백엔드(서버 측)와 성공적으로 상호 작용했으며 백엔드가 응답하고 텍스트 정보를 반환했음을 보여줍니다. 하지만 프런트 엔드에서 텍스트를 구문 분석하는 중에 오류가 발생했습니다. 이때 먼저 백엔드 응답의 텍스트 정보를 확인해야 합니다. 두 가지 방법이 있는데, 하나는 jqXHR.responseText를 인쇄하는 것이고, 두 번째는 Google Chrome의 F12 키를 눌러 NetWork에서 보는 것입니다(다른 브라우저도 사용 가능). 이때 보이는 정보는 5{"status": "success"} 입니다. 이 텍스트에 json 개체의 데이터가 포함되어 있음을 확인하는 것은 어렵지 않지만 완전한 json 데이터는 아닙니다. 오류가 발견되면 직접 php 파일로 이동하여 해당 정보를 수정하고 중복 인쇄를 제거하세요. 문제를 해결하세요. 또한, 정규화되지 않은 json 객체 데이터로 인해 이 문제가 발생할 수도 있습니다. 예를 들어, {'status':'success'} 데이터에는 작은따옴표가 포함되어 있습니다.

사례 2

문제: 프런트엔드는 jQuery 프레임워크를 사용하고, ajax를 사용하여 백엔드와 상호작용한 다음 백엔드에서 데이터베이스를 작동하게 하고 백엔드는 nodejs입니다. ajax가 응답하지 않고, 성공 콜백 함수도 없고, 오류 콜백 함수도 없는 것으로 확인되었습니다.

처리: 먼저 기능이 구현되었는지 확인하고 백엔드가 실제로 처리를 수행했으며 데이터베이스가 관련 수정 작업을 완료했는지 확인합니다. 문제는 매우 명확합니다. 처리 후 백엔드가 프런트엔드에 응답하지 않았습니다. 이는 백엔드 처리가 완료된 후 해당 응답 코드를 추가하면 해결될 수 있다. 실제로 백엔드에서 ajax 오류 상태 코드가 전송되는 것을 볼 수 있다.

위 내용은 개인 개발 중 발생한 문제와 해결 방법을 요약한 것입니다. 잘못된 점이 있으면 바로잡아주세요.