Ajax入門-簡易教程

          AJAX簡介:

          AJAX 指異步 JavaScript 及 XMLAsynchronous JavaScript And XML)。

          JAX 不是一種新的編程語言,而是一種用于創建更好更快以及交互性更強的 Web 應用程序的技術。

          通過 AJAX,你可以創建更好、更快以及更友好的 WEB 應用程序。

          AJAX 基于 JavaScript 和 HTTP 請求(HTTP requests)。

          ----------------------------------------------------------------------------------------------

          AJAX = 異步 JavaScript 及 XMLAsynchronous JavaScript and XML

          通過 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通信。通過這個對象,您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換數據。

          AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求),這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。

          AJAX 可使因特網應用程序更小、更快,更友好。

          AJAX 是一種獨立于 Web 服務器軟件的瀏覽器技術。

          ----------------------------------------------------------------------------------------------

          AJAX 使用 Http 請求

          在傳統的 JavaScript 編程中,假如您希望從服務器上的文件或數據庫中得到任何的信息,或者向服務器發送信息的話,就必須利用一個 HTML 表單向服務器 GET 或 POST 數據。而用戶則需要單擊提交按鈕來發送/獲取信息,等待服務器的響應,然后一張新的頁面會加載結果。

          由于每當用戶提交輸入后服務器都會返回一張新的頁面,傳統的 web 應用程序變得運行緩慢,且越來越不友好。

          通過利用 AJAX,您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest 對象,直接與服務器來通信。

          通過使用 HTTP 請求,web 頁可向服務器進行請求,并得到來自服務器的響應,而不加載頁面。用戶可以停留在同一個頁面,他或她不會注意到腳本在后臺請求過頁面,或向服務器發送過數據。

          ----------------------------------------------------------------------------------------------XMLHttpRequest 對象

          通過使用 XMLHttpRequest 對象,web 開發者可以做到在頁面已加載后從服務器更新頁面!

          在 2005 年 AJAX 被 Google 推廣開來(Google Suggest)。

          Google 建議使用 XMLHttpRequest 對象來創建一種動態性極強的 web 界面:當您開始在 Google 的搜索框中輸入查詢時,JavaScript 會向某個服務器發出這些字詞,然后服務器會返回一系列的搜索建議。

          ----------------------------------------------------------------------------------------------

          您的第一個 AJAX 應用程序

          AJAX - 瀏覽器支持

          AJAX 的要點是 XMLHttpRequest 對象。

          不同的瀏覽器創建 XMLHttpRequest 對象的方法是有差異的。

          IE 瀏覽器使用 ActiveXObject,而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象。


           1 <html>
           2 <body>
           3 
           4 <script type="text/javascript">
           5 
           6 function ajaxFunction()
           7  {
           8  var xmlHttp;
           9  
          10  try
          11     {
          12    // Firefox, Opera 8.0+, Safari
          13     xmlHttp=new XMLHttpRequest();
          14     }
          15  catch (e)
          16     {
          17 
          18   // Internet Explorer
          19    try
          20       {
          21       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          22       }
          23    catch (e)
          24       {
          25 
          26       try
          27          {
          28          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          29          }
          30       catch (e)
          31          {
          32          alert("您的瀏覽器不支持AJAX!");
          33          return false;
          34          }
          35       }
          36     }
          37  }
          38 </script>
          39 
          40 <form name="myForm">
          41     用戶: <input type="text" name="username" />
          42     時間: <input type="text" name="time" />
          43 </form></body>
          44 </html>
          45 

          例子解釋:

          首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變量。

          然后使用 XMLHttp=new XMLHttpRequest() 來創建此對象。這條語句針對 FirefoxOpera 以及 Safari 瀏覽器。假如失敗,則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"),假如也不成功,則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")

          假如這三種方法都不起作用,那么這個用戶所使用的瀏覽器已經太過時了,他或她會看到一個聲明此瀏覽器不支持 AJAX 的提示。

          ----------------------------------------------------------------------------------------------

          XMLHttpRequest 對象的三個重要的屬性

          onreadystatechange 屬性

          onreadystatechange 屬性存有處理服務器響應的函數。下面的代碼定義一個空的函數,可同時對 onreadystatechange 屬性進行設置:


          1 xmlHttp.onreadystatechange=function(){
          2    //我們需要在這里寫一些代碼
          3 }
          4 

          readyState 屬性

          readyState 屬性存有服務器響應的狀態信息。每當 readyState 改變時,onreadystatechange 函數就會被執行。

          這是 readyState 屬性可能的值:

          0 請求未初始化(在調用open()之前)

          1 請求已提出(調用send()之前)

          2 請求已發送(這里通常可以從響應得到內容頭部)

          3 請求處理中(響應中通常有部分數據可用,但是服務器還沒有完成響應)

          4 請求已完成(可以訪問服務器響應并使用它)

          我們要向這個 onreadystatechange 函數添加一條 If 語句,來測試我們的響應是否已完成(意味著可獲得數據):


          1 xmlHttp.onreadystatechange=function(){
          2     if (xmlHttp.readyState == 4){
          3         //從服務器的response獲得數據
          4     }
          5 }
          6 

          responseText 屬性

          可以通過 responseText 屬性來取回由服務器返回的數據。

          ----------------------------------------------------------------------------------------------

          向服務器發送一個請求

          要想把請求發送到服務器,我們就需要使用 open() 方法和 send() 方法。

          open() 方法需要三個參數。第一個參數定義發送請求所使用的方法(GET 還是 POST)。第二個參數規定服務器端腳本的 URL。第三個方法規定應當對請求進行異步地處理。

          send() 方法可將請求送往服務器。如果我們假設 HTML 文件和 ASP 文件位于相同的目錄,那么代碼是這樣的:

          xmlHttp.open("GET","time.jsp",true);

          xmlHttp.send(null);

           1 <html>
           2 <body>
           3 
           4 <script type="text/javascript">
           5 
           6 function ajaxFunction()
           7  {
           8  var xmlHttp;
           9  
          10  try
          11     {
          12    // Firefox, Opera 8.0+, Safari
          13     xmlHttp=new XMLHttpRequest();
          14     }
          15  catch (e)
          16     {
          17 
          18   // Internet Explorer
          19    try
          20       {
          21       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          22       }
          23    catch (e)
          24       {
          25 
          26       try
          27          {
          28          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          29          }
          30       catch (e)
          31          {
          32          alert("您的瀏覽器不支持AJAX!");
          33          return false;
          34          }
          35       }
          36     }
          37     
          38     xmlHttp.onreadystatechange=function()
          39       {
          40       if(xmlHttp.readyState==4)
          41         {
          42          document.myForm.time.value=xmlHttp.responseText;
          43         }
          44       }
          45     xmlHttp.open("GET","time.asp",true);
          46     xmlHttp.send(null);
          47     
          48  }
          49 </script>
          50 
          51 <form name="myForm">
          52 用戶: <input type="text" name="username" onkeyup="ajaxFunction();" />
          53 時間: <input type="text" name="time" />
          54 </form>
          55 
          56 </body>
          57 </html>
          58 

          ----------------------------------------------------------------------------------------------

          AJAX - 服務器端的腳本

          現在,我們要創建可顯示當前服務器時間的腳本。

          responseText 屬性會存儲從服務器返回的數據。在這里,我們希望傳回當前的時間。這是 "time.asp" 的代碼:


          1 <%
          2     response.expires=-1
          3     response.write(time)
          4 %>
          5 

          注釋:Expires 屬性可設置在頁面緩存失效前頁面被緩存的時間(分鐘)。Response.Expires=-1 指示頁面不會被緩存。




          posted on 2009-07-28 15:54 彭偉 閱讀(210) 評論(0)  編輯  收藏 所屬分類: Good_Study


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          <2009年7月>
          2829301234
          567891011
          12131415161718
          19202122232425
          2627282930311
          2345678

          導航

          統計

          常用鏈接

          留言簿(3)

          隨筆分類

          隨筆檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 乡城县| 襄垣县| 西吉县| 宜丰县| 吴川市| 江城| 灌阳县| 阿克陶县| 磴口县| 阳朔县| 建始县| 泾阳县| 弥勒县| 肃北| 宜良县| 长葛市| 金华市| 三门县| 天门市| 宜兴市| 张家口市| 石屏县| 铜鼓县| 龙井市| 抚远县| 扶风县| 驻马店市| 广昌县| 元阳县| 东丰县| 无棣县| 赤城县| 苍山县| 固原市| 庆安县| 阜阳市| 绍兴县| 上饶县| 明光市| 卫辉市| 宣城市|