Quick introduction to Ajax development example (1)

In this article, you will build a simple AJAX (Asynchronous JavaScript and XML, Asynchronous JavaScript and XML ). This exercise is suitable for most readers who do not have the patience to start coding from ASAP, but suppose you are familiar with JavaScript, PHP, and XML.

You will create an AJAX Web application named quickstart. In this application, the user needs to enter his/her name, and the server returns a response in a timely manner during the user's filling process. Figure 1 shows the UI and index.html (note that index.html is loaded by default when a quickstart webfile is requested, even if the file name is not displayed ).

Figure 1

When a user inputs data, the user asynchronously contacts the server at a certain interval to check whether it can be identified at this time. The server is automatically called, about once a second. This means that we do not need to click the button (such as the Send button) after the input (this method may not be suitable for the actual login mechanism, but it does demonstrate some AJAX functions well ).

The server returns different information based on different input names. See the example in Figure 2.

Figure 2

At first glance, I thought there was nothing special. We deliberately make the first example easy to understand. The special feature of this application is to automatically display messages from the server without interrupting the user's actions (messages are displayed when the user enters the name ). Displaying the data does not require page re-loading, even if a server connection is established to obtain the data. Using non-AJAX Web development technology is not a simple task.

This application contains the following three files:

• 1. index.html is the initial HTML file requested by the user.
• 2. quickstart.jsis a file containing the javascriptcode and loaded with index.html on the client. When a server-side function is required, this file processes asynchronous requests sent to the server.
• 3. quickstart. php is a PHP script that resides on the server and Processes requests from JavaScript code in the quickstart. js file on the client.

Figure 3 shows the actions that occur when running the application:

Figure 3

Steps 1 to 5 are typical HTTP requests. After this request is made, the user needs to wait until the page is loaded. The XMLHttpRequest object server is accessed in the background. During this period, users can continue to use this page normally, just as it is a desktop program. You do not need to refresh or reload the data that is retrieved from the server and updated with the data.

Now it's time to implement this code on your own machine. Before you begin, make sure that you have prepared the work environment as shown in Appendix. Appendix A describes how to install and set up PHP and Apache, and how to install the database used in the example in this book (in this quickstart example, you do not need A database ).

Start action-Quickstart AJAX

In appendix A, you can create A Web server and create A Web folder named ajax. The code of this book is stored in this folder.

1. Create a subdirectory named quickstart under the ajax directory.

2. Create a file named index.html under quickstartdirectory and add the following code to the file:

Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> AJAX with PHP: Quickstart Server wants to know your name: