在ajax开发中集成数据库技术

j梅花鹿j

j梅花鹿j

2016-02-19 22:25

下面这个在ajax开发中集成数据库技术教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

  一、引言

  如今,有相当多的Web应用程序,如Backpack,Blinksale和Gmail,都把数据库技术与AJAX集成到一起。通过提供与数据库通讯而不用刷新浏览器这种强有力的技术,这种集成对web应用程序和用户体验产生巨大的影响-这意味着,在用户继续其它交互的同时可以实现实时的数据传输。

  本文将集中讨论上述技术集成机理。同时提供了完整的参考源码。这个示例是一个简单的职务记录应用程序,其中每个职务包含一个标题,描述和日期-允许用户添加、编辑和删除职务。所有这些都是你与数据库记录数据打交道时的基本操作,但是这个应用程序更进了一步。一个职务可以变化成一个可编辑的表单-它将被从数据库中加以保存或删除,以及以其新状态显示而不需要刷新浏览器并中断用户操作。

  在本文中,我假定你已经初步了解AJAX、MySQL和PHP,或一类似的服务器端语言。如果你还没有创建过XML HTTP Request对象,那么可以先参考我的文章“怎样使用AJAX”。下面,首先让我们讨论数据库的问题。

  二、创建数据库

  你需要做的第一件事是创建数据库表来为这些职务存储数据。我创建了一个叫informit_ajax的MySQL表-它拥有ID,title,description和date字段-这些都是在本文中不断重复出现的变量。下面是创建该表的代码:

  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;

  你可以用任何MySQL查询工具或开发应用程序所用的语言来执行这段代码。一旦准备好数据库,接下来就需要创建向PHP后台发出请求的前端文件。

  三、发出请求

  这里的索引HTML文件是一简单的数据占位符-它将被从数据库中加以分析。该文件包含到JavaScript和CSS文件的参考;还包含一个发出首次请求的onload处理器和三个div标签:

  · Layout-用于把页面内容居中

  · loading-在被请求的数据加载期间加载消息,它将为HTTPRequest对象所接收

  · posts-用于显示每一个分析后的职务数据

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

  当页面装载时产生第一个请求。这个请求发送一个get查询到一个我们稍后会创建的PHP类;但是首先我们需要为请求的响应创建分析方法。JavaScript请求文件负责处理所有的基础工作,例如创建对象,发送请求以及检查准备状态等。当从Request对象收到响应时,我用这个JavaScript职务文件来处理这些职务的HTML生成。onResponse方法是相当强壮的,因为它以文本和表单两种版本处理每个职务的HTML页面生成,并且把它们放置到它们自己定制的div标签中;这样以来,我们就可以容易地在用户交互期间定位它们。通过这种方法,我们可以在每个职务的文本和表单版本之间进行切换-这可以通过点击一个"edit this post"链接来实现。下面是针对每个职务创建的HTML页面的代码,你可以在本文相应的下载源文件中看到完整的方法实现。

  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>";

  每个职务的文本版本简单地显示标题,描述和日期以及一个"edit this post"链接。每个职务的表单版本有三个按钮:

  ·"cancel"按钮-简单地把职务的状态切换回文本版本。

  ·"delete this post"按钮-把当前职务的ID发送给PHP对象以从数据库中把它删除。

  ·"save this post"按钮-允许用户把新的或编辑过的职务保存到服务器。

  处理服务器端请求通讯的核心方法有onResponse,saveNewPost,deletePost和getPost方法;还有存储当前正操作的职务索引的一个getter和一个setter方法。这些getter/setter方法把当前索引值提供给这些核心方法,这样正确的职务就可以用基于该索引的正确信息进行更新。下面是针对每个核心方法(不包括onResponse,因为我们以前观察过它的功能)的简短描述和代码示例:

  · 下面的saveNewPost方法通过收集并把表单输入值发送给PHP对象来保存新的职务并且把getPost方法设置为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);
  }

  · 下面的getPost方法是一个回调方法-它负责当从PHP对象收到响应时更新单独的职务:

  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());
   }
  }

  · 下面的deletePost方法把当前索引作为一个请求发送给PHP对象,这最终将删除数据库中的记录并以更新的职务进行响应:

  function deletePost(_id){
   sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
  }

  
  令人惊讶的是,最复杂的部分已经结束了。下面让我们分析最为关键的部分-数据库交互。

   四、与数据库交互

  为了实现与数据库的交互,你需要创建方法用于检索,插入,代替和删除职务。我选择创建一个post类,其中有get,save和delete方法来处理这些交互。这个类还有一个到数据库连接文件(用于连接到数据库)的参考。你必须用自己的数据库信息来代替登录,口令和数据库名。

  DEFINE ('DB_USER', 'USERNAME');
  DEFINE ('DB_PASSWORD', 'PASSWORD');
  DEFINE ('DB_HOST', 'localhost');
  DEFINE ('DB_NAME', 'DATABASE');
  $dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to MySQL: ' . mysql_error() );

  到连接文件的参考以及数据库的名字位于该类的构造器中。你的构造器看上去应该与下面代码相似:

  function Post(){
   require_once('mysql_connect.php');
   $this->table = "informit_ajax";
  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  下面的dbConnect方法负责创建连接-通过把登录信息传送给数据库;这个方法被重用于查询数据库前的所有核心方法中:

  function dbConnect(){
   DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
  }

  下面的get方法循环遍历数据库表,它基于数据库行创建一个XML字符串,并把该字符串返回给请求者:

  function get(){
   $this->dbConnect();
   $query = "SELECT * FROM $this->table ORDER BY id";
   $result = mysql_db_query (DB_NAME, $query, LINK);
   $xml = "<?xml version="1.0" encoding="ISO-8859-1" ?>";
   $xml .= "<posts>";
   while($row = mysql_fetch_array($result)) {
  $xml .= "<post>";
  $xml .= "<id>" . $row['id'] . "</id>";
  $xml .= "<date>" . $row['date'] . "</date>";
  $xml .= "<title><![CDATA[" . $row['title'] . "]]></title>";
  $xml .= "<description><![CDATA[" . $row['description'] . "]]></description>";
  $xml .= "</post>";
   }
   $xml .= "</posts>";
   mysql_close();
   header("Content-Type: application/xml; charset=UTF-8");
   echo $xml;
  }

  下面的save方法通过处理更新和插入位置实现两个目的:

  function save($id, $title, $description){
  $this->dbConnect();
  $query = "SELECT * FROM $this->table WHERE id='$id'";
  $result = @mysql_query ($query);
  if (mysql_num_rows($result) > 0)
  {
   $query = "UPDATE $this->table SET title='$title', description='$description', date=NOW() WHERE id='$id'";
   $result = @mysql_query($query);
  }
  else
  {
   $query = "INSERT INTO $this->table (title, description, date) VALUES ('$title', '$description', NOW())";
   $result = @mysql_query($query);
  }
  mysql_close();
  $this->get();
  }

  下面的delete方法负责删除一个基于被作为参数传递的ID的位置。然后调用get方法来把新的数据返回到请求文件:

  function delete($id){
   $this->dbConnect();
   $query = "DELETE FROM $this->table WHERE id='$id'";
   $result = @mysql_query($query);
   mysql_close();
   $this->get();
  }

  五、综合应用

  为了把以上各部分整合到一起,需要创建一个简单的文件来承担XML HTTP请求和PHP对象之间的通讯桥梁。这时的页面不仅创建PHP对象,还接收查询并把变量传递给动态生成的方法-在此是指get,save或delete。下面的一个示例查询包括了一个$method和可靠的$id,$title和$description变量。

  require_once("../classes/Post.class.php");
  $post = new Post();
  $post->$method($id, $title, $description);

  以后我们还会更进一步讨论这些技术。如今的web开发看起来再次变得年轻而充满活力,而我们也很幸运地成为这种新技术时代的一部分。
  

展开更多 50%)
分享

猜你喜欢

在ajax开发中集成数据库技术

Web开发
在ajax开发中集成数据库技术

在 AJAX 开发中集成数据库技术

Web开发
在 AJAX 开发中集成数据库技术

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

在AJAX开发中集成数据库技术(1)

Web开发
在AJAX开发中集成数据库技术(1)

Linux下MySQL数据库开发技术

编程语言 网络编程
Linux下MySQL数据库开发技术

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Linux下mSQL数据库开发技术

MySQL mysql数据库
Linux下mSQL数据库开发技术

AJAX 数据库实例

Web开发
AJAX 数据库实例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

锁定任务栏的办法

锁定任务栏的办法

如何使用一键还原备份系统?

如何使用一键还原备份系统?
下拉加载更多内容 ↓