জিকিউরি আজাক্স অনুরোধের অগ্রগতি পাওয়ার সবচেয়ে সহজ উপায় কী?

Question

সরল জাভাস্ক্রিপ্টে খুব সহজ: কেবল কলব্যাকটি সংযুক্ত করার প্রয়োজন {XMLHTTPRequest}.onprogress

var xhr = new XMLHttpRequest();

xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};

xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

তবে আমি এমন একটি অজ্যাক্স সাইট করছি যা জিকিউরি ( $.get()বা $.ajax()) এর সাথে এইচটিএমএল ডেটা ডাউনলোড করবে এবং আমি ভাবছিলাম যে কোনও অনুরোধের অগ্রগতিটি পাওয়ার জন্য এটি একটি সামান্য অগ্রগতি বারের সাথে প্রদর্শন করার জন্য সবচেয়ে উত্তম উপায় তবে কৌতূহলীভাবে, আমি নই জিকুয়েরি ডকুমেন্টেশনে দরকারী কিছু সন্ধান করছে ...

Comments

প্রতিশ্রুতি এই এক সৌন্দর্য dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5 HTML5 জন্য

— PSL

ওহ ধন্যবাদ বলছি! তাই ওভাররাইড XHR করার প্রয়োজনীয়তা .. অদ্ভুত জিনিস যে আমি ক্রোম দেব সরঞ্জামগুলির সাথে তথাকথিত পরিদর্শন করেছি jqXHRবস্তু (দ্বারা ফিরে XHR বস্তুর মোড়কের $.ajax()) এবং একটি পাওয়া progressঅ্যাট্রিবিউট (সহ এটা abort, complete, success, ইত্যাদি), কিন্তু জিকুয়েরি ডক্সে

— guari

github.com/englercj/jquery-ajax-progress আমি এই এবং এটি অন্যান্য উত্তরগুলির মতো একইরকম ব্যবহার করি তবে আমি আরও জেনেরিক জিনিস পছন্দ করি

— কেজারব্রিজ

Answer 1

এর জন্য এমন কিছু $.ajax(কেবলমাত্র এইচটিএমএল 5):

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

Comments

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

— সেক্সিবিস্ট

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

— জে. অ্যালেন

এটি কি কেবল পোস্টে কাজ করছে, জিইটি এবং অন্যান্যগুলিও পায় নি?

— রাজ

Answer 2

jQuery ইতিমধ্যে প্রতিশ্রুতি বাস্তবায়ন করেছে, তাই এই প্রযুক্তিটি ব্যবহার করা এবং ইভেন্টের যুক্তিকে optionsপ্যারামিটারে না নিয়ে যাওয়া ভাল । আমি একটি jQuery প্লাগইন তৈরি করেছি যা অগ্রগতির প্রতিশ্রুতি যুক্ত করে এবং এখন অন্যান্য প্রতিশ্রুতির মতোই এটি ব্যবহার করা সহজ:

$.ajax(url)
  .progress(function(){
    /* do some actions */
  })
  .progressUpload(function(){
    /* do something on uploading */
  });

গিথুব এ এটি পরীক্ষা করে দেখুন

Comments

আপনি আইএফআই কারখানাটি যেভাবে ব্যবহার করছেন তা আমি পছন্দ করেছি। সেই কৌশলটি আমি জানতাম না!

— CodeArtist

এটি বর্তমানে এখানে প্রস্তাবিত সেরা সমাধান।

— এটমলেস

কার্যকরী এবং মার্জিত সমাধান তবে আপনি সচেতন হতে পারেন যে এটি আপনার বিদ্যমান কোডটি ভেঙে ফেলতে পারে কারণ এটি হ্রাসপ্রাপ্ত .success এবং .error এর সমস্ত কলকে ব্রেক করে। এটি আপনাকে একটি jqXHR অবজেক্টে সেট করা সমস্ত অ-মানক বৈশিষ্ট্যগুলিও সরিয়ে দেয়। এটি জেএকএক্সএইচআর-এর সমস্ত মানক প্রতিশ্রুতিগুলির জন্য আপলোডপ্রোগ্রেস কলব্যাকের জন্য "এটি" এর প্রসঙ্গ সরবরাহ করে না (সম্ভবত অগ্রগতির জন্য একই তবে পরীক্ষিত নয়)। সুতরাং আপনাকে বন্ধের ক্ষেত্রে প্রসঙ্গটি পাস করতে হবে।

— খোলা

আমি ত্রুটি পেয়েছি: TypeError: $.ajax(...).progress(...).progressUpload is not a function.... সমস্যা কি?

— ইউনিভার্সাল গ্র্প

@ ইউনিভার্সালগ্র্যাপ হাই, দয়া করে গিথুব এ একটি সমস্যা খুলুন এবং আপনি কী করেছেন সে সম্পর্কে তথ্য সরবরাহ করুন। এই গ্রন্থাগারটি যুগে যুগে আপডেট করা হয়নি :) jQuery নিজেই কিছু পরিবর্তিত হতে পারে

— likerRr

Answer 3

আমি আজাক্স অবজেক্টটি নির্মাণে বাধা দেওয়ার প্রায় তিনটি পৃথক উপায়ে চেষ্টা করেছি:

1. আমার প্রথম প্রচেষ্টা ব্যবহৃত xhrFields , তবে এটি কেবলমাত্র একজন শ্রোতার পক্ষে অনুমতি দেয়, কেবল ডাউনলোড (আপলোড করা হয় না) অগ্রগতিতে সংযুক্ত করে এবং অপ্রয়োজনীয় অনুলিপি এবং পেস্টের মতো যা লাগে তা প্রয়োজন।
2. আমার দ্বিতীয় প্রচেষ্টা সংযুক্ত progress প্রতিশ্রুতির ফাংশন করেছিল, তবে আমাকে নিজের হ্যান্ডলারের নিজস্ব অ্যারে বজায় রাখতে হয়েছিল। আমি হ্যান্ডেলারগুলিকে সংযুক্ত করার জন্য একটি ভাল অবজেক্টটি খুঁজে পাইনি কারণ এক জায়গায় আমি এক্সএইচআর এবং অন্য একটি জায়গায় আমি jQuery এক্সএইচআর অ্যাক্সেস পেয়েছি, তবে আমার কখনই পিছিয়ে দেওয়া বস্তুতে প্রবেশ ছিল না (কেবলমাত্র এটির প্রতিশ্রুতি)।
3. আমার তৃতীয় প্রয়াস হ্যান্ডলার সংযুক্ত করার জন্য আমাকে এক্সএইচআরটিতে সরাসরি অ্যাক্সেস দিয়েছে, তবে আবার অনেক অনুলিপি-পেস্ট কোডের প্রয়োজন।
4. আমি আমার তৃতীয় প্রচেষ্টাটি গুটিয়ে ajaxফেলেছি এবং jQuery এর আমার নিজের সাথে প্রতিস্থাপন করেছি। একমাত্র সম্ভাব্য ঘাটতি হ'ল আপনি আর নিজের xhr()সেটিংস ব্যবহার করতে পারবেন না । আপনি options.xhrকোনও ফাংশন কিনা তা পরীক্ষা করে এটির অনুমতি দিতে পারেন ।

আমি আসলে আমার promise.progressফাংশনটি কল করি xhrProgressযাতে পরে এটি সহজেই খুঁজে পেতে পারি। আপনার আপলোড এবং শ্রোতাদের আলাদা করার জন্য আপনি এর অন্য কোনও নাম রাখতে চাইতে পারেন। আমি আশা করি যে এটির পোস্টারটি ইতিমধ্যে তার প্রয়োজনীয় জিনিসটি পেয়ে গেলেও এটি সহায়তা করে।

(function extend_jQuery_ajax_with_progress( window, jQuery, undefined )
{
var $originalAjax = jQuery.ajax;
jQuery.ajax = function( url, options )
{
    if( typeof( url ) === 'object' )
    {options = url;url = undefined;}
    options = options || {};

    // Instantiate our own.
    var xmlHttpReq = $.ajaxSettings.xhr();
    // Make it use our own.
    options.xhr = function()
    {return( xmlHttpReq );};

    var $newDeferred = $.Deferred();
    var $oldPromise = $originalAjax( url, options )
    .done( function done_wrapper( response, text_status, jqXHR )
    {return( $newDeferred.resolveWith( this, arguments ));})
    .fail( function fail_wrapper( jqXHR, text_status, error )
    {return( $newDeferred.rejectWith( this, arguments ));})
    .progress( function progress_wrapper()
    {
        window.console.warn( "Whoa, jQuery started actually using deferred progress to report Ajax progress!" );
        return( $newDeferred.notifyWith( this, arguments ));
    });

    var $newPromise = $newDeferred.promise();
    // Extend our own.
    $newPromise.progress = function( handler )
    {
        xmlHttpReq.addEventListener( 'progress', function download_progress( evt )
        {
            //window.console.debug( "download_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        xmlHttpReq.upload.addEventListener( 'progress', function upload_progress( evt )
        {
            //window.console.debug( "upload_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        return( this );
    };
    return( $newPromise );
};
})( window, jQuery );

Comments

সুতরাং আমি কেবল আপনার সমাধানটি প্রয়োগ করার চেষ্টা করেছি তবে এই কোডটি বুঝতে আমার পক্ষে একটু বেশি প্রো - আমি কীভাবে এটি ব্যবহার করব? আমি আমার দস্তাবেজের আগে আপনার পুরো কোডটি অনুলিপি করেছি ready প্রস্তুত এবং করার চেষ্টা করেছি $.ajax({ ... }).progress(function(evl) { console.log(evl); });কিন্তু কিছুই হচ্ছে না। আপনি কি আমাকে সাহায্য করতে পারেন? :)

— প্যাট্রিক দাভাদার

আপনি jQuery এর কোন সংস্করণ ব্যবহার করছেন?

— ফ্ল্লো শিল্ড

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

— মার্কএমইং

Answer 4

jQuery এর একটি AjaxSetup()ফাংশন রয়েছে যা আপনাকে গ্লোবাল এজ্যাক্স হ্যান্ডলারগুলি যেমন beforeSendএবং completeসমস্ত এজাক্স কলগুলির জন্য নিবন্ধিত করতে দেয় এবং xhrসেই সাথে আপনি যে অগ্রগতিটি সন্ধান করছেন তা করার জন্য আপনাকে অবজেক্টটিতে অ্যাক্সেস করতে দেয়

Comments

লিঙ্কের জন্য ধন্যবাদ। আপনি কি আপনার উত্তরে একটি উদাহরণ অন্তর্ভুক্ত করতে পারেন?

— মাইকেল শ্যাপার

aj .জ্যাক্সেটআপ ({xhr: ফাংশন () so কনসোল.লগ ('সেটআপ এক্সএইচআর ...');}});

— ফ্লো শিল্ড

এবং একটি উদাহরণ যা প্রশ্নের উত্তর দেয়? আমি ভয় করি যে আমি এমন কোনও উত্তর উপস্থাপন করতে পারব না যা আমাকে প্রচুর পরিমাণে ফিডিং এবং পড়তে ছেড়ে দেয়, বিশেষত যখন লিঙ্কযুক্ত পৃষ্ঠাটি অগ্রগতি সম্পর্কে কিছুই না বলে। সত্যি বলতে, আমি এই সম্পর্কে সন্দিহান, বিশেষ করে ঐ পৃষ্ঠাতে সতর্কবার্তা দেওয়া আছি, বলছেন যে 'নোট: গ্লোবাল কলব্যাক ফাংশন তাদের নিজ নিজ বিশ্বব্যাপী আয়াক্স ইভেন্ট হ্যান্ডলার methods- সঙ্গে নির্ধারণ করা উচিত .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()অপশন মধ্যে আর -rather জন্য অবজেক্ট $.ajaxSetup()। ' < api.jquery.com/jQuery.ajaxSetup/#entry-longdesc >

— মাইকেল শ্যাপার

ডক্স থেকে : ভবিষ্যতের অ্যাজাক্স অনুরোধগুলির জন্য ডিফল্ট মান সেট করুন। এর ব্যবহার বাঞ্ছনীয় নয়।

— ওভিন্দ

Answer 5

http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html

আমি অনুরূপ সমাধানের সন্ধান করছিলাম এবং এটির একটি ব্যবহার পূর্ণ দেখলাম।

var es;

function startTask() {
    es = new EventSource('yourphpfile.php');

//a message is received
es.addEventListener('message', function(e) {
    var result = JSON.parse( e.data );

    console.log(result.message);       

    if(e.lastEventId == 'CLOSE') {
        console.log('closed');
        es.close();
        var pBar = document.getElementById('progressor');
        pBar.value = pBar.max; //max out the progress bar
    }
    else {

        console.log(response); //your progress bar action
    }
});

es.addEventListener('error', function(e) {
    console.log('error');
    es.close();
});

}

এবং আপনার সার্ভার আউটপুট

header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache'); 

function send_message($id, $message, $progress) {
    $d = array('message' => $message , 'progress' => $progress); //prepare json

    echo "id: $id" . PHP_EOL;
    echo "data: " . json_encode($d) . PHP_EOL;
    echo PHP_EOL;

   ob_flush();
   flush();
}


//LONG RUNNING TASK
 for($i = 1; $i <= 10; $i++) {
    send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

    sleep(1);
 }

send_message('CLOSE', 'Process complete');

Comments

এটি কোনও এজেএক্স কল নয়, চলমান পিএইচপি স্ক্রিপ্টের অগ্রগতি দেখায়।

— সাইনাস ম্যাকোভাটি

Answer 6

অ্যাজাক্স অনুরোধের অগ্রগতি প্রদর্শনের পদক্ষেপগুলি অনুসরণ করুন:

1. এইচটিএমএল এবং সিএসএস ব্যবহার করে একটি স্পিনার তৈরি করুন বা বুটস্ট্র্যাপ স্পিনার ব্যবহার করুন।
2. স্পিনারটি প্রদর্শন করুন যখন শেষ-ব্যবহারকারী অসীম লুপের জন্য বা প্রান্তিক সীমা সময়ের জন্য AJAX ডেটার জন্য অনুরোধ করে।
3. সুতরাং, AJAX অনুরোধের একটি সাফল্য / ERROR ফলাফলের পরে, বর্তমানে প্রদর্শিত স্পিনারটি সরিয়ে ফেলুন এবং আপনার ফলাফলগুলি দেখান।

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

আশা করি এটা কাজে লাগবে!

Comments

এটি মোটেও "অগ্রগতি" পাচ্ছে না, কেবল একটি "অপেক্ষা" অ্যানিমেশন দেখায় showing

— সাইনাস ম্যাকোভাটি