在一個頁面上,我有幾個DIV從XMLHttpRequests的數據填充到不同的PHP頁面。爲了保持UI的響應,我開始嘗試使用webworkers。然而,似乎更快的頁面在較慢的頁面之後仍在等待,即web工作者不能同時工作。 爲了測試目的,我簡化了頁面,請參閱下面的代碼。看起來,當提供數據的2個後端php頁面在其中有if (!isset($_SESSION)) session_start();
時,其中一頁是在另一頁之後。 在下面的例子中,有兩個按鈕,每個調用一個不同的web worker,然後調用一個不同的php腳本。 PhpA比phpB慢10秒。所以,當你點擊按鈕wwA,然後在主(test.php)腳本的wwB上,你應該首先得到phpB的響應。當if (!isset($_SESSION)) session_start();
在phpA和phpB中時,情況並非如此。這是爲什麼?WebWorker不與2個XMLHttpRequest一起發送到帶有session_start()的php頁面;
test.php的
<?php if (!isset($_SESSION)) session_start();?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<title>test</title>
<script language="JavaScript" type="text/javascript">
<!--
function launchWebWorkerA() {
var worker = new Worker('webWorkerA.js');
worker.addEventListener('message', function(e) {
document.getElementById('outputA').innerHTML = e.data.text;
worker.terminate();
}, false);
worker.postMessage();
}
function launchWebWorkerB() {
var worker = new Worker('webWorkerB.js');
worker.addEventListener('message', function(e) {
document.getElementById('outputB').innerHTML = e.data.text;
worker.terminate();
}, false);
worker.postMessage();
}
//-->
</script>
</head>
<body>
<input type="button" onClick="launchWebWorkerA()" value="wwA" />
<input type="button" onClick="launchWebWorkerB()" value="wwB" />
<div id="outputA">outputA</div>
<div id="outputB">outputB</div>
</body>
</html>
webWorkerA.js
// JavaScript Document
self.addEventListener('message', function(e) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
self.postMessage({'text': xmlhttp.responseText});
}
}
xmlhttp.open('POST','phpA.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();
}, false);
webWorkerB.js
// JavaScript Document
self.addEventListener('message', function(e) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
self.postMessage({'text': xmlhttp.responseText});
}
}
xmlhttp.open('POST','phpB.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();
}, false);
phpA.php
<?php if (!isset($_SESSION)) session_start();
sleep(10);
echo 'phpA response3';
?>
phpB.php
<?php if (!isset($_SESSION)) session_start();
echo 'phpB response3';
?>