Docstoc

Ajax Tips - Writing JavaScript by Using Ajax Frameworks - Sajax and PHP

Document Sample
Ajax Tips - Writing JavaScript by Using Ajax Frameworks - Sajax and PHP Powered By Docstoc
					                                    Chapter 7
     Server-Side Ajax Frameworks
In This Chapter
  Writing JavaScript with PHP and Sajax or Xajax
  Accessing Java with Direct Web Remoting (DWR)
  Building Web applications with Echo2
  Finding out about even more frameworks




           “H        m,” says the CEO, “all those JavaScript-oriented Ajax frameworks
                     are very nice — “

           “Great,” you say. “So we’re in business?”

           “Well, I have a question,” says the CEO. “As I was saying, those JavaScript–
           oriented Ajax frameworks are very nice, but you still have to develop the
           server-side code too.”

           “Sure,” you say, “unless you just want to fetch data from a simple data file.”

           “Aren’t there any Ajax packages that let you develop just the server-side code
           and automatically create the JavaScript for you?”

           “Glad you asked,” you say. “In fact, that’s what this whole chapter is all
           about.”




Writing JavaScript by Using
Ajax Frameworks
           Working with Ajax often means using JavaScript in the browser and a lan-
           guage like PHP or JavaServer Pages on the server. In earlier chapters, I show
           you Ajax packages that let you develop the browser-side part of the applica-
           tion. But some Ajax packages are designed to be used on the server — and
           they can write JavaScript for you. That’s what you see in this chapter.
214   Part III: Ajax Frameworks

                     Although some server-side frameworks are based on exotic server-side lan-
                     guages, most of the ones you see use the popular PHP (see Chapter 10 for
                     more on PHP) and Java languages, especially JavaServer Pages. Those are
                     the ones I stick to here, starting with Sajax. Note that many of the following
                     frameworks do much the same thing: let you work with Ajax by using server-
                     side programming. When you see how these packages work in this chapter,
                     you’ll know which one is right for you.



                     Sajax and PHP
                     Sajax is an Ajax framework (available for download from www.modern
                     method.com/sajax) that lets you create Ajax JavaScript on the server
                     by using various server-side languages.

                     How does Sajax work? You can use it on the server to create the JavaScript
                     that will support Ajax in your browser. Currently, Sajax lets you connect to
                     ASP, ColdFusion, Io, Lua, Perl, PHP, Python, and Ruby on the server.

                     For example, you can use it to create a JavaScript function in a Web page,
                     connecting that function to a PHP method on the server, which in turn han-
                     dles your data and then sends its data to another JavaScript function back
                     in the browser. So when the user opens the PHP page, Sajax generates all
                     the JavaScript to handle Ajax operations in the created Web page.

                     For example, take a look at the addition example, addem.php — available for
                     download from the Web site associated with this book — which appears in
                     Figure 7-1. When you enter two values and click the Calculate button, the
                     page uses Ajax to add the values on the server and display the result without
                     a page refresh.




       Figure 7-1:
      Using Sajax
           to add
        numbers.
                                   Chapter 7: Server-Side Ajax Frameworks        215
How does it work? In this example, addem.php, you start by including
Sajax.php:

 <?
      require(“Sajax.php”);
            .
            .
            .

Then you define a PHP function named addem to add two numbers (this is
the PHP function that will run on the server):

 <?
      require(“Sajax.php”);

      function addem($op1, $op2)
      {
        return $op1 + $op2;
      }        .
            .
            .
 ?>

You’ll be able to call this function from the JavaScript in a Web page, except
that you refer to it as x_addem. In other words, if you define a PHP function
named addem, you can call it in JavaScript as x_addem by using Sajax.

Next, set up Sajax by calling sajax_init, and export the addem function:

 <?
      require(“Sajax.php”);

      function addem($op1, $op2)
      {
        return $op1 + $op2;
      }

      sajax_init();
      sajax_export(“addem”);
            .
            .
            .
 ?>

Exporting the addem function means that you’ll be able to access the addem
function in JavaScript (as x_addem). Finally, the code calls the sajax_
handle_client_request method to connect the addem function to Sajax
and start setting up the JavaScript that will appear in the browser:
216   Part III: Ajax Frameworks


                 <?
                      require(“Sajax.php”);

                      function addem($op1, $op2)
                      {
                        return $op1 + $op2;
                      }

                      sajax_init();
                      sajax_export(“addem”);
                      sajax_handle_client_request();

                 ?>

                Sajax generates much of the JavaScript needed in this example, and it does
                that with the PHP function sajax_show_javascript, which you execute by
                using PHP inside an HTML <script> element so the generated JavaScript
                will be inside that <script> element:

                 <script>
                   <?
                     sajax_show_javascript();
                    ?>
                          .
                          .
                          .

                This example also includes the HTML for the controls you see in Figure 7-1:
                three text fields and a button. The text fields for the two operands to add are
                named op1 and op2, and the text field where the answer will appear is named
                result.

                      <body>
                        <center>
                          <h1>Using Sajax to add numbers</h1>
                          <input type=”text” name=”op1” id=”op1” value=”7” size=”3”>
                          <br>
                                     +
                          <br>
                          <input type=”text” name=”op2” id=”op2” value=”8” size=”3”>
                          <br>
                             =
                          <br>
                          <input type=”text” name=”result” id=”result” value=”” size=”3”>
                          <br>
                          <input type=”button” name=”check” value=”Calculate”
                             onclick=”do_addem(); return false;”>
                        </center>
                      </body>
                                  Chapter 7: Server-Side Ajax Frameworks            217
Note that the button here is tied to a JavaScript function named do_addem,
which calls x_addem, the generated JavaScript function that connects back
to the PHP function addem on the server. When the user clicks the button to
perform the multiplication, the operands are read from the first two text
fields, and the x_addem function is called, which passes the operands to the
PHP function named addem back on the server.

 <script>
   <?
     sajax_show_javascript();
    ?>

    function do_addem()
    {
      var op1, op2;

      op1 = document.getElementById(“op1”).value;
      op2 = document.getElementById(“op2”).value;
      x_addem(op1, op2, show_results);
    }
 </script>

Note that the x_addem function not only passes the operands back to the
addem function on the server, but also takes the name of a JavaScript func-
tion that will be called with the results of the multiplication. In this example,
that callback function is named show_results, as you can see in the pre-
ceding code.

This callback function, show_results, is passed an argument from the PHP
addem function and displays it in the third text field, which is named result.
Here’s what the code looks like:

 <script>
   <?
     sajax_show_javascript();
   ?>

   function show_results(result)
   {
     document.getElementById(“result”).value = result;
   }

   function do_addem()
   {
     var op1, op2;

     op1 = document.getElementById(“op1”).value;
     op2 = document.getElementById(“op2”).value;
     x_addem(op1, op2, show_results);
   }
 </script>
218   Part III: Ajax Frameworks

                     As you can see, Sajax lets you create JavaScript on the server and tie that
                     JavaScript to server-side functions by using Ajax. Very cool. You might also
                     take a look at http://cyberdummy.co.uk/test/dd.php, which uses
                     Sajax for drag-and-drop operations.



                     Xajax and PHP
                     Xajax, which you can get for free at http://xajax.sf.net, is an Ajax
                     framework that lets you use server-side methods to create Ajax JavaScript for
                     use in a browser. Xajax uses PHP on the server, and you can get an idea about
                     how it works by taking a look at my handy addem.php example — available
                     for download from the Web site associated with this book — which will add
                     two numbers. You can see this example at work in Figure 7-2.




       Figure 7-2:
      Using Xajax
           to add
        numbers.



                     Much like the Sajax example in the preceding section, this Xajax example
                     uses a PHP function named addem, which adds the values passed to it and
                     assigns the result a variable named “result”. Here’s what the PHP code
                     looks like:

                      function addem($op1, $op2)
                      {
                        $objResponse = new xajaxResponse();
                        $objResponse->addAssign(“result”, “value”, $op1 + $op2);
                        return $objResponse->getXML();
                      }

				
DOCUMENT INFO
Description: This ebook talks about : ajax tutorial, ajax example, ajax framework, ajax sample, ajax scripts, wiki ajax, ajax guide, ajax for beginners, learning ajax, manual ajax, xml tutorial, php ajax, ajax download, ajax chat, and ajax tips. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ to download, click the link below : crawled.blogspot.com