একটি পৃষ্ঠায় সমস্ত AJAX অনুরোধে একটি "হুক" যুক্ত করুন

Question

আমি জানতে চাই যে প্রতিটি একাএক্স অনুরোধের ("এটি যেমন পাঠানো হবে, বা ইভেন্টগুলিতে হবে) তে" হুক "করা সম্ভব এবং কোনও ক্রিয়া সম্পাদন করা সম্ভব। এই মুহুর্তে আমি ধরে নিচ্ছি যে পৃষ্ঠায় অন্যান্য তৃতীয় পক্ষের স্ক্রিপ্ট রয়েছে। এর মধ্যে কিছুতে jQuery ব্যবহার করা যেতে পারে, অন্যরা তা ব্যবহার করে না। এটা কি সম্ভব?

Comments

এটি jQuery দিয়ে সম্ভব, সুতরাং এটি সাধারণ পুরানো জাভাস্ক্রিপ্ট দ্বারা সম্ভব, তবে আপনার প্রতিটির জন্য কমপক্ষে 2 টি "হুক" থাকা দরকার। যাইহোক, কেন একই পৃষ্ঠায় উভয় ব্যবহার?

— ইয়োদা

এই গ্রন্থাগারটি ব্যবহার সম্পর্কে কীভাবে? github.com/slorber/ajax-interceptor

— সেবাস্তিয়ান লরবার

এই একটা চমৎকার সমাধান stackoverflow.com/questions/25335648/...

— phazei

দ্রষ্টব্য: এই প্রশ্নের উত্তরগুলিতে fetch()এখন আধুনিক ব্রাউজারগুলিতে নতুন এপিআই থেকে করা আজাক্স কলগুলি কভার করা যায় না ।

— jਫਰ00

@ নির্বাণ-MSU - সম্ভবত এই: github.com/werk85/fetch-intercept/blob/develop/src/index.js

— jfriend00

Answer 1

আভিভের উত্তরে অনুপ্রাণিত হয়ে আমি কিছুটা তদন্ত করেছিলাম এবং এটিই আমি সামনে এসেছি।
আমি নিশ্চিত নই যে স্ক্রিপ্টের মতামত অনুসারে এগুলি সমস্ত কার্যকর এবং অবশ্যই কেবল নেটিভ এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্ট ব্যবহার করে ব্রাউজারগুলির জন্য কাজ করবে ।
আমি মনে করি জাভাস্ক্রিপ্ট লাইব্রেরিগুলি যদি ব্যবহার করা হয় তবে এটি কাজ করবে কারণ তারা যদি সম্ভব হয় দেশীয় অবজেক্টটি ব্যবহার করবে।

function addXMLRequestCallback(callback){
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function(){
            // process the callback queue
            // the xhr instance is passed into each callback but seems pretty useless
            // you can't tell what its destination is or call abort() without an error
            // so only really good for logging that a request has happened
            // I could be wrong, I hope so...
            // EDIT: I suppose you could override the onreadystatechange handler though
            for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                XMLHttpRequest.callbacks[i]( this );
            }
            // call the native send()
            oldSend.apply(this, arguments);
        }
    }
}

// e.g.
addXMLRequestCallback( function( xhr ) {
    console.log( xhr.responseText ); // (an empty string)
});
addXMLRequestCallback( function( xhr ) {
    console.dir( xhr ); // have a look if there is anything useful here
});

Comments

অনুরোধ পোস্ট হুক সমর্থন করার জন্য এই প্রতিক্রিয়াটি বাড়িয়ে দেওয়া ভাল

— সেবাস্তিয়ান লরবার

আপনার বাস্তবায়নের ভিত্তিতে, আমি এনপিএম-তে এমন কিছু প্রকাশ করেছি যা অনুরোধ এবং প্রতিক্রিয়া উভয়ের সাথেই কাজ করে! github.com/slorber/ajax-interceptor

— সেবাস্তিয়ান লরবার

কনসোল.লগ (xhr.responseText) একটি খালি স্ট্রিং কারণ এই মুহুর্তে xhr ফাঁকা। আপনি যদি গ্লোবাল ভেরিয়েবলে এক্সএইচআর ভেরিয়েবলটি পাস করেন এবং কয়েক সেকেন্ড বিলম্ব নির্ধারণ করেন, আপনি সরাসরি সম্পত্তিগুলিতে অ্যাক্সেস করতে সক্ষম হবেন

— টুলকিট

চমৎকার উত্তর. আপনি যদি প্রতিক্রিয়া ডেটা পেতে চান, রাষ্ট্র পরিবর্তন হলে রেডিস্টেট এবং স্থিতি পরীক্ষা করুন। এক্সএইচআরড্রিডেস্টেটেঞ্জ = ফাংশন () {যদি (এক্সএইচআরডিয়ার স্টেট == 4 && xhr.status == 200) so কনসোল.লগ (জেএসওএন.পারস (xhr.responseText)); }}

— স্ট্যানলে ওয়াং

@ চেং আমরা যদি এক্সএইচআর-এর আপডেটস্টেটেঞ্জিং যোগ করি তবে এটি কি আসল প্রস্তুত রাষ্ট্র পরিবর্তন পদ্ধতিটিকে আরও ভালভাবে xhrObj.addEventListener ("লোড", এফএন) ব্যবহার করতে পারে

— মোহাম্মদ হুসেন

Answer 2

দ্রষ্টব্য: গৃহীত উত্তরটি প্রকৃত প্রতিক্রিয়া দেয় না কারণ এটি খুব তাড়াতাড়ি কল হচ্ছে।

আপনি এটি করতে পারেন যা বিশ্বব্যাপী যে কোনও এজেএক্সকে সাধারণভাবে বিরত করবে এবং কোনও তৃতীয় পক্ষের এজেএক্স লাইব্রেরি দ্বারা নির্ধারিত কোনও কলব্যাক ইত্যাদি স্ক্রু না করবে ।

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();

এখানে অ্যাডভেন্টলিস্টনার এপিআই দিয়ে আপনি কী করতে পারেন তার আরও কয়েকটি ডক্স:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

(দ্রষ্টব্য এটি কাজ করে না <= IE8)

Comments

ধন্যবাদ! Thats পুরোপুরি কাজ করে। আমি কেবলমাত্র কিছুটা সংশোধন করছি: অনুরোধটি ঠিক থাকলে this.statusএই ক্ষেত্রে সার্ভারের স্থিতি ফিরিয়ে দিন 200, 404 উপাদানটি খুঁজে পাওয়া যায় নি, 500, ইত্যাদি ইত্যাদি কোডগুলি বুট করে, পুরোপুরি কাজ করে।

— মিঃমিন্স

এটি আপনার কাছে পুরানো বোধ হতে পারে তবে আপনি এটির জন্য সমস্ত ভালবাসার অধিকারী। আমি গভীরভাবে আটকে ছিলাম। একটি গুচ্ছ ধন্যবাদ।

— কার্লস আলকোলেয়া

কেবল কারণ আমি এর জন্য কিছুটা অনুসন্ধান করেছি। "load"ইভেন্টটি কেবল সাফল্যের জন্য ডাকা হয়। আপনি যদি ফলাফলটির বিষয়ে চিন্তা না করেন (কেবলমাত্র ক্যোয়ারীটি শেষ হয়েছিল) আপনি "loadend"ইভেন্টটি ব্যবহার করতে পারেন

— রোমাল্ড ব্রুনেট

এটি খুঁজে পেতে অনেক দিন সময় লেগেছিল। প্রতিভা এই টুকরা জন্য আপনাকে ধন্যবাদ।

— ডেভিড

আমি অনেক উত্তর চেষ্টা করেছি এবং ডাব্লুউইউবিউ ভিউয়ের সাথে এটি পুরোপুরি কাজ করে। আমার অ্যাজাক্স ইভেন্টগুলি ব্যবহার করতে সমস্যা হচ্ছিল যেহেতু আমি মূল্যায়ন জাভাস্ক্রিপ্ট কল করার আগে বা অ্যাড ইউজারস্ক্রিপ্ট ব্যবহার করার আগে jQuery লোড নাও হতে পারে। ধন্যবাদ!

— জ্যাক চেং

Answer 3

যেহেতু আপনি jQuery উল্লেখ, আমি jQuery অফার একটি জানি .ajaxSetup()পদ্ধতি যা সেট বিশ্বব্যাপী Ajax অপশন যে মত ঘটনা ট্রিগার অন্তর্ভুক্ত success, errorএবং beforeSend- যা তুমি কি যা খুঁজছিলেন তা মত শোনাচ্ছে হয়।

$.ajaxSetup({
    beforeSend: function() {
        //do stuff before request fires
    }
});

অবশ্যই আপনি যে কোনও পৃষ্ঠাতে এই সমাধানটি ব্যবহার করার চেষ্টা করছেন তাতে jQuery প্রাপ্যতা যাচাই করতে হবে।

Comments

পরামর্শের জন্য ধন্যবাদ, তবে এটি দুর্ভাগ্যক্রমে AJAX কলগুলিকে বিরত রাখে না যেগুলি AJAX ব্যবহার করে না।

— ইউলি

আজকের সংবাদে: এজ্যাক্সের সাহায্যে ইউনিকর্নদের হত্যা করা হয়েছে যা

— এজেএক্স

তিনি jquery AJAX অবজেক্ট বলতে চাইছেন না। তবে তারপরেও আপনি প্রতিবার একই জ্যাকারি উদাহরণটি ব্যবহার করতে এইচভি চাইবেন

— শিশির অরোরা

অত্যন্ত সহায়ক। যোগ করতে চেয়েছিলেন, অন্য ট্রিগার হ'ল স্ট্যাটাস কোড। স্ট্যাটাস কোডের মতো কিছুতে প্লাগ ইন করে: {403: ফাংশন () {ত্রুটি msg} আপনি একটি একা .জ্যাক্স অনুরোধ পুনরায় লিখে না রেখে সমস্ত অজ্যাক্স ফাংশনটিতে একটি বৈশ্বিক প্রমাণ / পারম / ভূমিকা চেক করতে পারেন।

— ওয়াটারক্যাম্যান

Answer 4

এটি করার একটি কৌশল আছে।

সমস্ত স্ক্রিপ্টগুলি চলার আগে আসল XHMHttpReuqest অবজেক্টটি নিন এবং এটিকে অন্য কোনও ভারে সংরক্ষণ করুন। তারপরে মূল এক্সএমএলএইচটিএইচটিপিআরকুয়েস্টকে ওভাররাইড করুন এবং আপনার নিজের অবজেক্টের মাধ্যমে সমস্ত কলকে এটি নির্দেশ করুন।

স্যুয়েডো কোড:

 var savd = XMLHttpRequest;
 XMLHttpRequest.prototype = function() {
         this.init = function() {
         }; // your code
         etc' etc'
 };

Comments

এই উত্তরটি একেবারেই সঠিক নয়, আপনি যদি কোনও সামগ্রীর প্রোটোটাইপটি পরিবর্তন করেন তবে সংরক্ষণিতও পরিবর্তন করা যাবে। এছাড়াও পুরো প্রোটোটাইপটি একটি ফাংশন দিয়ে প্রতিস্থাপন করা হচ্ছে যা সমস্ত অজ্যাক্স অনুরোধগুলি ভেঙে দেবে। যদিও এটি আমাকে উত্তর দেওয়ার জন্য অনুপ্রাণিত করেছিল।

— মিউউউ

Answer 5

আমি গিথুবে একটি ভাল গ্রন্থাগার পেয়েছি যা কাজটি ভাল করে তোলে, আপনাকে অন্য কোনও জেএস ফাইলের আগে এটি অন্তর্ভুক্ত করতে হবে

https://github.com/jpillora/xhook

এখানে এমন একটি উদাহরণ যা কোনও আগত প্রতিক্রিয়ায় একটি http শিরোনাম যুক্ত করে

xhook.after(function(request, response) {
  response.headers['Foo'] = 'Bar';
});

Comments

ভাল একটা! এমনকি ক্রসওয়াকের সর্বশেষ ক্রোম ওয়েব-ভিউ প্লাগইন দিয়েও কর্ডোভা অ্যাপ্লিকেশনটিতে কাজ করেনি!

— ইসলাম অ্যাট্রাশ

এটি আমার বিশেষ প্রয়োজনের জন্য নিখুঁতভাবে কাজ করেছে: ওয়ার্ডপ্রেসে ইভেন্ট ইভেন্ট অর্গানাইজার প্লাগইন থেকে ইভেন্টগুলি ফিল্টার করে

— আলফ্রেডো ইয়ং

সমস্ত অনুরোধের জন্য কাজ করা হচ্ছে না, কিছু আনতে এবং এক্সএইচআর ঠিক আছে, তবে উদাহরণস্বরূপ এটি গুগল রিপ্যাচচা থেকে এক্সএইচআর ধরে না

— সেরজিও কুইন্টেরো

@ সেরজিওকিউন্টারো: আমি ধরে নিলাম এটি আপনার গিটহাব ইস্যু: github.com/jpillora/xhook/issues/102 । আপনার মন্তব্যটি এখানে মুছে ফেলার কথা বিবেচনা করুন, কারণ এটি লাইব্রেরিতে কোনও সমস্যা ছিল না।

— ত্রিশডট

@ সেরজিওকিউন্টারিও এক্সএইচআর ইন্টারফেসের যে কোনও ওভাররাইড কেবলমাত্র সেই ডকুমেন্টেই ঘটবে, বিশ্বব্যাপী ব্রাউজারে নয় কারণ এটি একটি বিশাল সুরক্ষা / গোপনীয়তা ছিদ্র হবে। reCAPTCHA একটি iframe এ চলে এবং আপনি সেখানে ওভাররাইড চালাতে পারবেন না।

— ওয়াল্ফ

Answer 6

"Meouw" এর উত্তরটি ব্যবহার করে আমি অনুরোধের ফলাফল দেখতে চাইলে নীচের সমাধানটি ব্যবহার করার পরামর্শ দিই

function addXMLRequestCallback(callback) {
    var oldSend, i;
    if( XMLHttpRequest.callbacks ) {
        // we've already overridden send() so just add the callback
        XMLHttpRequest.callbacks.push( callback );
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = [callback];
        // store the native send()
        oldSend = XMLHttpRequest.prototype.send;
        // override the native send()
        XMLHttpRequest.prototype.send = function() {
            // call the native send()
            oldSend.apply(this, arguments);

            this.onreadystatechange = function ( progress ) {
               for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
                    XMLHttpRequest.callbacks[i]( progress );
                }
            };       
        }
    }
}

addXMLRequestCallback( function( progress ) {
    if (typeof progress.srcElement.responseText != 'undefined' &&                        progress.srcElement.responseText != '') {
        console.log( progress.srcElement.responseText.length );
    }
});

Answer 7

jQuery ...

<script>
   $(document).ajaxSuccess(
        function(event, xhr, settings){ 
          alert(xhr.responseText);
        }
   );
</script>

Comments

jQuery অন্যান্য গ্রন্থাগার ব্যবহার করে করা অনুরোধগুলি ধরবে না। উদাহরণস্বরূপ ExtJS। আপনি যদি কেবল jQuery ব্যবহার করেন তবে এটির একটি ভাল উত্তর। অন্যথায়, এটি সবসময় কাজ করবে না।

— এনপিআইনি

এটি jquery অনুরোধগুলি ধরবে না যদি jquery উদাহরণটি পৃথক হয়। প্রোটাইপ পরিবর্তন হলে প্রয়োজন

— শিশির অরোরা

Answer 8

মেউউয়ের উত্তর ছাড়াও, আমাকে একটি আইফ্রেমে কোড ইনজেক্ট করতে হয়েছিল যা এক্সএইচআর কলগুলিকে বাধা দেয় এবং উপরের উত্তরটি ব্যবহার করে। তবে আমাকে বদলাতে হয়েছিল

XMLHttpRequest.prototype.send = function(){

প্রতি:

XMLHttpRequest.prototype.send = function(body)

এবং আমাকে পরিবর্তন করতে হয়েছিল

oldSend.apply(this, arguments);

প্রতি:

oldSend.call(this, body);

আইই 8 ডকুমেন্ট মোডে এটি আই 9 তে কাজ করার জন্য এটি প্রয়োজনীয় ছিল । যদি এই পরিবর্তনটি করা না হয়, তবে উপাদান কাঠামো (ভিজ্যুয়াল ওয়েবজিইউআই) দ্বারা উত্পাদিত কিছু কল-ব্যাক কার্যকর হয়নি। এই লিঙ্কগুলিতে আরও তথ্য:

• Function.prototype.call
• Function.prototype.apply

এই পরিবর্তনগুলি ছাড়াই AJAX পোস্টব্যাকগুলি শেষ হয়নি।