Using Ajax with JavaScript via PHP and Sajax

For years, the goal of creating truly responsive web applications has been stymied by a simple fact of web development: to change information in one part of the page, the user must reload the entire page. But that won't happen anymore. Thanks to asynchronous Javascript 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 with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that integrates server-side PHP with JavaScript.

　　Before you begin

　This tutorial is for people who are interested in developing rich web applications. Rich web applications combine asynchronous JavaScript and XML (Ajax) with PHP so that the user does not have to refresh the entire page every time they click. , you can dynamically update the content. 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. You'll build an Ajax application in PHP that displays a panel from a tutorial you wrote earlier. Clicking a panel link simply reloads the content area and replaces it with the contents of the selected panel, saving bandwidth and page load time. The Simple Ajax Toolkit (Sajax) will then be integrated into the Ajax application, which can synchronize the use of Ajax, thereby simplifying development.

　　Overview

　Before we dive in, take a look at Ajax, a sample PHP application, and Sajax. Ajax

　Ajax allows web developers to create interactive web pages while avoiding the bottleneck of having to wait for the page to load. Applications created with Ajax can replace content in an area of ​​a Web page with entirely new content at the click of a button. The wonderful thing 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, for example: you can click and move the map around without having to wait for the page to load.

　Ajax Problems

　 There are some things you need to pay attention to when using Ajax. Like other web pages, Ajax pages can be bookmarked, which can cause problems when making requests using GET and POST. Internationalization and the increase in the number of encoding schemes make it increasingly important to standardize these encoding schemes. In this tutorial you will learn about these important issues.

　Sample PHP Application

　 An application will be created first with Ajax and then with Sajax to demonstrate the benefits of using this toolkit. The application is part of a previously written tutorial with a link to the panel. It is used as an example to demonstrate the advantages of using Ajax. Because as you click on individual panels, they load asynchronously without having to wait for the rest of the page to load again. This 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 burdened by the complicated details of Ajax. The answer is Sajax. Sajax abstracts away the high-level details of Ajax for web developers by using libraries developed by the folks at ModernMethod. Under the hood, Sajax works the same as Ajax. However, the technical details of Ajax can be ignored by using the high-level functions provided by the Sajax library.

　What is Ajax?

　This section is an introductory introduction, using examples to explain the concept of Ajax, including what happens when a link is clicked, and the HTML and JavaScript code required when Ajax is used in PHP applications. The next section will go a little deeper and actually create a PHP application using the Ajax concepts learned in this section.

　Under the hood

　Ajax is a combination of asynchronous JavaScript and XML. I say asynchronous because you can click on a link on the page, and then it only loads the content corresponding to the click, while leaving the title or any other set information intact.

　When you click a link, what works behind the scenes is a JavaScript function. JavaScript creates objects that communicate with the web browser and tell the browser to load a specific page. You can then browse other content on the same page as normal, and when the browser fully loads the new page, the browser will display the content at the location specified by the HTML div tag.

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

　CSS style code

　The sample application requires CSS code so that the span tag looks like a regular anchor tag (＜a href="http://www.php1.cn/">
　Listing 1. Specify Display information of span tag

...
＜style type="text/css"＞
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline ; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
＜/style＞