Integration of database technology in AJAX development

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(11) NOT NULL auto_increment,
′date′ datetime NOT NULL default '0000-00-00 00:00:00',
′description′ longtext NOT NULL,
′title′ varchar(100) 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

＜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＞