요청한 순서로 jquery ajax 요청을 처리하는 방법

Question

jquery ajax 요청을 통해 도메인 이름 목록을 검사하고 각 이름을 검사하는 java servlet 페이지를 만들고 있습니다. 결과가 순서에 따라 DOM에 추가되는 경우를 제외하고는 제대로 작동합니다. 요청 된 순서로 요청을 처리하는 가장 좋은 방법은 무엇입니까? 또한 긴 폴링 효과와 같이 비동기 적으로 수행하는 것이 가장 좋습니다. 나는 자바 스크립트로 새로운 사람이다.

이

내가 요청을 사용하고있는 코드입니다 :

$.ajax({ 
    async:true, 
    type:'GET', 
    url:servlet, 
    success:function(data){ 
     $('p').append(data+"<br>"); 
    }, 
}); 

내가 JSON을 통해 그것을 반환 자바 서블릿 시퀀스 번호를 보낼 생각했지만 간단한 방법이 있다면 궁금 해서요 .

Answer 1

내가 할 수있는 것은 미리 응답을위한 컨테이너를 만든 다음 콜백을 바인드하는 것입니다. bind() 함수 에서처럼 실제로 바인딩하지 않습니다.

function makeRequest(something) { 
    var target = $("<div></div>"); 
    $("#container").append(target); 
    $.get("", {something: something}, function(data) { 
     target.html(data); 
    }); 
} 

그것은 유연성의 측면에서 오히려 나쁜 예,하지만이 점을 설명한다 : 당신이 <div id="container"></div> 같은 컨테이너 뭔가를 가정 예를 들어

는 다음을 수행 할 수 있습니다. 요청이 이루어지기 전에 컨테이너에 div를 추가 한 다음 해당 div를 사용하여 응답을 푸시합니다. 즉 요청이 이루어진 순서대로 div가 추가됩니다. 이 아이디어를 확장하여 스타일을 사용하여 div가 채워질 때까지 보이지 않게하거나 "Loading"메시지를 표시 할 수 있습니다.

은 (또한, 데이터 전달은 something 매개 변수 오히려 나쁘다, 그러나 희망 당신은 점을 얻는다.) 나는이 문제를 추측하고있어

Answer 2

를 브라우저가 서버에 가능한 한 많은 AJAX 요청을 보내는 것입니다 , 서버는 가능한 한 응답합니다. 서버가 다른 서버보다 빠른 속도로 응답하고 있으므로 요청이 순서대로 전송되었지만 서버가 고장난 것일 수 있습니다.

이 문제를 해결하려면 답변을 순차적으로 보내려면 순차적으로 쿼리를 보내야합니다. 본질적으로 AJAX 호출을 수행하고 호출이 성공하면 두 번째 AJAX 호출 등을 시작합니다.

Answer 3

서버에 전송 된 요청을 순서대로 나열하고 결과를 캐싱 한 다음 순서대로 추가 할 수 있습니다

next_to_request = 0; 
next_to_append = 0; 
results = []; 
function reqToServer(){ 
    var e = next_to_request++; 

    $.ajax({ 
    async:true, 
    type:'GET', 
    url:servlet, 
    success:function(data){ 
     results[e] = data; 
    }, 
    }); 
function loadAnswers(){ 
    if (results[next_to_request]){ 
    data = results[next_to_request]; 
    next_to_request++; 
    $('p').append(data+"<br>"); 
    } 
} 

setTimeout(100, loadAnswers); 

결과를 표시하는 스레드가 다르며 올바른 순서로만 표시됩니다.

Answer 4

Ajax 함수 자체에서 성공 함수를 가져 와서 성공 함수를 연결하면 순서대로 실행되고 하나의 요청이 완료되지 않은 경우 다음 함수를 완료하기 전에 완료 될 때까지 기다립니다. 그냥과 같이 할 것이다 일을

정말 간단한 방법 : 고급 방법에 대한

var firstOne = $.ajax({ 
    async:true, 
    type:'GET', 
    url:servlet 
}); 

var SecondOne = $.ajax({ 
    async:true, 
    type:'GET', 
    url:servlet 
}); 

firstOne.done(function(data){ 
    $('p').append(data+"<br>"); 
    SecondOne.done(function(data){ 
     $('p').append(data+"<br>"); 
    }); 
}); 

이 promises 작업을하는 것이 좋습니다 방법을 학습!

이것은 Ajax 요청을 순차적으로 보내는 것보다 훨씬 빠르며, 다음 요청이 시작되기 전에 마지막 요청을 기다리는 것보다 빠릅니다. 브라우저가 사용 가능할 때 모두 보내고 done() 함수를 체인화하면 완료되지 않은 항목은 삽입 한 순서대로 도달하면 즉시 완료된 항목을 실행하면 내용이 올바른 순서로 추가됩니다. 많은 Ajax 호출을 할 때, 약속과 $ .when/$를 사용하면 반복을 통해 더 합리적인 함수를 만들 수 있습니다.