Using Ajax JavaScript via PHP and Sajax

For years, the goal of creating truly responsive Web applications has been hampered by a simple fact of web development: To change the information on one part of a page, users must overload the entire page. But it won't happen again. Thanks for asynchronous Java? Scripts and XML (Ajax), we can now request new content from the server side and modify only part of the page. This tutorial explains how to use Ajax for PHP and introduces the Simple AJAX Toolkit (SAJAX), a tool written in PHP that integrates server-side PHP with JavaScript.

Before you start

This tutorial is for people interested in developing rich Web applications, where rich Web applications combine asynchronous JavaScript with XML (Ajax) and PHP, so that users can dynamically update content each time they click without refreshing the entire page. This tutorial assumes that the reader understands basic PHP concepts, including if and switch statements, and the use of functions.

About this tutorial

In this tutorial, you will learn about Ajax and the issues surrounding its application. An AJAX application will be built in PHP to display the panels in a previously written tutorial. Clicking on the Panel link will only reload the content area and replace it with the contents of the selected panel, saving bandwidth and page loading time. The Simple AJAX Toolkit (SAJAX) is then integrated into an AJAX application that synchronizes the use of Ajax and simplifies development.

Overview

Before going deep, look at Ajax, sample PHP applications, and Sajax. Ajax

Ajax allows web developers to create interactive Web pages, while avoiding the need to wait for pages to load this bottleneck. An application created with Ajax allows you to replace the content of a particular area of a Web page with new content by simply clicking the button. What's wonderful about it is that you don't have to wait for the page to load, only the content of this area needs to be loaded. Take Google Maps As an example: You can click and move around the map without waiting for the page to load.

Problems with Ajax

There are things to be aware of when using Ajax. Ajax pages, like other Web pages, can be bookmarked, so it creates problems when you use Get and POST to make a request. The increase in the number of internationalization and coding schemes has made it increasingly important to standardize these coding schemes. These are important questions to be learned in this tutorial.

Sample PHP Application

First you create an application with Ajax and then create it with Sajax to show the benefits of using the toolkit. The application is part of a previously written tutorial with a panel link. It is used as an example to demonstrate the advantages of using Ajax. Because when clicked on each panel, they are loaded asynchronously without having to wait for the rest of the page to mount again. The sample application also shows how to create your own Ajax application.

Sajax

If you want to create an AJAX application, you don't want to be tired of the complexity of Ajax details. The answer is Sajax. By using libraries developed by Modernmethod people, Sajax abstracts the high-level details of Ajax for WEB developers. On the ground floor, Sajax works the same as Ajax. However, by using the high-level functions provided by the Sajax library, you can ignore the technical details of Ajax.

What is Ajax?

This section is an introductory introduction, using an example to explain the concept of Ajax, including what happens when you click on the link, and the HTML and JavaScript code that AJAX needs for your PHP application. The next section is a bit more in-depth and actually creates PHP applications using the Ajax concepts learned in this section.

Behind-the-scenes content

Ajax is a combination of asynchronous JavaScript and XML. Asynchronous, because you can click on the link on the page, and then it only loaded with the click of the corresponding content, while keeping the title or any other set of information does not move.

When you click on the link, the JavaScript function works behind it. JavaScript creates an object that communicates with a Web browser and tells the browser to mount a specific page. You can then browse other content on the same page as you normally would, and when the browser is fully loaded into the new page, the browser displays the content in the location specified by the HTML div tag.

CSS style codes are used to create links with span tags.

CSS Style Code

The sample application requires CSS code so that the span tag looks like using a regular anchor tag ( as the real link is created, it will be clicked like a real link.

Listing 1. Specify display information for span markers

...

These span tags are used in the sample application, and the colors match the colors used by links in all IBM developerWorks tutorials. The first line of the style tag specifies that the colors of the links you have visited remain unchanged. When the mouse is crossed, the cursor becomes a pointer, just like an ordinary anchor tag () the same. Now let's see how to create a link that uses this CSS style code.

Create a link that uses a span tag

The link to create in the "Build PHP Application" section will be used to communicate with the browser through JavaScript, telling the browser where to go and what to extract. Instead of traditional links that use anchor tags, they are created using span tags. The perception of span tags is determined by the CSS code in Listing 1. Here is an example:

The onclick handler specifies which script to run when this span is clicked. There are several other indicators similar to the onclick that can be used, including onmouseover and ondblclick. Notice that JavaScript function loadhtml is displayed in the onclick field instead of the traditional http://link or by listing panels-ajax.php? The relative link created. Next, learn the loadhtml function.

XMLHttpRequest objects

If you are using one of the Mozilla, Opera, or other browsers, you can use the built-in XMLHttpRequest object to dynamically get content. Microsoft's Internet Explorer browser uses another object that will be learned later. They are used in the same way, and support them, just adding a few lines of extra code.

The XMLHttpRequest object is used to retrieve page content through JavaScript. This code will be used later in the sample application, in conjunction with the ActiveXObject loadhtml function. See Listing 2 for usage.

Listing 2. Initializing and using the XMLHttpRequest object

...

function loadhtml (URL, destination) {
Dest = destination;
if (window. XMLHttpRequest) {
Request = new XMLHttpRequest ();
Request.onreadystatechange = Processstatechange;
Request.open ("Get", URL, True);