PHP & AJAX

What is AJAX?

AJAX stands for A synchronous J avaScript and X ML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.

Web applications follow the convention of transferring information to and from the Server by using synchronous requests. That is, you enter a form, click the Submit button, and be directed to a new page with new information from that Server.

With AJAX, when the Submit button is pressed, JavaScript will create a request to the Server, interpret the results and update the current screen. Users will never know what is transmitted to the Server.

Examples of PHP and AJAX

To clearly illustrate that it is easy to access information from a Database using AJAX and PHP, we build MySQL queries and display results on "ajax.html". But before proceeding, we need to do basic work. Create a Table using the following command.

  CREATE TABLE `ajax_example` ( 
  `name` varchar (50) NOT NULL, 
  `age` int (11) NOT NULL, 
  `sex` varchar (1) NOT NULL, 
  `wpm` int (11) NOT NULL, 
  PRIMARY KEY (`name`) 
  ) 

Now, pass the following data into this Table using the following SQL commands:

  INSERT INTO `ajax_example` VALUES ('Male', 120, 'm', 20); 
  INSERT INTO `ajax_example` VALUES ('Wild', 75, 'm', 44); 
  INSERT INTO `ajax_example` VALUES ('Manh', 45, 'm', 87); 
  INSERT INTO `ajax_example` VALUES ('Huong', 22, 'f', 72); 
  INSERT INTO `ajax_example` VALUES ('Kien', 27, 'f', 0); 
  INSERT INTO `ajax_example` VALUES ('Middle', 35, 'f', 90); 

HTML file on the Client side

Now we have the HTML file on the client side is ajax.html and it will have the following code:

    language = "javascript" type = "text/javascript" >       name = 'myForm' >  Max Age:     type = 'text' id = 'age' />    />  Max WPM:     type = 'text' id = 'wpm' />    />  Sex:     id = 'sex' >    value = "m" > m    value = "f" > f    type = 'button' onclick = ' ajaxFunction () ' value = 'Query MySQL' />    id = 'ajaxDiv' > Kết quả của bạn sẽ hiển thị ở đây!!!