Develop end-to-end Ajax applications, Part 1: Set the Ajax environment in one scenario

Source: Internet
Author: User
Tags ibm db2 mysql code php debug php web server representational state transfer soap client windows x86 websphere application server
Ajax (Asynchronous JavaScript + XML) is rapidly becoming a fashionable technology that can be used for Web applications running in browsers. ProgramProvides software features with desktop quality. Open source software (such as Linux-Apache-mysql-PHP, namely lamp) and Java 2 platform based on open standards, Enterprise Edition middleware (such as IBM WebSphere Application Server community Edition) it provides excellent support for developing and deploying Ajax web applications. This three-part series discusses how to use open source middleware to develop end-to-end Ajax applications. This is the first article in this series. Article. If you are a newbie in web development, you can read and understand what is written in XHTML, CSS, JavaScript, PHP, and SQL. CodeThis document is suitable for you. After reading this article, you will have a good understanding of the basic concepts of Ajax and the functions that AJAX may play in three-tier Web application scenarios.

Ajax is part of Web 2.0 technology and has recently received great attention from architects, developers, product managers, and Web application users. Ajax programming is composed of proven technologies, such as XHTML, JavaScript, CSS, and xml http Request (xhr ). Popular service access and data exchange technologies, such as representational state transfer (rest) and JavaScript Object Notation (JSON), are also very suitable for Ajax technology. These proven technologies on the client can be combined with open source technologies such as PHP, Python, and Ruby to extend ajax to the application development field in the middle layer. On this combination, you can also use the open source database MySQL to create a data layer.

Other technologies that match the Ajax programming technology include eclipse-based development tools that are open source and can be downloaded and used for free. All the clients, middle layers, and data layer technologies mentioned above are combined to form a powerful web application development technology combination. But how can we develop and deploy end-to-end Ajax applications? This three-part article series will help you answer this question by studying an end-to-end development scenario.

Typical enterprise-level Web applications need to deal with many factors to ensure high robustness. To learn the core features of the selected open source software, we do not consider security, scalability, availability, and other key enterprise-level features. You should learn these features from other materials. All the discussions in this article are only applicable to the Ajax applications described in our scenario. Specifically, this series details how to create a MySQL database, design and develop the middle layer/database logic in the PHP runtime environment, and then create a real single-page Ajax client interface using JavaScript. This series contains sample code, describes the steps required to develop and test Ajax applications in eclipse, and explains how to develop and test Ajax applications in Firefox (client), Zend PHP (middle layer), and MySQL (data layer). This end-to-end application involves the comprehensive application of XHTML, CSS, JavaScript, xhr, Dom, rest, soap, JSON, XML, PHP, MySQL, and eclipse, it involves many built-in features of the open source platform mentioned above. In short, this series describes how to properly isolate application layers to form clean and elegant web applications.


As the title points out, this three-part series will detail some core functions of developing end-to-end Ajax applications. These features include specific technologies in the following three application layers:

    • Client
    • Middle Layer
    • Data Layer

The client contains technologies such as XHTML, CSS, JavaScript, and xml http Request (xhr. In addition to the several middle-layer open source technology mentioned above, this series also uses PHP, because PHP is very simple and widely used at present. Use the MySQL database in the data layer. In addition, this series uses popular web service technologies such as rest, soap, JSON, and XML. We will use all these technologies in one scenario.

To develop end-to-end Ajax applications, follow the steps in the following sections to install and configure the runtime environment and development environment. Then, instead of providing the Hello world application as usual, we analyze a complicated banking scenario. This scenario explains how to use all the technologies mentioned above in a fictitious banking environment, it involves the back-end databases of banks, browser-based bank customer portals, and a real third-party financial web service.

Required software packages

To develop and deploy banking scenarios that span all three application layers, you need to select Software for the following components in these layers:

    • Web Browser
    • Database Server
    • Web Server
    • Intermediate layer server
    • IDE for middle-Layer Code Development
    • IDE for client code development

There are many open source software that can meet the needs of each layer. The following software is used in this series:

Web Browser:Mozilla Firefox or later. Firefox has many advantages, including availability, online security, and customization through a large number of extended applications. You also need to use firebug, which is a browser application debugger extension of Firefox.

Database Server:MySQL 5.0.41 or later. MySQL adopts the Client/Server mode and embedded mode. It is completely written in C and C ++. It has two versions: Enterprise Server and Community Server. The Community Server is free and sufficient to meet the needs of the banking scenario in this article.

Web Server:Apache Web Server 2.2.2. Apache allows flexible configuration and can be expanded using third-party modules.

Intermediate layer server:Zend core 2.0.1 or later. This free open source server supports PHP 5. It gets powerfulCommunityYes. It includes an Apache web server and supports databases such as MySQL, IBM DB2, and Oracle. Zend core for IBM is specially tuned for IBM DB2. Figure 1 shows the overview of Zend core.

Integrated Development (Environment ):Eclipse PDT 0.7 RC3 or later. PDT is a PHP development tools framework for the eclipse platform. It contains all development components required for developing PHP applications. PHP debugging is also supported in this IDE. Zend, IBM, and other companies donate it to the open source code campaign. At the time of writing this article, it just appeared and is suitable for developing the intermediate layer logic of our banking scenario.

Client ide:Aptana web ide or later. This is a free open-source cross-platform JavaScript-centered development environment that can be used to develop Ajax browser applications. It provides encoding support for Javascript, HTML, and CSS. It supports JavaScript debugging and has built-in support for several Ajax frameworks. In addition, it is based on Eclipse.

Install and set up these open source software packages according to the steps in the following sections to establish an environment for developing and deploying end-to-end Ajax applications. (Note: All installation and Development instructions in this article are for the Microsoft Windows operating system .)

Figure 1. Zend core Overview

Install Mozilla Firefox

Follow these steps to install Mozilla Firefox:

  1. Create a temporary directory named c: \ temp \ DW-Ajax. All the installation files of different software packages can be stored here.
  2. Download Mozilla Firefox or later from Mozilla URL in reference section, and save it to c: \ temp \ DW-Ajax.
  3. Install Mozilla Firefox by running the file downloaded in Step 1:
    1. In the Mozilla Installation Wizard, clickNext.
    2. Accept the license agreement and clickNext.
    3. SelectCustomAnd clickNext.
    4. Make sure you selectDom inspectorAndQuality feedback agentAnd clickNext.
    5. Accept the default installation folder and clickNext.
    6. Make sure that you do not select the first two options (On my desktopAndIn my Start Menu programs folder).
    7. After installation, make sure to selectLaunch Mozilla Firefox now.
    8. ClickFinish.
    9. If you want to make Mozilla Firefox the default browser, selectYes.
    10. Start the Firefox browser and access the Mozilla Firefox URL in reference.
    11. ClickAdd-ons.
    12. In the search box of the Firefox Web site, enterFirebugAnd clickSearch.
    13. In the search result, clickFirebug.
    14. ClickInstall nowIn the displayed dialog box, clickInstall now.
    15. ClickRestart Firefox.
    16. In Firefox, clickTools> firebug> open firebug.
    17. If you see a message indicating that firebug is disabled at the bottom of the browser window, clickEnable firebug.
    18. Close the Firefox browser.

Install MySQL

Follow these steps to install the MySQL database server:

  1. Access the MySQL URL in the references section.
  2. ClickMySQL Community Server. (In this case, it is generally directly transferred to the currently recommended ga version .)
  3. Download 5.0.41 or later windows (x86) Zip/setup. EXE and store it in the C: \ temp \ DW-Ajax directory. (This. ZIP file only contains one file, which is an executable Installation File For MySQL .)
  4. Extract the executable MySQL installation file from the. ZIP file and store it in the C: \ temp \ DW-Ajax directory.
  5. Run the executable file (setup.exe) extracted in Step 1 ):
    1. ClickNext.
    2. Select the installation typeCompleteAnd clickNext.
    3. ClickInstall.
    4. SelectSkip sign-upAnd clickNext.
    5. Make sure you selectConfigure the MySQL server nowAnd clickFinish. MySQL server instance Configuration Wizard is started.
    6. ClickNext.
    7. SelectDetailed ConfigurationAnd clickNext.
    8. SelectDeveloper MachineAnd clickNext.
    9. SelectSelect multifunctional databaseAnd clickNext.
    10. ForInnoDB tablespace settings, Accept the default options, and clickNext.
    11. SelectDemo-support (DSS)/OLAPAnd clickNext.
    12. Make sure you selectEnable TCP/IP networkingAndEnable strict ModeOption and clickNext.
    13. SelectStandard Character SetAnd clickNext.
    14. Make sure you selectInstall as Windows ServiceAndInclude bin directory in Windows pathOption and clickNext.
    15. Enter a New Root PasswordWebtechAnd clickNext.
    16. ClickExecute.
    17. ClickFinish.

Install Apache Web server and Zend core PHP server

Zend Technologies Ltd provides Zend core for free. It contains the Apache Web server. Follow these steps to install the Apache web server and Zend core PHP server.

To download Zend core for free, you must register it on the Zend web site. If you have not yet registered, visit the Zend core URL in the references and register it.

  1. After registering on the Zend web site, visit the Zend core URL in references and log on to the download area.
  2. SelectAgree to EULACheck box and clickSubmit.
  3. In the Zend core generic section, download Zend core windows x86 (version v2.0.1 or later) and save the. ZIP file in the C: \ temp \ DW-Ajax directory. (This. ZIP file only contains one file, which is the executable Installation File of Zend core .)
  4. Extract the executable Zend core installation file from the. ZIP file and store it in the C: \ temp \ DW-Ajax directory.
  5. Run a ZendCore-v2.0.1-Windows-x86.exe or a later version:
    1. ClickNext.
    2. Accept the license agreement and clickNext.
    3. Select the installation typeCompleteAnd clickNext.
    4. SelectSkip sign-upAnd clickNext.
    5. Accept the default target location and clickNext.
    6. SelectInstall bundled Apache 2.2.2And clickNext.
    7. Accept the default port number 80 and clickNext.
    8. Accept the default extension Association and clickNext.
    9. Enter the Console PasswordWebtechAnd clickNext.
    10. Make sure to set Zend network registryNoAnd clickNext.
    11. ClickInstallStart the installation and wait for Zend core to complete the installation. After the Zend core file is copied, the installer installs the releasable version of Microsoft Visual C ++. After that, the Zend core installer stops running and a message dialog box containing the Zend core administration URL is displayed.
    12. ClickOKClose the message dialog box.
    13. ClickFinishClose the installation completion dialog box.
    14. Go to the C: \ Program Files \ Zend \ apache2 \ bin directory on the computer and double-clickApachemonitorProgram. Apache monitor appears on the taskbar as a panel icon. You can use this panel icon to start and stop Apache and Zend servers.
  6. Configure Zend core:
    1. On the Windows Start menu, selectPrograms-> Zend core Administration Console.
    2. Enter PasswordWebtech.
    3. ClickConfigurationTab (see figure 2 ).
    4. ClickExtensionsTab.
    5. Go to listCurl-curlClick the Red Circle in the enable/disable column to make the Red Circle green.
    6. Go to listMysqli-mysql improvedClick the Red Circle in the enable/disable column to make the Red Circle green.
    7. ClickSave settings.
    8. ClickLogout.
  7. Click the Apache panel icon in the taskbar and selectApache2 HTTP server-> restart.

Figure 2. Zend core configuration screen

Install eclipse's php development tool (PDT)

At the time of writing this article, PDT is only a candidate plug-in. It is not a fully released eclipse Platform Plug-in. Perform the following steps to install and configure eclipse PDT. (PDT can be obtained from both eclipse and Zend web sites. The Zend web site provides the same version as the eclipse web site, but adds the Zend PHP debugging tool .)

  1. Visit the eclipse PDT download page on through the link in the references section.

    1. Download version 0.7 RC3 or later, and store the. ZIP file in the C: \ temp \ DW-Ajax directory. (For example,Pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zipOr later .)
    2. If you want to install a PDT version outside of the pdt-0.7.0.S20070401-RC3, replace the correct version number in the following steps and change the Zend debugger directory name in Listing 1.
  2. Decompress the eclipse pdt zip file to c: \ (for example,Unzip.exe c :\. This should create a directory called c: \ eclipse, which contains the PDT file .)
  3. Create an eclipse workspace directory (for example,MD c: \ eclipse \ Workspace).
  4. Use the MySQL database to configure PDT:
    1. Visit the MySQL PHP connector web site through the link in the reference section.
    2. ClickMysqliExtension (PhP 5.2.0) link.
    3. Download the. ZIP file (for example,Php_5.2.0_mysqli_5.0.27-win32.zipIn the c: \ temp \ DW-Ajax directory.
  5. Decompress the. ZIP file to the C: \ eclipse \ plugins \ org. Zend. php. Debug. Debugger. win32.x86 _ 0.1.7 \ resources \ PhP5 directory (Unzip.exe c: \ eclipse \ plugins \ org. Zend. php. Debug. Debugger. win32.x86 _ 0.1.7 \ resources \ PhP5).
  6. Edit c: \ eclipse \ plugins \ Org. zend. PHP. debug. debugger. win32.x86 _ 0.1.7 \ resources \ PhP5 \ PHP. INI file, replace all the content in this file with the content in Listing 1. Make the following changes and save the file:
    1. After replacing the content of the php. ini file, merge the first two lines in the [Zend] section as follows:Extension_dir = c: \ eclipse \ plugins \ org. Zend. php. Debug. Debugger. win32.x86 _ 0.1.7 \ resources \ PhP5
    2. If necessary, modify it according to the Zend debugger directory name in eclipse installation.
  7. Go to the C: \ eclipse directory and enterEclipse.exeTo start eclipse.
  8. In the workspace launcher dialog box, change the workspace to c: \ eclipse \ workspace and clickOK.
  9. Close the welcome tab in Eclipse IDE.
  10. In Eclipse IDE, selectWindow-> open perspective-> Other, SelectPHPAnd clickOK.
  11. In the lower left corner of IDE, selectPHP FunctionsView. Make sure that you can see the list of built-in PHP library functions.
  12. In eclipse, clickWindow-> preferences:
    1. Expand and selectPhp-> debug.
    2. SelectBreak at first lineCheck box and clickApply.
    3. On the same PHP debug page, selectDebug optionsIn SectionPHP servers....
    4. In the list, selectDefault PHP Web ServerAnd clickEdit.
    5. SelectPublish projects to this serverCheck box.
    6. In the Directory domain, browse c: \ Program Files \ Zend \ apache2 \ htdocs and clickOK. (See figure 3 .)
    7. ClickOK.
    8. Click againOKClose the preferences dialog box.
  13. SelectWindow-> Web browser-> Firefox.

Listing 1. Content of the php. ini file

; Remember to merge the first two lines below the [Zend] section; To appear in one line .; otherwise, eclipse PDT (PhP Development Tool) will not work properly .; if needed, modify it with the correct Zend debugger directory name; as in your eclipse installation. [Zend] extension_dir = c: \ eclipse \ plugins \ Org. zend. PHP. debug. debugger. win32.x86 _ 0.1.7 \ resources \ PhP5 export de_path = ". "extension = php_mysqli.dll zend_extension_ts =. \ zenddebugger. DLL zend_debugger.allow_tunnel = zend_debugger.allow_hosts = zend_debugger.expose_remotely = always

Figure 3. Eclipse PDT Configuration

Install Aptana web ide

To install Aptana web IDE, you only need to add a plug-in to the eclipse PDT installed earlier. When writing this article, the Aptana web ide version is Follow these steps to install the latest version of Aptana web ide required for Ajax development:

  1. in the Help menu of Eclipse, select Software Updates-> Find and install... , which opens the install/update pop-up window.

    1. In the install/update dialog box, select search for new features to install and click next .
    2. to set up a new remote update site, click new remote site... to open the new update site pop-up window.
    3. in the new update site dialog box, enterAptanaIn the site name text box.
    4. in the URL text box, enter the URL of the Aptana Update site: click OK .
    5. click finish to open the updates window.
    6. In the updates window, select the Aptana update check box and click next .
    7. accept the terms of the license agreement and click next .
    8. click finish .
    9. If the feature verification dialog box appears, select install all .
    10. if you are prompted to restart eclipse, click Yes to restart eclipse.
  2. In Eclipse IDE, selectWindow-> open perspective-> Other, SelectAptanaAnd clickOK. If the Aptana perspective is displayed, the installation is complete.

If all operations are normal so far, you have already set up a complete Eclipse IDE, which can be used to develop, test, and debug the artifacts of the banking scenario application, for example, XHTML, JavaScript, xhr, PHP, and MySQL code. You can also configure Eclipse IDE to use the Zend core PHP server. The efficient combination of eclipse and Zend core can meet all Ajax development and deployment requirements. Now, let's consider a complicated scenario. We will develop and deploy this scenario in this powerful environment.

Ajax and PHP-based scenarios

Figure 4 describes a complex scenario that provides some banking-related functions in an Ajax-PHP environment. This scenario introduces some technical components and divides them into the following layers based on the traditional architecture:

    • Client
    • Middle Layer
    • Data Layer

On the client side, browser-based controls are used in this scenario. These controls are enabled through single-page XHTML user interface elements and xhr and JSON. In the middle layer, it uses PHP technology, such as simplexml, services_json, HTTP request processing program, and PHP soap client. On the data layer, it uses SQL and ODBC.

You can also divide the scenario based on the technical components of the application:

    • Browser
    • PHP server
    • PHP Web service client
    • Database Server
    • . Net-based third-party web services residing on the Internet

We can see that this scenario meets the basic and important factors of the Ajax environment. Among the many technical solutions, we will select a special implementation method to help you get as much gains as possible from this scenario. The overall design goal is not to complicate the scenario, so unnecessary flashy screens are not provided on the client. I hope that you can more easily understand the details involved in developing and deploying various scenario artifacts in Eclipse IDE (PDT and Aptana) and Zend core. In addition, this scenario also uses a PHP Web service client to access a. Net-based Real Web Service residing on the Internet to demonstrate interoperability. To focus on the core features of the selected open source software, this scenario does not consider security, scalability, and availability features-You should learn these features from other sources.

Figure 4. Banking scenarios

Scenario details

When reading the following sections, refer to figure 4 to understand the details of the scenario. This scenario mainly implements several common bank cashier functions in the Ajax and PHP environments. This section describes the modules that constitute this scenario.

Bank data (MySQL)-Data

Bank Customer information is stored in a database table. I will create this table in the MySQL database. It is a compact but powerful community edition server. For this series of scenarios, all customer data will be simultaneously filled in the database table. After that, you can use the ODBC driver provided by Zend core to obtain and update the stored customer data. The type of database access (such as reading or writing) is determined based on the nature of the bank cashier's function.

Banking logic function (PHP Code)-Model

Now, consider the core banking logic required to provide the bank cashier function. In this scenario, the following bank cashier functions must be supported:

    • Obtain the account information of all customers in the bank.
    • Deposits in a specific account.
    • Withdraw money from a specific account.
    • Provides sorted asset reports for specific accounts.

Because these four functions require access to the database, you must create a PHP file to provide the required database functions. It isolates the database functions from the logic of other middle layers. By providing core bank cashier functions in this way, all callers of these functions can be provided with database results packaged in a consistent manner. A PHP associated array is used to pass the results of the core banking logic.

Bank portal user interface (Ajax)-View

Now, we want to provide a bank cashier with a user interface to execute four core functions. You can access the core banking logic encapsulated in PHP code through the fat client or thin client. This scenario is used to develop a single-page Ajax browser user interface for bank cashier.

When using PHP on the middle layer, a common practice is to use PHP code to output the necessary XHTML, CSS, and JavaScript. In this scenario, we do not need PHP code to output any client user interface code. This means that all code associated with the bank portal is provided only when the client starts. We will use XHTML and CSS to write all user interface elements and JavaScript to write client logic. These artifacts (XHTML, CSS, and JavaScript) generate all user interface elements to meet the needs of the Bank portal in the banking scenario. This means that the Apache Web Server only needs to pass the client User Interface content to the browser once. This one-time code transfer process occurs when a bank cashier accesses the URL of this application. After that, the Bank portal client only communicates with the server to exchange data, rather than to obtain the XHTML, CSS, JavaScript, and other content.

This abandons the traditionalClick and waitIn the traditional example, for each user operation, the browser will communicate with the intermediate layer server to download the content. One of the outstanding features of a single-page Ajax application is that it downloads the content once at startup and does not need to retrieve the page from the server. After the startup, the single-page Ajax client application communicates with the logic of the intermediate layer server, only for the unique data exchange of the application. Therefore, the middle layer logic is more compact. It only focuses on the business logic and does not have to bear the responsibility for passing content to the browser. This method can better isolate the application layer and generate a clean and elegant web application design.

Bank actions module (PHP Code)-Controller

After discussing the browser user interface, we should consider how to perform the bank operations selected by the bank cashier through the network. In this scenario, the Bank Action Command selected by the cashier and the required input data are sent to a PHP code module, which serves as a browser and (described in the previous section) proxy/intermediary between core banking logic in the PHP module. The bank actions PHP module supports calling the service functions in the middle layer in the rest style. The bank actions PHP module receives the bank teller Action Command and calls the bank logic PHP module to obtain the required results. Call the appropriate banking logic to access the database and obtain results. After the bank logic module returns the result, the Bank actions module sends the result to the browser in JSON format. In short, the Bank actions PHP module is the Scheduler for bank cashier requests, which calls the appropriate bank logic function to process these requests.

XML Web Service client (soap access to. Net services from PhP) -- helper

In addition to acting as a proxy/intermediary, the Bank actions PHP module is also used as a PHP Web Service soap client, which can obtain the value of the current stock in the portfolio of specific customers. This helps you learn how to use PHP to generate Web service clients. In this scenario, the Bank actions PHP module calls the soap xml Web Service for a real remote Web Service Running on the Internet. This Web Service is a. Net-based Web Service, which allows you to understand the interoperability features of PHP. You will also learn how to use PHP simplexml API for XML parsing.

Now, you should have a clear understanding of the high-level design objectives of this scenario. This overview should be sufficient to help you develop, test, integrate, and deploy core modules in banking scenarios.

Main scenario tasks

In part 2 and Part 2 of this article series, we will execute the following tasks to complete this scenario and make it runable, it also explains how to develop it in Eclipse IDE and the underlying technology for deploying it in Zend core:

    • Task 1: Create a database table to save the bank customer account information.
    • Task 2: Create a PHP code module to execute necessary business logic and database calls.
    • Task 3: Create XHTML and CSS artifacts to provide a single-page Ajax Web user interface.
    • Task 4: Create a javascript module that contains all client logic and asynchronous communication logic for data exchange with the server.
    • Task 5: Create a PHP code module that contains the Web Service soap client code for a remote stock quote web service.
    • Task 6: Create a PHP code module that serves as a rest service and forwards calls to the business logic in the other two PHP files.
    • Task 7: integrate all the artifacts and deploy and run the Ajax solution created for the banking scenario.


Simple and low-cost Web platforms have become popular among users around the world. In particular, the open source eclipse tool and Zend core provide a great deal of functionality, allowing organizations to consider migrating from a proprietary platform like the. NET environment to an open source platform. For these customers, the software provides an excellent zero-cost development and deployment environment that can coexist with existing proprietary infrastructure. In part 1 of this series, you will experience real and interesting Ajax-php development. Before learning Part 1, familiarize yourself with the features of eclipse PDT, Aptana plug-ins, and Zend core runtime.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.