IBM - Using Ajax with PHP and Sajax (2005).pdf - Ajax - darekisap

Using Ajax with PHP and Sajax

How the Simple Ajax Toolkit can integrate your server-side PHP

with JavaScript

Skill Level: Intermediate

Tyler Anderson ( tyleranderson5@yahoo.com )

Freelance Writer

Stexar Corp.

18 Oct 2005

For years, the goal of creating a truly responsive Web application was hampered by

one simple fact of Web development: To change the information on part of a page, a

user must reload the entire page. Not anymore. Thanks to asynchronous JavaScript

and XML (Ajax), we can now request new content from the server and change just

part of a page. This tutorial explains how to use Ajax with PHP and introduces the

Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side

PHP with JavaScript that makes this work.

Section 1. Before you start

This tutorial is for those interested in developing rich Web applications that

dynamically update content using asynchronous JavaScript and XML (Ajax) with

PHP, without having to refresh entire Web pages with each user click. This tutorial

assumes basic PHP concepts, including the use of if and switch statements, and

functions.

About this tutorial

You will learn about Ajax, as well as issues surrounding its usage. You will also build

an Ajax application in PHP that will display panels of a section of a previously written

tutorial. Clicking on a panel link will reload only the content section and replace it

with the content of the selected panel, saving bandwidth and time loading the page.

Then you will integrate the Simple Ajax Toolkit (Sajax) into your Ajax application,

which will synchronize the use of Ajax, simplifying development.

Using Ajax with PHP and Sajax

Page 1 of 22

developerWorks®

ibm.com/developerWorks

Prerequisites

The following tools are needed to follow along:

Web server

Pick any Web server and operating system. Feel free to use Apache 2.X or the

IBM HTTPServer .

PHP

You can follow along without PHP, but if you are interested in interacting with

the sample application download PHP V5 .

Sajax

You will need Sajax . This is a single-file library of PHP functions used in this

tutorial.

Web browser

You will need a Web browser that supports JavaScript. These include Mozilla,

Firefox, Opera, and Microsoft Internet Explorer.

Section 2. Overview

Before diving in, let's meet Ajax, the sample PHP application, and Sajax.

Ajax

Ajax allows Web developers to create interactive Web pages without the bottleneck

of having to wait for pages to load. Through Ajax, you can create applications that,

with a click of a button, will replace content in one section of a Web page with totally

new content. The beauty of it is that you don't have to wait for the page to load,

except for the content to load for that single section. Take Google Maps, for

example: You can click and move the map around without having to wait for page

loads.

Issues with Ajax

There are things to watch out for when using Ajax. Like any other Web page, Ajax

pages are bookmarkable, which can create problems if requests are done with GET

vs. POST . Internationalization and the rising number of encoding schemes makes

standardizing these encoding schemes increasingly important. You will learn about

these important issues in this tutorial.

Using Ajax with PHP and Sajax

Page 2 of 22

ibm.com/developerWorks

developerWorks®

The sample PHP application

You will create an application first in Ajax, then in Sajax to show the benefits of using

this tool kit. The application is a section of a previously written tutorial with panel

links. It will be used as an example to show you the advantages of using Ajax.

Because as you click through the panels, they load asynchronously without having

to wait for the rest of the page to load again. This sample application will also serve

as an example to show you how to create your own Ajax applications.

Sajax

Say you want to create an Ajax application without having to worry about the

intricate details of Ajax. Sajax is the answer. Sajax abstracts away from you, the

Web developer, the high-level details of Ajax through the use of a library developed

by the folks at ModernMethod. Deep down, Sajax works the same as Ajax. However,

the technical details of Ajax can be ignored through the use of higher-level functions

provided in the Sajax library.

Section 3. What is Ajax?

This section is a primer that will explain, with examples, the concepts of Ajax,

including what happens when you click a link, and the HTML and JavaScript code

needed for an Ajax with PHP application. The next section, Building the PHP

application , will go deeper into actually creating the PHP application using the Ajax

concepts you will learn in this section.

Behind the scenes

Ajax is a combination of asynchronous JavaScript and XML. It is asynchronous

because you can click a link on the page, and it will load only the content

corresponding to the click, leaving the header or any other desired information the

same.

A JavaScript function is put to work behind the scenes when you click a link. This

JavaScript function creates an object that communicates with the Web browser and

tells the browser to load a specific page. You can then browse other content on the

same page as normal, and when the new page gets completely loaded by the

browser, the browser will display the content at a location specified by an HTML div

tag.

CSS style code is used to create links with span tags.

Using Ajax with PHP and Sajax

Page 3 of 22

developerWorks®

ibm.com/developerWorks

The CSS style code

The CSS code is needed by the sample application so the span tags will appear as

real links created using a conventional anchor ( <a href=... > ) tag and will be

clicked as real links.

Listing 1. Specifying display information for span tags

...

span:visited{ text-decoration:none; color:#293d6b; }

span:hover{ text-decoration:underline; color:#293d6b; }

span {color:#293d6b; cursor: pointer}

</style>

These span tags are used in the sample application, and the color conforms to that

used for links on all IBM developerWorks tutorials. The first line within the style tag

specifies that when the link has been visited, the color will remain the same.

Hovering over it will underline it, and the cursor will turn into a pointer, just like using

regular anchor tags ( <a href... > ). Let's take a look at how to create links that

refer to this CSS style code.

Creating links using the span tag

The links you will create in the Building the PHP application section will be used to

communicate to the browser through JavaScript what content to go and fetch. They

are not traditional links using anchor tags, but they are created using span tags. The

look and feel of the span tag is determined by the CSS code in Listing 1. Here is an

example:

<span onclick="loadHTML('panels-ajax.php?panel_id=0',

'content')">Managing content</span>

The onclick handler specifies which script to run when this span tag is clicked.

There are several other specifiers similar to onclick you can experiment with,

including onmouseover and ondblclick . Notice the JavaScript function,

loadHTML , is shown instead of a traditional http:// link or a relative link created

by listing panels-ajax.php? in the onclick field. You will learn about the

loadHTML , function next.

The XMLHttpRequest object

Using Ajax with PHP and Sajax

Page 4 of 22

ibm.com/developerWorks

developerWorks®

If you are using Mozilla, Opera, or another browser in one of these genres, content

will be dynamically fetched using built-in XMLHttpRequest objects. Microsoft's

Internet Explorer browser uses a different object, which you will learn about next.

They are used in essentially the same way, and providing support for both is only a

matter of adding a few extra lines of code.

The XMLHttpRequest object is used to retrieve page content in JavaScript. You

will use this code later in the sample application, along with the appendages to the

loadHTML function that covers the ActiveXObject . See Listing 2 for usage.

Listing 2. Initializing and using the XMLHttpRequest object

...

<style>

var request;

var dest;

function loadHTML(URL, destination){

dest = destination;

if(window.XMLHttpRequest){

request = new XMLHttpRequest();

request.onreadystatechange = processStateChange;

request.open("GET", URL, true);

request.send(null);

}

</script>

...

The destination variable, passed as a parameter in Listing 2, communicates

where the content loaded by the XMLHttpRequest object will go, denoted by a

<div id="content"></div> tag. Then the code checks whether the

XMLHttpRequest object exists, and if it does, it creates a new one. Next, the event

handler is set to the processStateChange function, which is the function the

object will call on each state change. The rest of the request is setup using the open

method that passes in the type of transfer, GET , and the URL that the object will

load. The object is finally put to action by calling its send method.

The ActiveXObject

The ActiveXObject is used in place of the XMLHttpRequest object in Internet

Explorer. Its function is identical to that of XMLHttpRequest , and even its function

names are the same, as you can see in Listing 3.

Listing 3. Initializing and using the ActiveXObject

Using Ajax with PHP and Sajax

Page 5 of 22

IBM - Using Ajax with PHP and Sajax (2005).pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: