AJAX 簡介

在研究ajax之前先讓我們先討論一個問題 -什麼是Web 2.0 。聽到 Web 2.0 這個字的時候,應該先問一問 「Web 1.0 是什麼?」 雖然很少聽人提到 Web 1.0,實際上它指的就是具有完全不同的請求和回應模式的傳統 Web。例如,到hdu.edu.cn 網站上點選一個按鈕。就會對伺服器發送一個請求,然後回應再回到瀏覽器。該請求不僅僅是新內容和項目列表,而是另一個完整的 HTML 頁面。因此當 Web 瀏覽器用新的 HTML 頁面重繪時,可能會看到閃爍或抖動。事實上,透過看到的每個新頁面可以清楚地看到請求和回應。

  Web 2.0(在很大程度上)消除了這種看得見的往復互動。例如在 Google Maps 上,你可以拖曳地圖,放大縮小,只有很少的重繪操作。當然這裡仍然有請求和回應,只不過都藏到了幕後。作為用戶,體驗更加舒適,感覺很像桌面應用程式。這個新的感覺和典範就是當有人提到 Web 2.0 時您所體會到的。

  需要關心的是如何使這些新的互動成為可能。顯然,仍需要發出請求和接收回應,但正是針對每次請求/回應互動的 HTML 重繪造成了緩慢、笨拙的 Web 互動的感受。因此很清楚,我們需要一種方法使發送的請求和接收的回應只 包含需要的資料而不是整個 HTML 頁面。惟一需要取得整個新 HTML 頁面的時候就是希望使用者看到 新頁面的時候。

  但多數互動都是在已有頁面上增加細節、修改主體文字或覆寫原始資料。這些情況下,Ajax 和 Web 2.0 方法允許在不 更新整個 HTML 頁面的情況下傳送和接收資料。對於那些經常上網的人,這種能力可以讓您的應用程式感覺更快、反應更及時,讓他們不時地光顧您的網站。

什麼是Ajax?

1、全名為:Asynchronous、JavaScript、And、XML(異步的 JavaScript 和XML)

2、定義: Ajax不是技術,它其實是幾種技術,每種技術都有其獨特這處,合在一起就變成了一個功能強大的新技術

#3、包括:

#################

          XHTML和CSS 
          使用文件物件模型(DocumentObjectModel)作動態顯示與互動 
     進行非同步資料接收 
          使用JavaScript將它們綁訂在一起 

4、解釋:是使用客戶端腳本與Web伺服器交換資料的Web應用程式開發方法。這樣,Web頁面不用打斷互動流程進行重新加裁,就可以動態更新。使用Ajax,你可以創建接近本地桌面應用的,直接的、高可用的、更豐富的、更動態的Web使用者介面介面。


#Ajax優勢主要有以下幾點:

1. 不需要外掛程式支援(一般瀏覽器且預設開啟JavaScript 即可);

2. 使用者體驗極佳(不刷新頁面即可取得可更新的資料) ;

3.提升Web 程式的效能(在傳遞資料方面做到按需放鬆,不必整體提交);

4.減輕伺服器和頻寬的負擔(將伺服器的一些操作轉移到客戶端);


#Ajax 的不足有以下幾點:

1.不同版本的瀏覽器度XMLHttpRequest 物件支援度不足(例如IE5 之前);

2.前進、後退的功能被破壞(因為Ajax 永遠在當前頁,不會幾率前後頁);

3.搜尋引擎的支援度不夠(因為搜尋引擎爬蟲還不能理解JS 引起變化資料的內容);

4.開發調試工具缺乏(相對於其他語言的工具集來說,JS 或Ajax 調試開發少的可憐) 。


使用 Ajax 最關鍵的地方,就是實作非同步請求、接受回應及執行回呼。那麼異步與同步有什麼差別呢?

我們普通的Web 程式開發基本上都是同步的,意為執行一段程式才能執行下一段, 類似電話中的通話, 一個電話接完才能接聽下個電話; 而異步可以同時執行多條任務,感覺有多條線路,類似於短信,不會因為看一條短信而停止接受另一條短信。 Ajax 也可以使用同步模式執行, 但同步的模式屬於阻塞模式, 這樣會導致多條線路執行時又必須一條一條執行,會讓 Web 頁面出現假死狀態,所以,一般 Ajax 大部分採用非同步模式。

Google Suggest

在 2005 年,Google 透過其 Google Suggest 使 AJAX 變得流行起來。

Google Suggest 使用AJAX 創造出動態性極強的web 介面:當您在Google的搜尋方塊輸入關鍵字時,JavaScript 會把這些字元傳送到伺服器,然後伺服器會傳回搜尋建議的列表。

實例展示:

先建立一個html檔:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkname(){
            if($('#name').val() == ""){
                $('#msg').html("please enter the name!");
                $('#name').focus;
                return false;
            }
            if($('#address').val() == ""){
                $('#msg').html("please enter the address!");
                $('#address').focus;
                return false;
            }
            ajax_post();
        }
        function ajax_post(){
            $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php
                    function(data){
                        //$('#msg').html("please enter the name!");
                        //alert(data);
                        $('#msg').html(data);
                    },
                    "text");
        }
    </script>
</head>
<body>
    <form id="ajaxform" name="ajaxform" method="post" action="txt.php">
        <p>
            姓名:<input type="text" name="name" id="name"/>
        </p>
        <p>
            地址:<input type="text" name="address" id="address"/>
        </p>
        <p id="msg"></p>
        <p>
            <input name="Submit" type="button" value="submit" onclick="return checkname()"/>
        </p>
    </form>
</body>
</html>

在建立一個txt.php文件:

<?php
    $name = $_POST["name"];
    $address = $_POST["address"];
    echo $name."<br>";
    echo $address."<br>";
?>


#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function checkname(){ if($('#name').val() == ""){ $('#msg').html("please enter the name!"); $('#name').focus; return false; } if($('#address').val() == ""){ $('#msg').html("please enter the address!"); $('#address').focus; return false; } ajax_post(); } function ajax_post(){ $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php function(data){ //$('#msg').html("please enter the name!"); //alert(data); $('#msg').html(data); }, "text"); } </script> </head> <body> <form id="ajaxform" name="ajaxform" method="post" action="txt.php"> <p> 姓名:<input type="text" name="name" id="name"/> </p> <p> 地址:<input type="text" name="address" id="address"/> </p> <p id="msg"></p> <p> <input name="Submit" type="button" value="submit" onclick="return checkname()"/> </p> </form> </body> </html>
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!