Integrated database technology in AJAX development (1)

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.

This means that real-time data transfer can be achieved while users continue to interact with each other.

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.