PHP+jquery ajax 實現實時的輸出顯示
阿新 • • 發佈：2018-11-22
一、html程式碼。利用$.ajax的xhr屬性，以及js中對於XMLHttpRequest的onreadystatechange事件，實時的從後端獲取並處理。
參考連結：ajax如何實現、readyState五中狀態的含義
<!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 type="text/javascript" src="./jquery-3.3.1.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 :'./tree.php'
,type:'get'
,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>";
$('#ontimeoutputArea').html(html);
}
}
return xhr;
}
});
});
</script>
</html>
二、php端的程式碼。ob_flush和flush要同時執行，另外只能這樣的呼叫順序。先ob_flush在flush
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 />';三、如果在linux環境，如果伺服器是nginx的話，要加個配置。參考連結：nginx伺服器ob_flush和flush不起作用
proxy_buffering off;
gzip off;
fastcgi_keep_conn on;可能你不知道這三項配置加到哪裡，分享一下。至於放在nginx.conf裡還是放在vhost的站點配置裡，看自己了
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /var/www;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name localhost;
#在這裡的呢
proxy_buffering off;
gzip off;
fastcgi_keep_conn on;
#在這裡的呢
location / {
# First attempt to serve request as file, then
}
}四、https環境上述程式碼可能不能執行。因為nginx的ssl_buffer_size 配置的原因，預設16k的快取。你可以要麼配置nginx設定這個值的大小，要麼輸出的時候多加一行
echo str_repeat(' ',1024*16);