[prog] Passing POST data to embedded object with PHP

Sat Sep 30 09:56:36 UTC 2006

On Thu, Sep 28, 2006 at 10:53:25PM +0000, Conor Daly wrote:
> Hi All,
> 
> I'm trying to embed a php-generated webpage within another php-generated
> webpage using the <object data=...> tag.  I generate a <form method=post... </form>
> set within the wrapper page with a number of variables within.  When the
> submit is clicked, I want to generate an 
> 
> <object data="my target php script"> 
> 
> tag and pass the POST data to the target php script.  I can pass GET data
> easily in the URL but I'm stumped with regard to the POST data.
> 
> Given that the php script(s) I want to embed use POST rather than GET and
> there are many of them and I don't want to rewrite them for GET, is there
> any easy way to feed them?

Hi Conor,

I don't think there's a way to pass parameters to an <object> URI via
POST.  However, if you're not worried about requiring the person in
front of the browser to enable Javascript, you might utilise the
XMLHttpRequest object to achieve something comparable (at least if
I've understood correctly what you need to do...).

XMLHttpRequest [1] is one of the cornerstones the recent AJAX hype is
built upon.  In a nutshell, it allows you to access the HTTP-client
functionality of the browser from any client-side javascript code.
I.e., you can make POST requests (among other things) to retrieve
whatever content you want, which you can then place somewhere into the
DOM tree of the HTML page (thus changing the content without a full
reload of the page).

The example code below shows how you might go about to embed dynamic
URIs which expect to have parameters POSTed to them (this is the code
that would be emitted by the PHP that you submit your <form> to).
Instead of letting the browser retrieve the <object>'s data during
its initial page load cycle, you simply put placeholders with unique
IDs in your HTML code.  Once the page is loaded, an onLoad() handler
triggers further HTTP requests (asynchronous, via XMLHttpRequest()),
which then fetch the content to be embedded.  To be able to control
what goes where, you need the just mentioned IDs. That's essentially it.

What you'd have to adapt are the makeRequest() function calls within
the functions load_obj*().  makeRequest() takes four arguments:

(1) HTTP method -- 'POST' in your case
(2) URL
(3) POST data   -- you need to specify it exactly as you would in a
                   GET request after the '?'
(4) target ID   -- the unique ID that you assigned to the HTML tag
                   that the response is meant to be placed into

In the example I'm using a table, and the HTML fetched via XMLHttpRequest()
is placed into the lower two cells. This is by no means a requirement.
You can use <div>, <span>, or whatever else you see fit...
Also, I've put additional "update" links on top of the embedded content
areas, to demonstrate that - thanks AJAX - parts of the page can be
refreshed without a full reload of the entire HTML.  You don't need
those, of course (except if you're wondering something along the lines
of "Why not somehow take advantage of one of key benefits of AJAX, now
that I'm using it anyway?"...)

A running version of the example is here:

http://cassini.homelinux.net/almut/xhr-demo.html

Anyone interested in playing around further can also download the
associated CGI script from there, which is being called via
XMLHttpRequest().  It essentially just echoes the parameters it
receives (handles both GET and POST requests).

Well, I guess the code is more or less self-explanatory... at least,
I hope so ;)  If not, just shout, and I'll try to give a more detailed
explanation.

Cheers,
Almut

[1] http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest

----- example -----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>XMLHttpRequest() - Demo</title>
  <script type="text/javascript">
    <!--
    function makeRequest(method, url, data, target_id) {

        var xhr = new XMLHttpRequest();
        if (!xhr) {
            alert('Cannot create XHR instance');
            return false;
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {    // completed?
                if (xhr.status == 200) {  // OK?
                    var s = xhr.responseText;
                    updateHTML(target_id, s);
                } else {
                    alert('XHR request failed.');
                }
            }
        }
        xhr.open(method, url, true);
        xhr.send(data);
    }

    function updateHTML(id, val) {
        var elem = document.getElementById(id);
        elem.innerHTML = val;
    }

    function load_obj1() {
        makeRequest('POST', '/cgi-bin/echo-params.pl', 'var1=val1&var2=val2', 'obj1');
    }
    function load_obj2() {
        makeRequest('GET',  '/cgi-bin/echo-params.pl?var3=foo&var4=bar&var5=baz', null, 'obj2');
    }

    function load_embedded_objs() {
        load_obj1();
        load_obj2();
        // ...
    }

    //-->
  </script>
  <style type="text/css">
      td { background-color: #d0d0d0; vertical-align: top; padding: 8px }
  </style>
</head>

<body onLoad="load_embedded_objs()">
  <table cellspacing="20">
    <tr>
      <td> <a href="javascript:load_obj1()"><b>update</b></a> </td>
      <td> <a href="javascript:load_obj2()"><b>update</b></a> </td>
    </tr>
    <tr>
      <td id="obj1">loading...</td>
      <td id="obj2">loading...</td>
    </tr>
  </table>
</body>
</html>