동시에 여러 개의 Ajax 호출

동시에 여러 개의 Ajax 호출

저는 몇 개의 웹사이트를 개발했고 항상 같은 점을 발견합니다. 여러 개의 아약스 콜입니다.나는 모든 콘텐츠가 비동기적으로 로딩되는 메인 페이지가 있습니다.페이지가 로드되면, 페이지를 영역별(위, 왼쪽, 오른쪽 및 아래)로 "그리는" 인디펜던트 호출이 4개가 있으며, 로드되는 동안 일반적인 아약스 스핀을 사용자에게 보여줍니다.그래서 브라우저에서 요청을 받으면 콜백을 실행하고 다른 영역은 다른 시간에 그립니다.서버에 대한 답변이 가끔 엇갈리는 경우가 있는데, 즉, 상단의 답변이 왼쪽 또는 그 반대로 그려져 있다는 것입니다.

각 요청에 타임스탬프를 생성하여 브라우저와 서버에 각 요청이 서로 다름을 표시하는 등의 몇 가지 솔루션을 시도했습니다.

또한 만일의 경우를 대비하여 서버에 캐시의 파라미터를 설정해 보았습니다.

작동하는 유일한 방법은 요청 2를 하나의 콜백에 포함하는 것 등입니다.

올바른 방법을 알고 있거나 이 문제를 극복한 적이 있는 사람?저는 연쇄적인 요청을 하고 싶지 않습니다.

감사해요.

다음은 제가 의미하는 바를 보여주는 예입니다.

$(document).ready(function() {

$.get('/activity',Common.genSafeId(),function(data){$('#stream').html(data);$("#load_activity").addClass("empty");});
$.get('/messages',Common.genSafeId(),function(data){$('#message').html(data);$("#load_messages").addClass("empty");});
$.get('/deals',Common.genSafeId(),function(data){$('#new_deals_container').html(data);$("#load_deal").addClass("empty");});
$.get('/tasks',Common.genSafeId(),function(data){$('#task_frames').html(data);$("#load_task").addClass("empty");});});

그리고 html은 4개의 컨테이너가 있고 각각 다른 id를 가진 단순한 jsp입니다.

폐쇄

폐쇄는 처음에는 좀 충격적입니다.자바스크립트와 다른 여러 현대 컴퓨팅 언어의 특징입니다.

폐쇄는 하나 이상의 외부 변수(즉, 외부 함수 내에 있지만 내부 함수 외부에 있는 변수)에 대한 액세스가 필요한 내부 함수(일반적으로 익명 이벤트 핸들러 또는 명명된 메서드)를 갖는 함수의 실행 인스턴스에 의해 형성됩니다.놀라운 점은 내부 기능이 실행되는 시점에 외부 기능이 완료되고 복귀하더라도 내부 기능은 외부 변수에 대한 접근을 유지한다는 것입니다!

더욱이 폐쇄로 인해 갇힌 변수는 내부 기능에만 접근할 수 있고 폐쇄를 가져온 외부 환경에는 접근할 수 없습니다.예를 들어, 이 기능을 사용하면 "Public"과 "Private"라는 언어 키워드가 없을 때에도 퍼블릭 멤버뿐만 아니라 프라이빗 멤버와 함께 클래스와 같은 구조를 만들 수 있습니다.

폐쇄는 자바스크립트의 "쓰레기 수집"을 억제하는 외부 변수를 내부 함수가 사용함으로써 가능하며, 그렇지 않으면 완료 후 특정 시점에 외부 함수의 환경을 파괴할 수 있습니다.

좋은, 깔끔한 자바스크립트 프로그래밍에 대한 폐쇄의 중요성은 아무리 강조해도 지나치지 않습니다.

에서 getData()합니다를 id1그리고.id2(그리고url익명의 ajax 응답 처리기($.get의 세 번째 인수)에서 계속 사용할 수 있습니다.

$(document).ready(function() {

    function getData(url, id1, id2) {
        $.get(url, Common.genSafeId(), function(data) {
            $(id1).html(data);
            $(id2).addClass("empty");
        });
    }

    getData('/activity', '#stream', '#load_activity');
    getData('/messages', '#message', '#load_messages');
    getData('/deals', '#new_deals_container', '#load_deal');
    getData('/tasks', '#task_frames', '#load_task');

});

따라서 4개의 핸들러를 별도로 작성하는 것이 아니라 폐쇄를 형성하고 동일한 기능을 호출하는 언어의 능력을 이용합니다.getData() 번,, getData()는 $.get의 응답 핸들러(서버가 응답할 때 비동기적으로 호출됨)가 DOM 요소를 처리할 수 있도록 하는 새로운 폐쇄를 형성합니다.

각 ajax 호출마다 다른 콜백이 있는지 확인하십시오. 네 개 모두에 대해 동일한 함수를 사용하려고 하는 것처럼 들리기 때문에, 호출된 함수가 순서를 벗어나면(서버 측에서 다른 시간이 소요되므로) 잘못된 위치에서 렌더링됩니다.모든 콜백에 동일한 기능을 사용해야 하는 경우, 콜백이 어디로 렌더링할지 알 수 있도록 페이로드에 무언가를 넣어야 합니다.

언급URL : https://stackoverflow.com/questions/10150159/multiple-ajax-calls-at-same-time