如何使用ajax开发web应用程序（3）_ajax在web应用里的使用-CSDN博客

如何使用ajax开发web应用程序（3）

作者： Jonathan Fenocchi
译者：Sheneyan(子乌)
时间：2005.11.22
英文原文：http://webreference.com/programming/javascript/jf/column14/index.html

　　在这个关于AJAX系列的第三部分中，我们将学习如何使用AJAX与服务端进行写作以及这些技术如何产生强大的web应用程序。如果你对学习如何构建类似GMail或者Google Maps的web程序感兴趣的话，这是一篇基础的入门（虽然那两个东东会比我们在这篇文章中提及的内容复杂的多）。在这篇文章中，我使用PHP作为服务端语言，但AJAX能够和任何服务端语言进行很好的兼容，所以你尽可以选择你所钟爱的任何语言！

　　我们还是从我们上一篇文章的代码开始我们的学习，你可以去阅读它来作为参考。

　　这里就是这个HTML页面（带js）：

   Language：javascript, parsed in: 0.082 seconds, using GeSHi 1.0.7.12 
 
     <!DOCTYPE html 
    PUBLIC 
    "-//W3C//DTD HTML 4.01//EN" 
   
    "http://www.w3.org/TR/html4/strict.dtd"> 
   
     <html lang= 
    "zh-cn" dir= 
    "ltr"> 
   
      <head> 
   
       <meta http-equiv= 
    "Content-Type" content= 
    "text/html; charset=utf-8"> 
   
       <title>如何使用ajax开发web应用程序--示例</title> 
   
       <script type= 
    "text/javascript"><!-- 
   
    function ajaxRead 
    (file 
    ){ 
   
    var xmlObj = 
    null; 
   
    if 
    (window. 
    XMLHttpRequest 
    ){ 
   
           xmlObj = 
    new XMLHttpRequest 
    (); 
   
    } 
    else 
    if 
    (window. 
    ActiveXObject 
    ){ 
   
           xmlObj = 
    new ActiveXObject 
    ( 
    "Microsoft.XMLHTTP" 
    ); 
   
    } 
    else 
    { 
   
    return; 
   
    } 
   
        xmlObj. 
    onreadystatechange = 
    function 
    (){ 
   
    if 
    (xmlObj. 
    readyState == 
    4 
    ){ 
   
            processXML 
    (xmlObj. 
    responseXML 
    ); 
   
    } 
   
    } 
   
        xmlObj. 
    open 
    ( 
    'GET', file, 
    true 
    ); 
   
        xmlObj. 
    send 
    ( 
    '' 
    ); 
   
    } 
   
    function processXML 
    (obj 
    ){ 
   
    var dataArray = obj. 
    getElementsByTagName 
    ( 
    'users' 
    )[ 
    0 
    ]. 
    childNodes; 
   
    var dataArrayLen = dataArray. 
    length; 
   
    var insertData = 
    '<table><tr><th>' 
   
         + 
    'Pets</th><th>Tasks</th></tr>'; 
   
    for 
    ( 
    var i= 
    0; i<dataArrayLen; i++ 
    ){ 
   
    if 
    (dataArray 
    [i 
    ]. 
    tagName 
    ){ 
   
             insertData += 
    '<tr><td>' + dataArray 
    [i 
    ]. 
    tagName + 
    '</td>' 
   
                        +  
    '<td>' + dataArray 
    [i 
    ]. 
    getAttribute 
    ( 
    'tasks' 
    ) + 
    '</td></tr>'; 
   
    } 
   
    } 
   
        insertData += 
    '</table>'; 
   
        document. 
    getElementById 
    ( 
    'dataArea' 
    ). 
    innerHTML = insertData; 
   
    } 
   
    //--></script> 
   
       <style type= 
    "text/css"><!-- 
   
       table, tr, th, td 
    { 
   
        border: solid 1px # 
    000; 
   
        border-collapse: collapse; 
   
        padding: 5px; 
   
    } 
   
       --></style> 
   
      </head> 
   
      <body> 
   
       <h1>使用Ajax开发web应用程序</h1> 
   
       <p>这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。</p> 
   
       <p>这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。 
   
       <a href= 
    "#" οnclick= 
    "ajaxRead('data_3.php'); return false">查看演示< 
    /a>.</p> 
   
       <div id= 
    "dataArea"></div> 
   
      </body> 
   
     </html>

(sheneyan注：见示例)

　　注意：这里唯一的变化就是我们将我们的ajaxRead()中的“data_2.xml”改成了“data_3.php”。这是因为我们将使用php来输出XML（如果你在你的浏览器里打开这个PHP文件，它会以一个XML文件的形式展现出来－－我们只是要在这个文件中进行操作而不只是一个简单的XML）。这个PHP文件的输出类似：

   Language：xml, parsed in: 0.015 seconds, using GeSHi 1.0.7.12 
 
    <?xml version="1.0" encoding="UTF-8"?> 
   
    <data> 
   
    <pets> 
   
    <猫 tasks="喂食, 饮水, 抓跳蚤" /> 
   
    <狗 tasks="喂食, 饮水, 带出去遛遛" /> 
   
    <鱼 tasks="喂食, 检查氧气，水的纯度，其它" /> 
   
    </pets> 
   
    </data>

(Sheneyan注：示例就不提供了，参考底下说明即可。)

　　这只是输出结果，我们准备从一个mysql数据库中获取这些信息。从现在起，我们可以直接在我们的数据库中修改数据而不是手动修改XML文件。用AJAX通过PHP来取得数据，并将它获取到一个页面上－－所有这些，仍然不需要重新加载网页。

　　第一步是连接到mysql去获取数据。这篇文章的重点在javascript，所以我不会解释下面的代码如何工作，你需要自己去了解如何连接mysql数据库。

   Language：php, parsed in: 0.078 seconds, using GeSHi 1.0.7.12 
 
    <?php 
   
    $user = 
    "admin"; 
   
    $pass = 
    "adminpass"; 
   
    $host = 
    "localhost"; 
   
    $conn = 
    mysql_connect 
    ( 
    $host, 
    $user, 
    $pass 
    ) or 
    die 
    ( 
    "Unable to connect to MySQL." 
    ); 
   
    $db   = 
    mysql_select_db 
    ( 
    "pets", 
    $conn 
    ) or 
    die 
    ( 
    "Could not select the database." 
    ); 
   
    mysql_close 
    ( 
    $db 
    ); 
   
    ?>

　　只要你连接了数据库，你可以通过底下的查询来获取信息：

   Language：php, parsed in: 0.152 seconds, using GeSHi 1.0.7.12 
 
 
    <?php 
   

       
    $user = 
    "admin"; 
   

       
    $pass = 
    "adminpass"; 
   

       
    $host = 
    "localhost"; 
   

       
    $conn = 
    mysql_connect 
    ( 
    $host, 
    $user, 
    $pass 
    ) or 
    die 
    ( 
    "Unable to connect to MySQL." 
    ); 
   

       
    $db   = 
    mysql_select_db 
    ( 
    "pets", 
    $conn 
    ) or 
    die 
    ( 
    "Could not select the database." 
    ); 
   

       
    $result = 
    mysql_query 
    ( 
    "SELECT * FROM `pets`" 
    ); 
   

       
    if 
    ( 
    mysql_num_rows 
    ( 
    $result 
    ) == 
    0 
    ){ 
   

           
    die 
    ( 
    'Error: no data found in the database.' 
    ); 
   

       
    } 
   

       
    while 
    ( 
    $row = 
    mysql_fetch_assoc 
    ( 
    $result 
    )){ 
   

           
    echo 
    'Pet: '. 
    $row 
    [ 
    'pet' 
    ]. 
    ', tasks: '. 
    $row 
    [ 
    'tasks' 
    ]. 
    '. '; 
   

       
    } 
   

       
   

       
    mysql_close 
    ( 
    $db 
    ); 
   
 
    ?> 
   

       
   

　　这段代码给了你需要的信息，但它输出并不正确。我们需要修改这PHP代码来分隔数据为XML，而不是纯文本。为了实现这个目标我们得作几个修改。

   Language：php, parsed in: 0.186 seconds, using GeSHi 1.0.7.12 
 
    <?php 
   
    header 
    ( 
    'Content-Type: text/xml' 
    ); 
   
    echo 
    '<?xml version="1.0" encoding="UTF-8"?>'; 
   
    echo 
    "/n<data>/n<pets>/n"; 
   
    $user = 
    "admin"; 
   
    $pass = 
    "adminpass"; 
   
    $host = 
    "localhost"; 
   
    $conn = 
    mysql_connect 
    ( 
    $host, 
    $user, 
    $pass 
    ) or 
    die 
    ( 
    "无法连接mysql." 
    ); 
   
    $db   = 
    mysql_select_db 
    ( 
    "pets", 
    $conn 
    ) or 
    die 
    ( 
    "无法选择数据库." 
    ); 
   
    $result = 
    mysql_query 
    ( 
    "SELECT * FROM `pets`" 
    ); 
   
    if 
    ( 
    mysql_num_rows 
    ( 
    $result 
    ) == 
    0 
    ){ 
   
    die 
    ( 
    'Error: 数据库没有数据.' 
    ); 
   
    } 
   
    while 
    ( 
    $row = 
    mysql_fetch_assoc 
    ( 
    $result 
    )){ 
   
    echo 
    '<'. 
    $row 
    [ 
    'pet' 
    ]. 
    ' tasks="'. 
    $row 
    [ 
    'tasks' 
    ]. 
    '" />'. 
    "/n"; 
   
    } 
   
    echo 
    "</pets>/n</data>"; 
   
    mysql_close 
    ( 
    $db 
    ); 
   
    ?>

　　让我们从上面开始，一次一行的来分析它是如何输出XML的.

行2:　　这部分代码发送一个http头来让用户客户端明白这个php文件输出的是一个XML。这就是为什么你在你的浏览器里看这个文档的时候它以一个XML文件的形式展现，即使你的文件有一个“.php”后缀。

行3:　　这部分的代码输出了XML声明。这是我之前展示给你看的XML的第一行。

行4:　　这部分的代码输出的最开始的两个标签：我们的根标签，<data>和我们用来放置所有宠物的<pets>标签。

行15:　　这部分的代码最困难的。这里包含了一个循环用来遍历你数据库里所有的数据。每次循环，它会输出一个新的节点，这个节点用每一种动物作为标签名以及一个"任务"属性。例如，如果你数据库中的第一只宠物是“猫”而且它相应的任务字段是“喂食, 饮水, 抓跳蚤”，那php将输出在XML文档中输出 <猫 tasks="喂食, 饮水, 抓跳蚤" /> 。这个“/n” 部分只是在结尾插入一个新行，保证这个XML代码不至于都在同一行。

行17:　　这部分的代码结束了我们开始时打开的</pets> 和 </data> 节点。因为XML必须是格式良好的（well-formed），所以我们必须认真对待这部分以确认我们的程序能够正确运行。

　　现在我们已经让PHP输出XML了，我们现在所要作的就是登录我们的mysql数据库，并进行我们所需要的修改，来更新这个XML。很酷，不是吗？我们仍然能够使用上一篇文章中的js脚本来获取代码，因为XML输出和之前的完全一样。