ajax| Data | database
first, the introduction
Today, there are quite a few web applications, such as Backpack,blinksale and Gmail, that integrate database technology with Ajax.
This integration has a huge impact on Web applications and the user experience by providing a powerful technology that communicates with the database without refreshing the browser-which means that real-time data transfer can be achieved while the user continues to interact with others.
This article will focus on the above technology integration mechanism. At the same time provide a complete reference source. This example is a simple job record application where each job contains a title, description, and date-allowing users to add, edit, and delete titles. All of this is a basic operation when dealing with database data, but the application is a step closer. A job can be changed into an editable form-it will be saved or deleted from the database and displayed in its new state without the need to refresh the browser and break the user's action.
In this article, I assume you have a rudimentary understanding of Ajax, MySQL and PHP, or a similar server-side language. If you have not created an XML HTTP request object, you can refer to my article "How to use Ajax" first. Next, let's start with the database issue.
Second, create a database
The first thing you need to do is create database tables to store data for these jobs. I created a MySQL table called Informit_ajax-it has id,title,description and date fields-these are the variables that are recurring in this article. The following is the code that creates the table:
CREATE table′informit_ajax′ (
′id′int (one) not NULL auto_increment,
′date′datetime not NULL default ' 0000-00-00 00:00:00 ',
′description′longtext not NULL,
′title′varchar not NULL default ',
PRIMARY KEY (′id′)
) Type=myisam; |
You can execute this code using any MySQL query tool or the language used to develop the application. Once you have the database ready, you will need to create a front-end file that makes requests to the PHP background.
Iii. issue of requests
The indexed HTML file here is a simple data placeholder-it will be parsed from the database. This file contains references to JavaScript and CSS files, as well as an OnLoad processor and three div tags for the first request:
· Layout-is used to center the content of the page
· loading-loads the message during the requested data load, which will be received for the HttpRequest object
· Posts-is used to display job data after each analysis
integrate a Database with AJAX
|
The first request is generated when the page is loaded. This request sends a GET query to a PHP class that we will create later, but first we need to create the profiling method for the response of the request. JavaScript request files are responsible for all basic work, such as creating objects, sending requests, and checking readiness status. When I receive a response from the request object, I use this JavaScript job file to handle the HTML generation of these positions. The onresponse approach is pretty strong because it generates HTML pages for each job with text and form versions, and places them in their own custom div tags, so that we can easily locate them during user interaction. In this way, we can switch between the text of each job and the version of the form-this can be done by clicking on an "edit this post" link. Here is the code for the HTML page created for each job, and you can see the complete method implementation in the corresponding download source file in this article.
var html = "<div class= ' post ' id= ' post_" + i + "'" + Postdisplay + ">"
+ "<div class= ' title ' id= ' Title_" + i + "' >" + _title + "</div>"
+ "<div class= ' description ' id= ' Description_" + i + "'" "+ _description +" </div> "
+ "<div class= ' date ' id= ' Date_" + i + "' >" + _date + "</div>"
+ "<a Href=\" javascript:toggle (' + i + "'); \" >edit this post </a>
"
+ "</div>"
+ "<div class= ' post ' id= ' formpost_" + i + "'" + Formpostdisplay + ">"
+ "<div class= ' title ' ><input type= ' text ' name= ' title ' id= ' Formtitle_" + i + "' size= ' value= '" "+ _title +" "" "</div>"
+ "<div class= ' description ' ><textarea type= ' text ' id= ' formdescription_ ' + i +" ' wrap= ' virtual ' cols= ' ' rows= ' 15 ' "+ _ Description + "</textarea> </div>"
+ "<div class= ' Date '" + _date + "</div>"
+ "<input type= ' button ' name= ' Cancel ' value= ' Cancel ' onclick=\" javascript:toggle (' + i + "); \" > "
+ "<input type= ' button ' name= ' delete ' value= ' delete this post ' onclick=\" javascript:deletepost ("+ _id +"); \ ">"
+ "<input type= ' button ' name= ' Submit ' value= ' Save this post ' onclick=\" javascript:savenewpost ("+ _id +", "+ i +"); \ ">"
+ "</div>"
+ "<p>" nbsp; </p>; |
The text version of each title simply displays the title, description, and date and an "edit this post" link. There are three buttons for each job's form version:
·" Cancel button-simply switches the status of the position back to the text version.
·" Delete this post button-sends the ID of the current job to the PHP object to remove it from the database.
·" Save this post button-allows the user to save a new or edited title to the server.
The core methods for handling server-side request traffic are onresponse,savenewpost,deletepost and Getpost methods, as well as a getter and a setter method that stores the job index for the current operation. These getter/setter methods provide the current index value to these core methods, so that the correct job can be updated with the correct information based on the index. Here's a short description and code example for each of the core methods (excluding Onresponse, because we've seen it before):
· The following Savenewpost method saves the new title by collecting and sending the form input value to the PHP object and sets the Getpost method to the callback method of the onreadystatechange:
function Savenewpost (_id, _index) {
var newdescription = document.getElementById ("Formdescription_" + _index). Value;
var newtitle = document.getElementById ("Formtitle_" + _index). Value;
Setindex (_index);
SendRequest ("Services/post.php?method=save" id= "+ _id +" "title=" + Newtitle + "" description= "+ newdescription, GetPost) ;
} |
· The following Getpost method is a callback method that is responsible for updating a separate title when a response is received from a PHP object:
function Getpost () {
if (checkreadystate (request)) {
var response = Request.responseXML.documentElement;
var _title = response.getelementsbytagname (' title ') [GetIndex ()].firstchild.data;
var _description = response.getelementsbytagname (' description ') [GetIndex ()].firstchild.data;
var _date = response.getelementsbytagname (' date ') [GetIndex ()].firstchild.data;
document.getElementById ("Title_" + getindex ()). InnerHTML = _title;
document.getElementById ("Description_" + getindex ()). InnerHTML = _description;
document.getElementById ("Date_" + getindex ()). InnerHTML = _date;
Toggle (GetIndex ());
}
} |
· The following Deletepost method sends the current index as a request to the PHP object, which eventually deletes the records in the database and responds with an updated title:
function Deletepost (_id) {
SendRequest ("Services/post.php?method=delete" "id=" + _id, onresponse);
} |
Surprisingly, the most complicated part is over. Let's analyze the most critical part-database interaction.
