Build an Ajax-driven Web page using jQuery and PHP (1)_PHP Tutorial

Most PHP developers learn their skills the old-fashioned way. They typically learn how to define and build simple PHP pages, then learn how to connect those pages to simple MySQL tables, from which they can develop their own. As their skill levels increase, they also learn how to create more complex PHP functions, join tables within MySQL, and perform other advanced tasks.

In the process, they may also pick up some client-side skills to put web applications to use. It's also possible to learn something about XHTML or CSS or even some JavaScript programming. As the variety of projects they work on increases, they may even have the opportunity to work on Ajax to give your web applications a Web 2.0 or "desktop" feel. However, if your first experience with Ajax is anything like mine, you've probably already done too much - manually implementing various functions and going through the painstaking process of creating an Ajax-driven page.

Ajax is still a mystery to some. It seems to be something that the "cool kids" and "bad boys" in the web development/interaction community do, and they don't have the time or patience or ability to understand and use it. That's a shame, because many customers do like adding Ajax-style functionality—it makes Web applications easier to use. If you're one of these PHP developers, have no fear: after reading this article, you'll have enough knowledge to become a true Ajax pro.

This article shows how to use jQuery to easily add Ajax functionality to a PHP web application. We'll build a simple web application using PHP and MySQL - a phone book containing names and phone numbers. The app has all the standard features expected — like being able to look up names or phone numbers, having MySQL tables, and more. Next, you'll add jQuery to the application to be able to look up names and phone numbers in real time as you type. After completing the above tasks, you will have sufficient basic knowledge about jQuery and Ajax.

What is Ajax?

The best way to describe Ajax is to contrast it with the traditional approach. Most web pages and applications work in synchronous mode. When a link or form's submit button is clicked, a request is sent to the server, which then processes the request and sends back a response. The best way to sum up this model is “click, wait, see.” This is what you know as a never-ending rinse-and-repeat cycle. In other words, if the page needs to display updated information frequently, then some kind of auto-refresh hack must be put in place, or it may allow the user to refresh or click a link to perform the refresh.

Ajax changes all that. The first letter A in Ajax stands for asynchronous. Ajax allows you to create a page in any programming language and then refresh different parts of the page with information from a database or other back-end server process. For example, let's say you have an e-commerce site that displays the products you sell. On every product page, there are several common items: title, sales description, thumbnail image, and stock quantity.

Suppose, you want your website visitors to get the latest information on inventory quantities. You can add an Ajax function that runs a separate PHP page containing a MySQL query, and then repopulates the information on the original page without user input or event click-wait-view mode. Synchronicity.

The j in Ajax stands for JavaScript, which is the driving force of all behavior. This is both a good and a bad thing - the good side is that since it's client-side code, it's portable and doesn't impact the server; the bad side for PHP developers is that it's completely different from what they're used to. that environment. This requires tools and frameworks like jQuery to greatly simplify the way you interact with Ajax and speed up code completion.

What do the last two items: + and x represent? They stand for and XML, however, the XML part is not exact. A lot of Ajax applications work just fine without any XML code: they just pass HTML back and forth, or even plain text. It is more accurate to let x represent XMLHttpRequest, since this object can be used to retrieve data in the background without interfering with the display or behavior of the existing page.

What is jQuery?

jQuery is a lightweight JavaScript library created by John Resig and released to the Internet in early 2006. It is free, open source software licensed under both the Massachusetts Institute of Technology (MIT) and the GNU General Public License. Because it is simple and intuitive, it has won over many people in the development community.

So why is it so popular? Because it provides an easy-to-use library that simplifies JavaScript so anyone (yes, even a dyed-in-the-wool backend programmer) can create extraordinary effects without having to do hard work. You can do Document Object Model (DOM) element selection, modify and manipulate CSS, make elements more attractive, and handle Ajax. All of this functionality is implemented from a JavaScript file that can be downloaded from the jQuery site (see Related topics).

After downloading jQuery, you can add it to any HTML or PHP file by including a simple ﹤script﹥ tag:

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

Suppose you have a very simple but Very annoying task to complete — requires a lot of manual work, like adding a colon (:) at the end of every form tag on your site. You can loop through each form tag and add a colon at the end of each line, or you can deploy jQuery code like this:

Listing 1. Add a colon using jQuery

﹤script type="text/javascript"﹥ 

$(document).ready(function(){

$("label").append(":");

});

﹤/script﹥

$(document).ready( function(){

$("label").append(":");

});

﹤/script﹥

This function is simple: it will wait until the page is ready and fully loaded ($(document).ready() part), at which time it will run a Anonymous function that searches for all DOM label elements and appends a colon to the end of the text found. The function of the $() function allows access to DOM elements by their local names, making this interface the best choice for developers who are already familiar with the DOM.
Of course, there are many other things you can do with jQuery, and this is just a good start. With a simple built-in function, jQuery ensures that your code works as it waits for the page to load. With another line of code, it's possible to make sweeping changes to all DOM label elements found by the code, all within the client, without having to tediously loop through all the tags and make changes there.

1 http://www.bkjia.com/PHPjc/446637.htmlwww.bkjia.comtrue

http: //www.bkjia.com/PHPjc/446637.html

TechArticle

Most PHP developers learn their skills the old-fashioned way. They typically learn how to define and build simple PHP pages first, and then learn how to connect those pages to simple...