Construct an Ajax-driven Web page using jQuery and PHP (1)

Most PHP developers learn skills in old-fashioned ways. Generally, they first learn how to define and construct simple PHP pages, and then learn how to connect these pages to simple MySQL tables, so they can perform their own development. As their skills increase, they gradually learn how to create more complex PHP functions, connect tables in MySQL, and execute other advanced tasks.

In this process, they may also master some client skills to put Web applications into use. You may also learn about XHTML, CSS, and even some JavaScript programming knowledge. As the number of projects involved increases, they even have the opportunity to access Ajax to give your Web applications a Web 2.0 or "desktop" feel. However, if your first experience with Ajax is similar to mine, you may have done too much work-implementing various functions manually and creating an Ajax-driven page.

For some people, Ajax is still a mystery. It seems to be what cool kid and bad boys in the Web development/interaction community do, they don't have time and patience or ability to understand and use it. This is really a pity, because many customers do like to add Ajax-style features-it makes Web applications easier to use. If you are a member of these PHP developers, do not be afraid: after reading this article, you have enough knowledge to make you a real Ajax professional.

This article shows how to use jQuery to easily add Ajax functions to PHP Web applications. We will use PHP and MySQL to build a simple Web application-a phone book containing the name and phone number. This application has all the expected standard functions-such as finding names or phone numbers, and having MySQL tables. Next, you will also add jQuery to the application so that you can search for the name and phone number in real time when typing. After completing the preceding tasks, you have enough basic knowledge about jQuery and Ajax.

What Is Ajax?

The best way to describe Ajax is to compare it with the traditional method. Most Web pages and applications work in synchronization mode. After you click the submit button for a link or form, the request is sent to the server, which then processes the request and sends a response. The best way to summarize this model is to click, wait, and view ". This is a well-known cycle of rinse-and-repeat. In other words, if the page needs to frequently display updated information, you must put a type of automatic refresh hack, or let the user refresh or click a link to refresh.

Ajax has changed everything. The first letter A in Ajax represents asynchronous. Ajax allows you to create a page in any programming language, and then refresh different parts of the page with information from the database or other backend server processes. For example, if you have an e-commerce site that shows the products sold. On each product page, there are several common items: title, sales description, thumbnail images, and inventory quantity.

If you want visitors to obtain the latest inventory information. You can add an Ajax function that can run a separate PHP page containing MySQL queries, and then refill the information on the original page without user input, you do not need to consider the synchronization of the click-wait-view mode of the event.

J in Ajax represents JavaScript, which is the driving force of all actions. This is both a good thing and a bad thing-the good side is that it is a client code, so it can be transplanted without affecting the server; the bad side for PHP developers is that it is completely different from the environment they are used. This requires tools and frameworks like jQuery to greatly simplify the way you interact with Ajax and speed up code completion.

The last two items: + and x represent what? They represent XML, but the XML part is not exact. A large number of Ajax applications still work well without any XML code: they only pass HTML back and forth, or even plain text. To be more accurate, let x represent XMLHttpRequest, because this object can be used to retrieve data in the background without interfering with the display or behavior of existing pages.

What is jQuery?

JQuery is a lightweight JavaScript library created by John Resig and was released on the Internet in the early 2006 S. It is a free open-source software with the dual License of mascript usetts Institute of Technology (MIT) and GNU General Public License. Because it is simple and intuitive, it has won the support of many developers.

Why is it so popular? Because it provides a simple and easy-to-use library that simplifies JavaScript, anyone (right, or even a thorough back-end programmer) can create extraordinary results without hard work. You can select, modify, and process CSS for the Document Object Model (DOM) element, make the element more attractive, and process Ajax. All these functional implementations come from a JavaScript file that can be downloaded from the jQuery site (see references ).

After downloading jQuery, you can add it to any HTML or PHP file by adding a simple <script> tag:

﹤script type="text/javascript" src="/path/to/jquery.js"﹥﹤/script﹥

Assume that you have a very simple but annoying task to complete-many manual operations are required, such as adding a colon (:) At the end of each form tag on your site (:). You can traverse and search for each form tag and add a colon at the end of each line. You can also deploy the following jQuery code:

Listing 1. Add a colon using jQuery

﹤script type="text/javascript"﹥ $ (Document). ready (function (){ $ ("Label"). append (":"); }); </Script>

This function is simple: it will wait until the page is ready and loaded all ($ (document ). after ready () is completed, an anonymous function is run to search for all DOM label elements and append a colon to the end of the found text. The $ () function allows users to access DOM elements with their local names, which makes this interface the best choice for developers who are familiar with DOM.

Of course, jQuery can do many other things, which is just a good start. With a simple built-in function, jQuery ensures that your code can work, because it will wait for the page to load. With another line of code, you can thoroughly change all DOM label elements found in the Code, all of which are performed in the client, without tedious traversal of all the tags and making changes there.

1