• <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>
    • 軟件測試技術
    • 軟件測試博客
    • 軟件測試視頻
    • 開源軟件測試技術
    • 軟件測試論壇
    • 軟件測試沙龍
    • 軟件測試資料下載
    • 軟件測試雜志
    • 軟件測試人才招聘
      暫時沒有公告

    字號: | 推薦給好友 上一篇 | 下一篇

    在 AJAX 開發中集成數據庫技術

    發布: 2008-1-29 13:14 | 作者: 不詳 | 來源: http://java.chinaitlab.com | 查看: 10次 | 進入軟件測試論壇討論

    領測軟件測試網 一、引言

      如今,有相當多的Web應用程序,如Backpack,Blinksale和Gmail,都把數據庫技術與AJAX集成到一起。通過提供與數據庫通訊而不用刷新瀏覽器這種強有力的技術,這種集成對web應用程序和用戶體驗產生巨大的影響-這意味著,在用戶繼續其它交互的同時可以實現實時的數據傳輸。

      本文將集中討論上述技術集成機理。同時提供了完整的參考源碼。這個示例是一個簡單的職務記錄應用程序,其中每個職務包含一個標題,描述和日期-允許用戶添加、編輯和刪除職務。所有這些都是你與數據庫記錄數據打交道時的基本操作,但是這個應用程序更進了一步。一個職務可以變化成一個可編輯的表單-它將被從數據庫中加以保存或刪除,以及以其新狀態顯示而不需要刷新瀏覽器并中斷用戶操作。

      在本文中,我假定你已經初步了解AJAX、MySQLPHP,或一類似的服務器端語言。如果你還沒有創建過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-用于顯示每一個分析后的職務數據

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

      下面的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\" ?>\n";
     $xml .= "<posts>\n";
     while($row = mysql_fetch_array($result)) {
      $xml .= "<post>\n";
      $xml .= "<id>" . $row['id'] . "</id>\n";
      $xml .= "<date>" . $row['date'] . "</date>\n";
      $xml .= "<title><![CDATA[" . $row['title'] . "]]></title>\n";
      $xml .= "<description><![CDATA[" . $row['description'] . "]]></description>\n";
      $xml .= "</post>\n";
     }
     $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開發看起來再次變得年輕而充滿活力,而我們也很幸運地成為這種新技術時代的一部分。

    文章來源于領測軟件測試網 http://www.kjueaiud.com/

    TAG: ajax AJAX


    關于領測軟件測試網 | 領測軟件測試網合作伙伴 | 廣告服務 | 投稿指南 | 聯系我們 | 網站地圖 | 友情鏈接
    版權所有(C) 2003-2010 TestAge(領測軟件測試網)|領測國際科技(北京)有限公司|軟件測試工程師培訓網 All Rights Reserved
    北京市海淀區中關村南大街9號北京理工科技大廈1402室 京ICP備10010545號-5
    技術支持和業務聯系:info@testage.com.cn 電話:010-51297073

    軟件測試 | 領測國際ISTQBISTQB官網TMMiTMMi認證國際軟件測試工程師認證領測軟件測試網

    老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月

  • <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>