Integrate Database Technology in AJAX development (1)

Last Update:2013-12-17 Source: Internet

Author: User

Tags database issues mysql query

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I. Introduction
Today, many Web applications, such as Backpack, Blinksale, and Gmail, integrate database technology with AJAX. By providing a powerful technology that communicates with the database without refreshing the browser, this integration has a huge impact on web applications and user experience. This means that the user can transmit data in real time while continuing other interactions.

This article will focus on the above technology integration mechanism. It also provides complete reference source code. This example is a simple job record application where each job contains a title, description, and date-allowing users to add, edit, and delete jobs. All these are the basic operations you perform when dealing with database record data, but this application has taken a step further. A role can be changed into an editable form-it will be saved or deleted from the database, and displayed in its new state without refreshing the browser and interrupting user operations.

In this article, I assume that you have a preliminary understanding of AJAX, MySQL, PHP, or a similar server-side language. If you have not created an xml http Request object, you can first refer to my article "How to Use AJAX ". Next, let's first discuss the database issues.

2. Create a database

The first thing you need to do is create a database table to store data for these jobs. I created a MySQL table named informit_ajax, which has the ID, title, description, and date fields. These are repeated variables in this article. The following code creates the table:

Create table 'informit_ajax ′(
'Id' int (11) not null auto_increment,
'Date' datetime not null default '2017-00-00 00:00:00 ',
'Description' longtext not null,
'Title' varchar (100) not null default '',
Primary key ('id ′)
) TYPE = MyISAM;

You can use any MySQL query tool or language used to develop applications to execute this code. Once the database is ready, you need to create a front-end file that sends a request to the PHP background.
3. Send a request

The index HTML file here is a simple data placeholder-it will be analyzed from the database. This file contains references to JavaScript and CSS files. It also contains an onload processor that sends the first request and three div labels:
· Layout-used to center the page content
· Loading-load the message during the requested data loading, which will be received by the HTTPRequest object
· Posts-used to display job data after each analysis

<Head>
<Title> How to Integrate a Database with AJAX </title>
<Link href = "css/layout.css" rel = "stylesheet" type = "text/css"/>
<Script src = "js/request. js"> </script>
<Script src = "js/post. js"> </script>
</Head>
<Body onload = "javascript: makeRequest ('services/post. php? Method = get'); ">
<Div id = "layout" align = "center">
<Div id = "posts"> </div>
<P> <input type = "button" value = "add a post" onmousedown = "javascript: makeRequest ('services/post. php? Method = save '); "/> </p>
<P> <div id = "loading"> </div> </p>
</Div>
</Body>

The first request is generated when the page is loaded. This request sends a get request to query a PHP class we will create later. But first, we need to create an analysis method for the request response. The JavaScript request file is responsible for processing all the basic work, such as creating an object, sending a request, and checking the preparation status. When a response is received from the Request object, I use this JavaScript job file to process the HTML generation of these jobs. The onResponse method is quite strong because it processes HTML page generation for each job in two versions: Text and form, and places them in their own custom div labels; in this way, we can easily locate them during user interaction. In this way, we can switch between the text of each job and the form Version-this can be achieved by clicking an "edit this post" link. The following is the code for the HTML page created for each job. 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> <br/>"
+ "</Div>"
+ "<Div class = 'post' id = 'formpost _" + I + "'" + formPostDisplay + ">"
+ "<Div class = 'title'> <input type = 'text' name = 'title' id = 'formtitle _" + I + "'size = '60' value = '"+ _ title +"'> </div>"
+ "<Div class = 'description'> <textarea type = 'text' id = 'formdescription _" + I + "'Wrap = 'virtual' cols = '60' 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 job simply displays the title, description, date, and a "edit this post" link. The form version of each role has three buttons:
· Cancel button-simply switch the job status back to the text version.
· Delete this post button-Send the ID of the current job to the PHP Object to delete it from the database.
· Save this post button-allows users to save New or edited jobs to the server.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More