Zulius » php http://www.zulius.com Advanced Application Development Fri, 30 Jul 2010 05:53:53 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Send multidimensional arrays to PHP with jQuery and AJAX http://www.zulius.com/how-to/send-multidimensional-arrays-php-with-jquery-ajax/ http://www.zulius.com/how-to/send-multidimensional-arrays-php-with-jquery-ajax/#comments Sat, 26 Dec 2009 14:48:46 +0000 Tim White http://www.zulius.com/?p=656 AJAX

javascript array

AJAX communication between the client browser and web server is a handy method of transferring data without forcing the user to refresh the page. Typically, the data sent to the server is a simple set of form fields or flags. However, it is also possible to submit more complex structured data. This tutorial will demonstrate 3 different methods used to pass multidimensional javascript arrays using jQuery and AJAX to a PHP web server.

The Wrong Way

My first instinct was that multidimensional JS arrays could be passed directly to jQuery's AJAX functions. I expected that the array would be automatically preserved in the request, and show up in PHP's $_GET/$_POST variables. The following example shows this doesn't work.

The code below attempts to post a JS associative array ("data", line 9) to the web server using jQuery's $.ajax() function. The $.ajax() function is jQuery's lowest level AJAX function, but still provides a high level approach and lots of options.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jQuery AJAX arrays</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
                sendAjax = function(){
                    var data = {
                                  foo:  123,
                                  bar:  456,
                                  rows: [
                                          {
                                            column1 : 'hello',
                                            column2 : 'hola',
                                            column3 : 'bonjour',
                                          },
                                          {
                                            column1 : 'goodbye',
                                            column2 : 'hasta luego',
                                            column3 : 'au revoir',
                                          },
                                        ],
                                  test1:{
                                          test2: {
                                                   test3:  'baz'
                                                 }
                                        }
                                };

                    $.ajax({
                            type:           'post',
                            cache:          false,
                            url:            './ajax/',
                            data:           data
                           });
                }

        </script>
    </head>
    <body>
        <input type="button" style="width: 130px; height: 60px" value="send AJAX" onclick="sendAjax();" />
    </body>
</html>

When the button is clicked, the following data shows up in PHP's $_POST variable:

Array
(
    [foo] => 123
    [bar] => 456
    [rows] => [object Object]
    [test1] => [object Object]
)

As shown, the first level of the array data is preserved (keys "foo" and "bar"). However, jQuery simply calls .toString() on the nested arrays at keys "rows" and "test1", and they get passed to PHP with the useless values "[object Object]".

Method 1 - Form input arrays

It's possible to name the keys of the JS array as HTML form input arrays (ie. named with square brackets) so that PHP decodes the array's key names as nested arrays. I don't recommend this method because it does not maintain the JS array's original structure in the Javascript. However, it can be used if you just need to get the AJAX request working without using JSON.

The original JS "data" array can be renamed/restructured as: 

sendAjax = function(){
	var data = {
				  foo:  123,
				  bar:  456,
				  'rows[0][column1]':    'hello',
				  'rows[0][column2]':    'hola',
				  'rows[0][column3]':    'bonjour',
				  'rows[1][column1]':    'goodbye',
				  'rows[1][column2]':    'hasta luego',
				  'rows[1][column3]':    'au revoir',
				  'test1[test2][test3]': 'baz'
				};
	$.ajax({
			type:           'post',
			cache:          false,
			url:            './ajax/',
			data:           data
		   });
}

And the data is correctly received in PHP's $_POST variable:

Array
(
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )
        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )
        )
)

Method 2 - JSON string parameter

This method converts the JS array to a JSON string, and passes it as a POST or GET parameter, which can be manually decoded back into an array by PHP. Modern browsers (Firefox 3, IE 8) now have a native JSON object that can be used to stringify JS arrays to JSON strings. The following example uses the YUI JSON utility to convert the JS array to a string ( json2 is another populary lightweight utility for handling JSON).

sendAjax = function(){
	var data = {
				  foo:  123,
				  bar:  456,
				  rows: [
						  {
							column1 : 'hello',
							column2 : 'hola',
							column3 : 'bonjour',
						  },
						  {
							column1 : 'goodbye',
							column2 : 'hasta luego',
							column3 : 'au revoir',
						  },
						],
				  test1:{
						  test2: {
								   test3:  'baz'
								 }
						}
				};
	data = YAHOO.lang.JSON.stringify(data);

	$.ajax({
			type:           'post',
			cache:          false,
			url:            './ajax/',
			data:           {myJson:  data}
		   });
}

On the PHP side, it's necessary to use json_decode() to convert the JSON $_POST parameter string (named "myJson") to an array:

<?php
$data = json_decode($_POST['myJson'], true);
print_r($data);

And the array is good to go:

Array
(
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )
        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )
        )
)

Method 3 - JSON content-type

My favorite method is to simply JSON stringify the JS array, and pass it as the AJAX request's body. This requires that the content-type of the request be changed from the default "application/x-www-form-urlencoded" to "application/json", and that $.ajax()'s processData parameter be set to false so that the JSON data is not converted into a query string. Also, the type of request must be POST, as the GET method does not support submitting data in the request body.

sendAjax = function(){
	var data = {
				  foo:  123,
				  bar:  456,
				  rows: [
						  {
							column1 : 'hello',
							column2 : 'hola',
							column3 : 'bonjour',
						  },
						  {
							column1 : 'goodbye',
							column2 : 'hasta luego',
							column3 : 'au revoir',
						  },
						],
				  test1:{
						  test2: {
								   test3:  'baz'
								 }
						}
				};
	data = YAHOO.lang.JSON.stringify(data);

	$.ajax({
			type:           'post',
			cache:          false,
			url:            './ajax/',
			data:           data,
			processData:    false,
			contentType:   'application/json'
		   });
}

On the PHP side, it's necessary to manually read the JSON string directly from the request body using the php://input stream. The returned string can then be decoded into an array:

<?php
$data = file_get_contents('php://input');
$data = json_decode($data, true);
print_r($data);

Which gives us the array:

Array
(
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )
        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )
        )
)

Hopefully this tutorial has helped you get multidimensional array data passed to your webserver using AJAX. If you know of another method, please submit it in the comments - thanks!

]]> http://www.zulius.com/how-to/send-multidimensional-arrays-php-with-jquery-ajax/feed/ 5 PHP: close browser connection and keep on executing http://www.zulius.com/how-to/close-browser-connection-continue-execution/ http://www.zulius.com/how-to/close-browser-connection-continue-execution/#comments Fri, 20 Nov 2009 05:31:55 +0000 Tim White http://www.zulius.com/?p=543 Close the browser's connection

Close the browser's connection

Sometimes you need to execute a really long process after displaying a web page. For example, you may need to evaluate the data a user submitted, and that operation may take a lot of time. And since you're a thoughtful programmer, you don't want make the user stare at a blank page while they wait for the process to finish.

A good solution is to display a confirmation page and then close the browser's connection to the web server. Closing the browser's connection will cause the browser to stop "spinning" and display a "Done" status. The user can then feel assured that their part in the matter is over with, and can navigate elsewhere. In the meantime, your PHP (or whatever language) continues executing on the server. You could even get fancy with it, and use AJAX to display the script's execution progress to the user on the confirmation page.

The key to doing this are the two HTTP header fields:

Connection: close
Content-Length: n (n = size of output in bytes )

The "Connection: close" header lets the browser know that it should not maintain a persistent connection. The "Content-Length: " header tells the browser how much data to expect. Thus, it's necessary to supply the size of the output (in bytes) using "Content-Length: ". Then the browser knows when it's downloaded everything and can terminate the connection.

Example 1 - Basic Usage

 

<?php
// buffer all upcoming output
ob_start();
echo "Here's my awesome web page";

// get the size of the output
$size = ob_get_length();

// send headers to tell the browser to close the connection
header("Content-Length: $size");
header('Connection: close');

// flush all output
ob_end_flush();
ob_flush();
flush();

/******** background process starts here ********/

Example 2 - embedded PHP with execution progress updates

View the demo

This basic example executes some arbitrary time consuming code in the background, after the user clicks the submit button. Notice that after clicking submit, the browser displays the web page and stops downloading. Also, as a bonus, the execution progress of the script is displayed periodically using Prototype's PeriodicUpdater ajax calls.

  • Lines 02 - 19:  AJAX handler that returns the progress of the background execution to the AJAX calls. It's basically reading the contents of the progress file to the browser.
  • Lines 22 - 35:  Creates a uniquely named temporary file to track the background process's execution. It also buffers all output (Line 034) so that we can calculate the size of all the content. The size will be sent in the "Content-Length: " header.
  • Lines 37 - 85:  HTML content. The javascript in Lines 68 - 80 setup a Prototype PeriodicUpdater. It checks on the status of the background script every 1 second.
  • Line 88:  Calculates the size of the buffered output in bytes.
  • Lines 90 -98:  Sends the 2 necessary headers to the browser, and flushes all buffered output to the browser.
  • Lines 100 - 115:  This is where the background process should be executed. In the example, some time consuming code is executed, and it's progress (ie. "Executing step n...") is written to a temporary progress file.

Demo source code

<?php
    // ajax updater handler
    if (isset($_POST['ajax']) && $_POST['pidFile']){
        // clean input
        $pidFile = preg_replace('/[^\w\d]/', '', $_POST['pidFile']);
        $pidFile = "../cache/$pidFile";

        if (! file_exists($pidFile)){
            header('HTTP/1.1 500 Internal Server Error');
            exit;
        }
        if(! $progress = file_get_contents($pidFile)){
            header('HTTP/1.1 500 Internal Server Error');
            exit;
        }

        echo nl2br($progress);
        exit;
    }

    // was form submitted?
    if(isset($_POST['submitted'])){
        // create a unique file to track script progress
        $pidFile = tempnam('../cache', '');

        // create the file for writing
        $fh = fopen($pidFile, 'wrx+');
        if (! $fh){
            print "failed to create the file";
            exit;
        }

        // buffer all upcoming output
        ob_start();
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
        <title>Zulius :: Close Browser Connection :: Example #1 Inline PHP</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
        <style>
            body{ text-align: center; margin: 20px auto; font-family: Arial, Helvetica, sans-serif;}
            div#progress{ min-height: 220px; margin: 10px auto}
        </style>
    </head>
    <body>
        <h1>
        <?php
        if(isset($_POST['submitted'])){
            echo 'background process started';
        }
        else{
            echo 'click to start background process';
        }
        ?>
        </h1>
        <div id="progress">
        </div>
        <form method="POST">
            <input type="submit" name="submitted" value="Go!">
        </form>
    </body>
    <?php
        if(isset($_POST['submitted'])){
        // show progress in browser
    ?>
        <script type="text/javascript">
            updater = new Ajax.PeriodicalUpdater({success: 'progress'}, '<?php echo $_SERVER['REQUEST_URI'] ?>',
                                                { method: 'post',
                                                  frequency: 1,
                                                  decay: 1,
                                                  parameters: {
                                                               ajax: 1,
                                                               pidFile: '<?php echo basename($pidFile) ?>'
                                                             },
                                                  onFailure: function(){ this.stop(); }
                                                });
            setTimeout('updater.stop()', 15000);
        </script>
    <?php
        }
    ?>
</html>
<?php
if(isset($_POST['submitted'])){
    // get the size of the output
    $contentLength = ob_get_length();

    // these headers tell the browser to close the connection
    // once all content has been transmitted
    header("Content-Length: $contentLength");
    header('Connection: close');

    // flush all output
    ob_end_flush();
    ob_flush();
    flush();

    /******** background process starts here ********/
    for($i=1;$i<=10;$i++){
        if(fwrite($fh, "Executing step $i...\n") == false){
            print "failed to write to the file: " . error_get_last();
            exit;
        }
        sleep(1);
    }

    fwrite($fh, "Done!\n");
    sleep(2);

    fclose($fh);

    // delete the progress file
    unlink($pidFile);

}

Example 3 - include embedded PHP file

If you've separated the HTML from your main script, it's very easy to close the browser connection. Just capture the output from your include command, get the size of the content, and send the headers and content:

// capture output of include file in buffer
ob_start();
include '/path/to/your/content/file';

// get the size of the output
$contentLength = ob_get_length();

// these headers tell the browser to close the connection
// once all content has been transmitted
header("Content-Length: $contentLength");
header('Connection: close');

// flush all output
ob_end_flush();
ob_flush();
flush();

/******** background process code here ********/

Background Process

If your background process is vital and could take a lot of time, make sure to set these flags at the top of your script: 

ignore_user_abort(true);
set_time_limit(0);

ignore_user_abort(true) will prevent the script from halting if the user happens to push the browser's stop button before the connection is closed. set_time_limit(0) will prevent your script from being terminated if it surpasses the max_execution_time set in php.ini.

Related post: Close browser connection with Zend Framework

]]> http://www.zulius.com/how-to/close-browser-connection-continue-execution/feed/ 1