it-source

JQuery는 다른 자바스크립트에서 AJAX 호출을 들을 수 있습니까?

criticalcode 2023. 10. 28. 08:00
반응형

JQuery는 다른 자바스크립트에서 AJAX 호출을 들을 수 있습니까?

무언가가 바뀌었을 때(예: 제품이 제거됨) 서버에서 업데이트된 템플릿 복사본을 가져올 수 있도록 AJAX를 사용하는 기능을 쇼핑 카트에 구축해야 합니다.서버 사이드 코드나 장바구니를 작동시키는 자바스크립트는 애초에 수정할 수 없습니다.(이상적인 건 아니지만, 그런 식입니다.)

제가 하고 싶은 일은 카트가 업데이트 될 때마다 저만의 자바스크립트를 실행하는 것입니다.는 AJAX 호출을 듣고, 코드가 나올 때마다 제 코드를 실행하는 것이 가능한지 알고 싶습니다.

HTML 문서에서 모든 AJAX 호출을 따르려면 다음을 덮어쓸 수 있습니다.XMLHttpRequest원형의이 방법을 사용하면 다음 방법에 대한 작업을 볼 수 있습니다.XMLHttpRequest물건들.

작은 샘플 코드는 다음과 같습니다.

var open = window.XMLHttpRequest.prototype.open,
    send = window.XMLHttpRequest.prototype.send,
    onReadyStateChange;

function openReplacement(method, url, async, user, password) {
    var syncMode = async !== false ? 'async' : 'sync';
    console.warn(
        'Preparing ' +
        syncMode +
        ' HTTP request : ' +
        method +
        ' ' +
        url
    );
    return open.apply(this, arguments);
}

function sendReplacement(data) {
    console.warn('Sending HTTP request data : ', data);

    if(this.onreadystatechange) {
        this._onreadystatechange = this.onreadystatechange;
    }
    this.onreadystatechange = onReadyStateChangeReplacement;

    return send.apply(this, arguments);
}

function onReadyStateChangeReplacement() {
    console.warn('HTTP request ready state changed : ' + this.readyState);
    if(this._onreadystatechange) {
        return this._onreadystatechange.apply(this, arguments);
    }
}

window.XMLHttpRequest.prototype.open = openReplacement;
window.XMLHttpRequest.prototype.send = sendReplacement;

이 샘플을 사용하면 모든 AJAX 호출에 대해 자바스크립트 콘솔에 경고가 표시됩니다.

jQuery 스크립트는 아니지만 jQuery 안에서 원하는 대로 사용할 수 있습니다.

이 솔루션은 IE 6 이상에서는 작동하지 않지만 FF, IE7+, Chrome, Opera, Safari 등에서는 작동합니다.

저는 이 해결책을 원합니다.

$(document).ajaxComplete(function(event,request, settings){
    // Your code here
});

내 친구 Jquery를 사용하면 매우 쉽게 이 작업을 수행할 수 있습니다(Jquery를 사용하고 있다고 말씀하셨듯이).

(사용하지 않으시는 분들은 ajax 함수로 Jquery library code에서 운전하시면 네이티브 코드를 보실 수 있습니다 :)

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

jquery 공식 api 문서에서 가져온 코드 스니펫입니다(Global Events 섹션 참조).

https://api.jquery.com/Ajax_Events/

들을 수는 없지만 주기적인 업데이터 플러그인을 사용할 수 있습니다.아래를 보세요.

http://plugins.jquery.com/plugin-tags/periodic-updater

이는 XHR 프로토타입에 콜백을 추가하는 것과 동일한 접근 방식을 취하지만 프로토타입에 새로운 속성을 설정하거나 자체 이벤트 체인 메커니즘을 작성하지는 않습니다.저는 이것이 갈등을 일으킬 가능성이 적다고 생각합니다.

(function() {
  // Reference to the original prototype method we're overriding
  var originalOpen = XMLHttpRequest.prototype.open;

  // Override prototype.open to add a custom callback whenever a request is opened
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener('loadend', customCallback);

    // Execute the original prototype.open without affecting its execution context
    originalOpen.apply(this, arguments);
  };

  // All instances of XMLHttpRequest will execute this callback once on readyState 4
  var customCallback = function () {
    // In this context, `this` refers to the XHR instance that just completed
    console.log(this);

    // Remove the invoking listener to prevent duping on multiple calls to .open
    this.removeEventListener('loadend', customCallback);
  }
}());

IE <= 8(지원 없음)에서는 작동하지 않습니다..addEventListener())

언급URL : https://stackoverflow.com/questions/4406606/can-jquery-listen-to-ajax-calls-from-other-javascript

반응형