php ajax 即时实时输出内容
转 https://www.cnblogs.com/jasonyou/p/13629115.html
php
<?php
function onTimeOutput($str){
echo $str;
ob_flush();
flush();
}
echo 'Begin ...<br />';
for( $i = 0 ; $i < 10 ; $i++ )
{
$str = $i . '<br />';
onTimeOutput($str);
sleep(2);
}
echo 'End ...<br />';
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div><button id="ontimeoutputBtn">及时输出</button></div>
<div id="ontimeoutputArea" style="border: 1px solid red"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
// readyState总共有5个状态值，分别为0~4
// 0 未初始化状态：此时，已经创建了一个XMLHttpRequest对象
// 1 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
// 2 已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应
// 3 正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
// 4 完成响应状态：此时，已经完成了HTTP响应的接收
$('#ontimeoutputBtn').click(function(){
$.ajax({
url :'./b.php'
,type:'post'
,data:{}
,success:function(res){
console.log('这里用jq提供的方法处理');
console.log(res);
}
,xhr:function(){//返回一个更强大的XMLHttpRequest的对象
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
var xhr = new XMLHttpRequest();
}else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//绑定事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
//这里使用js原生的处理方式
console.log('success');
}
if(xhr.readyState === 3){
var html = "<p style='border:1px solid red;'>"+xhr.responseText+"</p>";
console.log(html);
// $('#ontimeoutputArea').html(html);
}
}
return xhr;
}
});
});
</script>
</html>
二、php端的代码。ob_flush和flush要同时执行，另外只能这样的调用顺序。先ob_flush在flush
三、如果在linux环境，如果服务器是nginx的话，要加个配置。参考链接：nginx服务器ob_flush和flush不起作用
检查nginx配置文件(nginx.conf)，禁用nginx的buffering：
proxy_buffering off;
gzip off;
fastcgi_keep_conn on;
要注意最后这句fastcgi的哦~~
检查php.ini，禁用buffering：
output_buffering = off
注意这句配置不能通过ini_set()函数动态在程序中设置，这在php官方手册中有说明：
the output_buffering setting is PHP_INI_PERDIR therefore it may not be set using ini_set()
经过上面两步的配置(nginx.conf和php.ini)后，重启nginx就可以了，再次测试文章开头的代码，成功逐行输出
来源
https://blog.csdn.net/mangrandi/article/details/82789071
https://www.oschina.net/question/1439832_2148431?sort=default
https://www.laruence.com/2011/04/13/1991.html
b.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?phpfunction onTimeOutput($str){ echo $str; ob_flush(); flush(); } echo 'Begin ...<br />'; for( $i = 0 ; $i < 10 ; $i++ ) { $str = $i . '<br />'; onTimeOutput($str); sleep(2); } echo 'End ...<br />'; |
a.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"></head><body> <div><button id="ontimeoutputBtn">及时输出</button></div> <div id="ontimeoutputArea" style="border: 1px solid red"></div></body><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">// readyState总共有5个状态值，分别为0~4// 0 未初始化状态：此时，已经创建了一个XMLHttpRequest对象// 1 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端// 2 已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应// 3 正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到// 4 完成响应状态：此时，已经完成了HTTP响应的接收 $('#ontimeoutputBtn').click(function(){ $.ajax({ url :'./b.php' ,type:'post' ,data:{} ,success:function(res){ console.log('这里用jq提供的方法处理'); console.log(res); } ,xhr:function(){//返回一个更强大的XMLHttpRequest的对象 if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 var xhr = new XMLHttpRequest(); }else if (window.ActiveXObject) { //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现ActiveXObject var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //绑定事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { //获取成功后执行操作 //数据在xhr.responseText //这里使用js原生的处理方式 console.log('success'); } if(xhr.readyState === 3){ var html = "<p style='border:1px solid red;'>"+xhr.responseText+"</p>"; console.log(html); // $('#ontimeoutputArea').html(html); } } return xhr; } }); });</script></html> |
来源
https://blog.csdn.net/mangrandi/article/details/82789071
https://www.oschina.net/question/1439832_2148431?sort=default
浙公网安备 33010602011771号