blocks|key|10951|text|jQuery有一个AjaxSetup()函数，它允许您为所有ajax调用注册全局ajax处理程序，如beforeSend和complete，并允许您访问xhr对象来执行您正在寻找的进程|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|10952|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.ajaxSetup/^0|9|B|1E|A|1P|8|24|3|9|B|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

jQuery has an <a href="http://api.jquery.com/jQuery.ajaxSetup/" rel="nofollow noreferrer"><code>AjaxSetup()</code></a> function that allows you to register global ajax handlers such as <code>beforeSend</code> and <code>complete</code> for all ajax calls as well as allow you to access the <code>xhr</code> object to do the progress that you are looking for

blocks|key|11003|text|类似于$.ajax的代码(但仅限HTML5)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|11004|$.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
++++}
});|code-block|syntax|javascript|11005|entityMap^0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Something like this for <code>$.ajax</code> (HTML5 only though):

<pre><code>$.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
 }
});
</code></pre>

blocks|key|227539|text|http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|227540|我正在寻找一个类似的解决方案，发现这个解决方案用得很好。|227541|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();
});|code-block|syntax|javascript|227542|}|227543|和您的服务器输出|227544|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%2B%2B)+{
++++send_message($i,+'on+iteration+'+.+$i+.+'+of+10'+,+$i*10);+

++++sleep(1);
+}

send_message('CLOSE',+'Process+complete');|227545|entityMap|0|LINK|mutability|MUTABLE|url^0|0|2K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|C|$]]|$1|O|3|P|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|4]]]]

<a href="http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html" rel="nofollow">http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html</a>

I was searching for a similar solution and found this one use full.

<pre><code>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();
});
</code></pre>

}

and your server outputs 

<pre><code>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' =&gt; $message , 'progress' =&gt; $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 &lt;= 10; $i++) {
 send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

 sleep(1);
 }

send_message('CLOSE', 'Process complete');
</code></pre>

blocks|key|227611|text|jQuery已经实现了promises，所以最好使用这项技术，不要将事件逻辑转移到options参数。我做了一个jQuery插件，添加了进度承诺，现在它和其他承诺一样容易使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|227612|$.ajax(url)
++.progress(function(){
++++/*+do+some+actions+*/
++})
++.progressUpload(function(){
++++/*+do+something+on+uploading+*/
++});|code-block|syntax|javascript|227613|在github上查看它|227614|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/likerRr/jq-ajax-progress^0|15|7|0|0|1|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

jQuery has already implemented promises, so it's better to use this technology and not move events logic to <code>options</code> parameter. I made a jQuery plugin that adds progress promise and now it's easy to use just as other promises:


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

Check it out at <a href="https://github.com/likerRr/jq-ajax-progress">github</a>

In plain javascript is very simple: need just to attach the callback to <code>{XMLHTTPRequest}.onprogress</code>

<pre><code>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);
</code></pre>

but I'm doing an ajax site that download html data with JQuery (<code>$.get()</code> or <code>$.ajax()</code>) and I was wondering which is the best way to get the progress of a request in order to display it with a little progress bar but curiously, I'm not finding anything usefull in JQuery documentation...

What is the cleanest way to get the progress of JQuery ajax request?

服务器

jQuery

HTML5

JSON

在纯javascript中非常简单:只需将回调附加到{XMLHTTPRequest}.onprogressvar xhr = new XMLHttpRequest();xhr.onprogress = function(e){    if (e.lengthComputable)        var percent ...

问获取JQuery ajax请求进度的最简洁方法是什么？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取JQuery ajax请求进度的最简洁方法是什么？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取JQuery ajax请求进度的最简洁方法是什么？
EN