I'm using JQuery and AJAX to call a slow function in a PHP file, but I don't get a response until the PHP function is complete. I can't figure out why, despite 2 days of searching. I've shrunk it down to two test files, that exhibit exactly the same behaviour. My php function is thus, in a file called "ajaxfuncs.php":
<?php
Class AjaxFuncs{
public function __construct() {
$this->testbuffer ();
}
function testbuffer(){
echo 'Starting Test Buffer Output. There should be a 2 second delay after this text displays.' . PHP_EOL;
echo " <br><br>";
echo '<div id="testdata" class="testdata">0</div>';
// The above should be returned immediately
flush();
// Delay before returning anything else
sleep(2);
for ($a = 0; $a < 3; $a++) {
echo '<script type="text/javascript">document.getElementById("testdata").innerHTML="' . (int)($a + 1) . '"</script>';
flush();
// Delay for 1 second before updating the value
sleep(1);
}
}
}
$AjaxFuncs = new AjaxFuncs();
?>
The above works if I open the "ajaxfuncs.php" file in the browser. It does exactly as I'd expect, and the output updates every second until complete. So I know I've buffering sorted on the server.
But when I call it using the following $.ajax it's not right. I've put everything except the php for the ajax function into another php file called "testindex.php" for convenience. This is it:
<?php
header( 'Content-type: text/html; charset=utf-8' );
header("Cache-Control: no-store, must-revalidate");
header ("Pragma: no-cache");
header("Expires: Mon, 24 Sep 2012 04:00:00 GMT");
?>
<body>
<a>Test Page. Wait for it...</a>
<div id="maincontent">
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
console.log ('Document Ready');
function callajax(){
var ajaxfilepath = "ajaxfuncs.php";
return $.ajax({
url: ajaxfilepath,
data: {action: 'testbuffer'},
type: 'get',
cache: false,
dataType: "text",
beforeSend: console.log('Starting Ajax Operation')
})
.done(function(result){
processajaxcalloutput(result);
})
.always(function(){
console.log(' Ajax Internal Complete Detected');
})
.fail(function( jqXHR, textStatus ) {
console.log( "Ajax Request failed: " + textStatus );
});
}
function processajaxcalloutput(result){
var message = 'Processing Ajax Response' ;
console.log(message);
$("#maincontent").append(result);
}
callajax();
});
Everything works without error. Console is clear - no errors (I'm testing with Chrome & Firefox). But I can't seem to get a response until the entire PHP function is done. I've tried everything I can find, in particular hundreds of different things to force caching off, but to no avail. Any help is much appreciated. Thanks.
Update:
So based on the feedback so far, it's clear the call is asynchronous and the code is fine, but asynchronous does not mean I'll get a continuous stream of output data from the php function as it executes. Instead the entire response will be returned at the end of the execution. Rather than divert this question into one about streaming, I'll leave it at this until I resolve the streaming issue.
Related
In my project, I have a long-running process which is called by AJAX. Duration can be 1 to 15 mins.
While AJAX is running, I want to give updates to users. It just should show simply how many rows left to add into the database.
I found out that there are a few different options to realize this. Polling, SSE or WebSockets. I never worked with WebSockets, and I couldn't find a good example.
I'm trying now with SSE which I quite understand, and it is working properly.. but when the AJAX start running the connection to the eventSource will be pending. So while AJAX is running, there are no updates received.
Code:
<script type="text/javascript">
var es;
function checkProgress(id){
es = new EventSource('checkProgress.php');
es.addEventListener('message', function(e) {
console.log(e.data);
}, false);
}
checkProgress(1);
$(function() {
$('.submit').on('click', function() {
var form = $('form')[0];
var form_data = new FormData(form);
$.ajax({
type: 'POST',
url: 'submit.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
console.log(response);
}
});
return false;
});
});
</script>
Screenshots:
Network log
Now actually I still didn't find any reference or example of how to implement SSE while there is an AJAX process running. All reference or examples give examples to let the getProgress file to do something.
PHP:
checkProgress.php
<?php
require_once './core/init.php';
$Jobs = new Core\Jobs();
$data = $Jobs->getUpdate(1);
// var_dump($data);
// die();
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache');
echo "id: 1" . PHP_EOL;
echo "retry: 100\n\n";
echo "data: " . json_encode($data) . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
Submit.php
<?php
require_once 'core/init.php';
//'long running' job for debug
for($i = 1; $i <= 10; $i++) {
Core\Jobs::pushUpdate('1', array("rows"=>$i,"job_id"=>1));
sleep(2);
}
I have the following extremely simple PHP tester:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<button id="button">send request</button>
<script>
$("#button").click(function(){
$.ajax({
type: "POST",
url: "ajaxTest.php",
data: {userresponse: "hi"},
success: function(data){
alert(data)
analyse()
}
})
})
var analyse = function () {
<?php
if(isset($_POST["userresponse"])){
$variable = $_POST["userresponse"];
switch($variable){
case "hi":
echo 'alert("' . $variable . '")';
break;
default:
echo 'alert("LOGIC")';
}
}
?>
}
</script>
What's supposed to happen is that when I click the button, it sends the data userresponse: "hi" to the server, and then PHP receives it and alerts the value (i.e. "hi")
However, despite the fact that the file paths are correct, the AJAX send is OK in XHR, the PHP does not receive the value of the data, and the alert(data) returns the entire HTML document.
What is going on and how do I fix this?
Remove analyze() and put your php code in external file called ajaxTest.php, your code works perfect just remove your php code fron analyze and request for external this is bad practice having both in same file(header problems).
Proof:
I have a nginx rewrite rule that redirects an img src attribute to a php page. Within this php page I'm trying make a GET request, which on success makes a POST request to the same page, sending the data returned from the GET request as the data. Why is the $_POST data empty in the php script? If I hardcode $name = "http://path/to/my/img.png" in the php script the image renders correctly.
<?php
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
var_dump($_REQUEST);
//if(isset($_POST['val'])) {
// open the file in a binary mode
$name = $_POST['val']; // ALWAYS EMPTY
$fp = fopen($name, 'rb');
// send the right headers
header("Content-Type: image/png");
header("Content-Length: " . filesize($name));
// dump the picture and stop the script
//echo fpassthru($fp);
header("Location: $name");
exit;
//}
?>
<html>
<head>
<script type='text/javascript' src='/steal/steal.js'></script>
<script type="text/javascript" src="/plugins/jquery/json2.js"></script>
<script type="text/javascript">
steal('jquery/dom/fixture').then(function(){
$.fixture("GET /event/{code}", function(original, settings, headers){
return [200, "success", { "img_url":"http://path/to/my/img.png" }, {} ]
})
var strObj = <?php echo json_encode($_REQUEST); ?>;
var str = strObj.q;
var eventCode = str.split('/')[1];
$.ajax({
url: "/event/"+eventCode,
success: function(data) {
var imgUrl = data.img_url
$.ajax({
type: 'POST',
contentType: 'json',
data: {val:imgUrl},
success: function(data){
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log(textStatus);
}
});
}
});
});
</script>
</head>
<body>
</body>
</html>
Alright, you've taken things a few steps beyond what is possible.
When the user hits this image in their email, a request is sent to your server asking for that image. None of that javascript is going to make it back to the user because the <img> tag is expecting an image, not an html document. You can tack things on to the outgoing request via something like
<img src="http://yourwebsite.com/tracker.php?val=someimage.png">
and your script will be able to get val out of $_GET but you won't be able to make a POST request for this image from inside an email.
All that $_REQUEST data you're getting at the top there? That's where you get all your email tracking data from. Everything you can get out of there and $_GET is all you're getting.
Afterwards, you need to give them back an image. So heres how you do that.
$val = $_GET['val']; // assuming val contains an image
header('Content-Type: image/png');
readfile('/path/to/your/images/'. $val);
Please be super aware that you need to sanity check $val to make sure its only containing images that you want to be able to see. A potentially malicious user could see this and put something like tracker.php?val=/etc/passwd or something similar and then you've got PHP trying to read your password file. Making sure that images exist and can even be read can be done with the is_readable() function.
I am here to ask that is there any settings argument in jQuery ajax() which let us to call a function when data has transferred to php file successfully not when the data has transferred and php file parsed the code and returned a value.
I have following code:
$.ajax({
..
..
..
success: function(data) {
// do something
}
});
But I want it like:
$.ajax({
..
..
..
onTransfer: function() {
// do something like show a div saying "Done".
},
success: function(data) {
// do something
}
});
You only get 1 answer from server side, what's wrong with success? If your process takes too long then you could return from script as soon as it get's started and show 'Processing your request' as result for success:
<?php
ob_end_clean(); // discard everything
header("Connection: close"); // send Connection close
ignore_user_abort(true); // ignore user abort
set_time_limit(0); // no time limit
ini_set("memory_limit","200M"); // setup a memory usage needed
ob_start(); // start output buffer
header("Content-Length: 0"); // send lenght 0
ob_end_flush(); // end and flush
flush();
// continue your script
Your script will continue to run while you receive a success answer from it.
You might use it like this
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});
For more details please check following link
http://api.jquery.com/jQuery.ajax/
I want to get a watingmessage in extjs while loading a link. The response is a binarycode, which I want to downlad. The link is for example "test.php".
function loadurl(link){
Ext.MessageBox.wait('Loading ...');
Ext.Ajax.request({
url: link,
callback: function(options, success, response){
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
if (success) {
// response : my attachment
}
else {
}
},
scope: this
});
}
{
...
//functioncall
loadurl('test.php');
}
I also tried in test.php.
<?php
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $content;
?>
But it doesnt work. If I just load the link it works, but without waiting message.
In the ExtJS Documentation there is a class called LoadMask which is designed to show a loading 'spinner' along with a short message. In your case, you would use it like this:
function loadurl(link){
var mask = Ext.LoadMask(Ext.getBody(), {msg:"Loading..."})
mask.show();
Ext.Ajax.request({
url: link,
callback: function(options, success, response){
if (success) {
// response : my attachment
}
else {
}
//do whatever work we need to do, then hide the mask
mask.hide()
},
scope: this
});
However, if, for whatever reason, the callback comes back almost immediately, then it is possible that the mask will not be visible because your file loaded too fast. If this is an issue, you could force a delay by putting your Ajax request inside a setTimeout.