jQuery ajax 요청을 대량으로 올바른 방법

StackOverflow https://stackoverflow.com/questions/1653127

  •  22-07-2019
  •  | 
  •  

문제

사용자가 선택한 행 목록이 있으며 하나씩 삭제하고 결국 결과를 표시하고 싶습니다.

분명히 Ajax 기능을 할 때마다 간단한 루프를하고 전화를 걸면 어떻게 반복하고 어떤 성공을 거두었으며 어느 것이 실패했는지, 언제 끝났는지 확인할 수 있습니까?

어떻게 하시겠습니까? 대량 편집/삭제를 수행하는 올바른 방법은 무엇입니까?

도움이 되었습니까?

해결책

각 AJAX 요청에는 이와 관련된 오버 헤드가 있습니다. 요청으로 서버에 과부하가 걸릴 수 있기 때문에 각 행을 호출하는 것은 나쁜 생각입니다. 직접 충분한 트래픽을받는 경우. 또한 모든 브라우저는 한 번에 몇 개의 HTTP 요청을 한 번에 제한 할 수있는 제한이 있으므로 (브라우저에 따라), 삭제는 버스트에서 발생하지 않습니다.

가장 좋은 옵션은 행을 그룹화하여 JSON 배열을 편집/삭제하고 단일 요청으로 서버로 보내는 것입니다. 서버에서 JSON을 구문 분석하고 그에 따라 항목을 삭제할 수 있습니다. 완료되면 결과가 포함 된 JSON 배열을 반환하십시오.

이 jQuery 의사 코드 코드는 네이티브와 브라우저를 대상으로한다고 가정합니다. JSON 객체, 또는 사용 중입니다 JSON2.JS. 기본적 으로이 코드는 사용자에게 표시하는 테이블의 각 행에서 "숨겨진 ID"필드를 찾아 배열에 추가합니다. 필요하다고 느끼면 조정할 수 있습니다.

var recordsToDelete = [];
$("tr.myRow").each(function() {
    var id = $(this).find("input:hidden").val();
    recordsToDelete.push(id);
});
var json = JSON.stringify(recordsToDelete);

결과를 다루는 것이 더 어려울 수 있습니다. (성공한 경우) 모든 행이 삭제되도록 시스템을 설계해야합니다. 매우 복잡한 시스템을 다루지 않는 한 일부 행이 지나가고 일부 행이 실패하는 상황이 없어야합니다. 이런 경우 시스템 아키텍처를 다시 고려해야합니다. jQuery가 있습니다 이벤트 success 그리고 failure 요청의 일반적인 성공 또는 실패를 처리하는 데 사용할 수 있습니다.

위의 코드에서 계속해서 이것은 레코드 삭제를 처리하는 한 가지 방법입니다. 나는 그것을 사용한다 complete Simplicity를 위해 여기에서 이벤트를 사용하지만 사용해야합니다. success 그리고 failure 가능하면 이벤트. 그만큼 complete 요청이 성공하거나 실패하든 이벤트는 항상 발생합니다.

$.ajax({
    url: "http://stackoverflow.com/questions/1653127",        
    type: "POST", // Always use POST when deleting data
    data: { ids: json },
    complete: function(xhr, status) {
        var response = JSON.parse(xhr.responseXML);
        // Response will be an array of key/value
        // pairs indicating which rows succeeded or failed
        for (var i = 0; i < response.length; i++) {
            var recordID = response[i].recordID;
            var status = response[i].status;
            // Do stuff with the status codes here
        }
    }
});

의견에 대한 응답으로 :

  • Gmail과 같은 앱의 경우, 작동 방식은 매우 복잡하여 "Google이 이런 식으로 수행하기 때문에 이런 식으로 할 것"이라고 말하는 것은 좋은 생각이 아닙니다. Google에서 작동하는 모든 것이 모든 회사 나 웹 사이트에서 작동하지는 않습니다. Google과 같은 회사는 거의 다른 웹 사이트에 대해 걱정할 필요가 없다는 점을 다루는 데 문제가 있습니다. 그러나 귀하의 질문에 답변합니다
    • 방금 확인했는지 확인했습니다. Gmail은 ID 배열과 함께 하나의 AJAX 요청을 사용합니다. 개별 상태 코드는 다시 전송되지 않습니다. Gmail은 방금 수행 한 작업에 대한 "Action ID"를 반환하는 것처럼 보이므로 이메일을 삭제 한 후 간단히 나타나는 실행 취소 링크를 클릭하여 해당 작업을 취소 할 수 있습니다.
    • 앱에서 작업 할 때는 일반적으로 작업이 실패하지 않을 정도로 신뢰할 수 있도록합니다. 이를 확인하기 위해 엄격한 QA를 수행해야합니다. 기본적으로 삭제 작업은 전체적으로 전달되거나 실패해야합니다. 이런 일이 발생할 수있는 시나리오는 서버가 다운 될 때 사용자가 삭제하는 경우입니다. 사용자에게는 페이지를 다시로드하지 않기 때문에 사이트가 여전히 올라가지 만 AJAX 요청은 어디로 가야하는지가 없기 때문에 실패합니다. 당신은 이런 것들을 다루고 싶을 것입니다.
    • 실제로 앱의 비즈니스 규칙에 따라 다릅니다. 여러 사람이 동시에 레코드를 변경할 수있는 상황 (예제)에서 응용 프로그램을 사용하는 경우, 한 사용자가 삭제하려는 한 사람이 "삭제"버튼을 클릭하기 직전에 다른 사람이 삭제할 수있었습니다. 대부분의 경우, 삭제 된 경우 레코드를 먼저 삭제 한 사람들을 돌보는 사람들을 볼 수 없습니다. 그러나 비즈니스 규칙은이 정보를 사용자에게보고해야한다고 지시 할 수 있습니다. 이 경우 모든 삭제에 대한 배열을 반환해야합니다.
  • 해커가 다른 사람들의 기록을 삭제하지 못하도록하기 위해서는 몇 가지해야 할 일이 있습니다.
    • Ajax 핸들러를 다른 사이트와 다르게 취급하십시오. 그들은 특별한 특권을 얻지 않아야합니다. Ajax 핸들러에 대한 요청은 다른 모든 것과 마찬가지로 인증해야합니다.
    • 파괴적인 운영 또는 데이터를 변경하는 작업에 게시물 요청 (내 예에서 언급)을 사용하십시오. 이로 인해 해커가 수행하기가 더 어려워집니다 크로스 사이트 요청 위조 (CSRF). 분명히 이것은 어리석은 일이 아니지만 쉬운 악용을 멈추게됩니다.
    • 분명히, 사용자가 삭제 요청을 보냈기 때문에 사용자가 레코드를 삭제할 권리가 있다고 가정하지 마십시오. 삭제를 수행하는 사용자가 각 레코드를 제거 할 권리가 있는지 확인하십시오. 이를 수행하는 방법은 서버 측 응용 프로그램에 따라 다릅니다.
    • 전송 된 모든 값을 인코딩해야합니다 ~에서 클라이언트 서버에. 이렇게하면 SQL 주입을 방지 할 수 있습니다.
    • 당신이 친숙한 지 확인하십시오 OWASP TOP TEN 목록. 그것은 가장 일반적인 것을 다룹니다 (그러나 아닙니다 모두) 주요 악용은 웹 사이트를 이용하여 웹 사이트의 피해자가되는 것을 막는 방법을 설명합니다.
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top