2012-04-09 1 views
3

짧은 버전 : Safynch XHR 요청 또는 Safari에서 Xynch Xynch Synch를 수행하는 방법을 기다리는 방법을 찾고 있습니다.Javascript 동기 XMLHttpRequest (Safari의 시간 초과)에 대한 대안

더 긴 버전 : 나는 다양한 외부 데이터 소스를 함께 사용하는 웹 서비스에서 작업하고 있습니다. PHP 코드를 AJAX/XHR로 호출하는 Javacript 프론트 엔드를 사용하고 있습니다. 클라이언트가 내 서버 (서버가 외부 데이터 요청을하는 경우)에서 데이터를 요청하기 때문에 사이트 간 문제는 없습니다.

화면에 표시되기 전에 데이터에 대해 수행 할 사후로드 처리 (정렬, 필터링 등)가 있으므로 동기 XHR 요청을 사용하고 있습니다.

IE, FF 및 Opera에서 모두 잘 작동하지만 Safari에 문제가있는 것 같습니다 (Chrome을 아직 사용해 보지 않았습니다).

내 Windows 컴퓨터에서 Safari 용 방화 광을 사용하여 beng을 호출하는 서버를 볼 수 있으며 10 초 이상 경과하면 실패합니다. 내 iPad에서는 메시지가 약간 더 beter있다 : NETWORK_ERR : XMLHttpRequest 예외 101 : 네트워크 오류가 동기 모드에서 발생했습니다.

약간의 연구 결과에 따르면 Safari는 동기화 모드에서 10 초 후에 시간 초과됩니다. 시간 초과 기능을 사용하면이 기능을 확장 할 수 있습니다 (Safari의 최대 제한은 60 초입니다). 불행히도 나는 이것을 작동시킬 수 없다.

저는 이제 클라이언트 자바 스크립트 코드의 변경을 통해이 문제를 해결하는 가장 좋은 방법으로 사람들이 제안 할 것이 무엇인지 궁금합니다.

내가 생각하는 두 가지 옵션은 (i) 사파리 브라우저가 존중할 동기화 XHR 타임 아웃의 작동 예제를 찾는 것입니다. (ii) 비동기식 XHR 호출 주위에 일종의 랩퍼를 가지고있어서 사후로드 프로세싱이 먼저로드를 대기합니다.

저는 경험이 풍부한 자바 스크립트 해커가 아니지만이 프로젝트에 상당한 금액을 설정했습니다. 필자는 JQuery 나 다른 프레임 워크를 사용하지 않았으며 추가 구문을 배워야 할 필요가 없도록 원시 JS를 유지하려고합니다. [이전에 JQM과 Spry를 사용해 보았던 이전 글에서 볼 수 있겠지만,이 단계에서 적어도 두 가지 모두 잘못된 선택 인 것으로 판명되어 현재는 버려졌습니다].

나는 콜백이 올바른 wait-for-asych 옵션 일 수 있다고 느끼지만 어떻게 작동하는지 또는 코드 작성 방법을 모르겠습니다.

이것은이 단계에서의 프로토 타입 일 뿐이므로 더러운 해킹이 허용됩니다. 검증 된 기능이 있으면 나중에 카드 전체에 다시 쓰기가 완료됩니다.

사람들의 생각과 조언에 감사드립니다.

감사합니다. 피트.

+0

내가이 특정 문제에별로 도움이되지 않습니다 나는 "오래된 학교"AJAX 호출을 작성한 이후 영원히 계속되었습니다. 저는 jQuery를 다시 방문하게 될 것입니다 - 지금은 아니더라도 곧. 여러 브라우저에서 여러 번 테스트 한 몇 줄에서 복잡한 AJAX 호출을 만들 수 있습니다. jQuery 학습에 저항하곤했지만, 이제는 실수 였음을 알았습니다. 강력하고 안정적이며 사용하기 쉬운 AJAX 호출 만 배우는 것이 좋습니다. – CWSpear

+0

안녕하세요 @ 볼트 너. 나는 jQuery가 아마도 먼 미래에 합리적인 선택이 될 것이라고 생각한다. 그러나 만일 poss가 있다면 지금 당장은 원시 JS 해결 방법을 선호 할 것이다. 그것은 우선 순위의 문제이며, 가능한 한 원시 원형 프로토 타입을 최대한 활용하고 추가/대체물을 배울 시간을 피하려고합니다. –

답변

2

일반적으로 비보안이기 때문에 비동기 요청을 유지하려고합니다. 그리고 그 (것)들과 함께, 당신은 콜백을 사용하기를 원할 것입니다 - 또는 간단히 말해서 나중에 호출되도록 설정되는 기능.

당신은 onreadystatechange propertyXMLHttpRequest의와 콜백을 설정할 수 있습니다 : 속성 이름에서 알 수

xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4) { // DONE 
     if (xhr.status === 200) { // OK 
      handleSuccess(xhr); 
     } else { 
      handleError(xhr); 
     } 
    } 
}; 

으로,이 4의 값이 요청을 의미 readyState 변화의 값으로 호출 될 것이다가 완료 (성공 여부).

그러면 다른 함수 (예 : handleSuccess) 내에서 정렬, 필터링 등을 처리 할 수 ​​있습니다.

또한 기존의 도서관의 숫자의 사용 혜택을 누릴 수 있습니다 - 예를 들어, jQuery (이 코드 1.6 이상) : 그것은 이후

$.get('/web/service/request') 
    .done(function (result) { 
     // sorting, filtering, etc 
    }) 
    .fail(function (xhr) { 
     // error notification, etc. 
    }); 
+0

고마워요 @ 조나단 내가 이것을 읽 자마자 나는이 방법이 전에 사용 된 것을 깨달았습니다. 나는 그것을 줄 것이다. 감사. –

+0

빙고! 이것은 효과가 있었다. 다시 한번 감사드립니다. –

관련 문제