mg不朽情缘游戏代码

書名：搞定J2EE核心技術與企業應用
作者名：常建功王向華編著
本章字數： 2314字
更新時間： 2018-12-29 13:50:12

8.2 Ajax涉及的技術

前面講過，Ajax采用XMLHttpRequest對象進行數據的異步交互，使用JavaScript增強用戶體驗，使用DOM組織內容，使用CSS顯示外觀，使用XML封裝數據，這幾種技術都是在軟件開發中經常使用的，并沒有什么新意，但正是這幾種技術的組合才創造了Ajax這種神奇的技術。下面將對這幾種技術進行簡要講解，以使讀者大體上了解這些技術。

8.2.1 XMLHttpRequest技術

在XMLHttpRequest技術出現以前，開發人員要想實現無須刷新頁面即可向服務器傳輸數據的功能，只能依賴于IFrame，但這種技術經常會被黑客們所利用，因此為了解決這個問題，微軟公司在其IE 5.0版本上，通過一個名為XMLHTTP的ActiveX對象來實現在不刷新頁面的情況下直接與服務器通信的能力。隨后，其他的瀏覽器比如Mozilla、Opera、Safari等也實現了具有相同接口的原生對象。

在IE 5.0和IE 6.0的相關版本中，XMLHttpRequest對象的實現方式如下：

      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

而在其他的瀏覽器中，XMLHttpRequest對象的實現方式如下：

      var xmlhttp = new XMLHttpRequest();

為了使其實現方式一致，在IE 7.0版本以后，XMLHttpRequest對象的實現方式也改為如下方式：

      var xmlhttp = new XMLHttpRequest();

但是為了能夠有更好的兼容性，所以在創建一個XMLHttpRequest對象時，一般采用如下寫法：

      var xmlhttp;
      if (window.XMLHttpRequest) {
          //其他瀏覽器
          xmlhttp = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          try {
              //IE瀏覽器
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
              xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
          }
      }

XMLHttpRequest可以采用同步或異步的方式與服務器通信。同步方式適用于數據量非常少的場合；一般情況下，在Ajax中都使用異步方式來與服務器通信。通過XMLHttpRequest對象的open方法的第3個參數，可以用來設定是采用同步還是異步方式，參數為true代表異步，為false代表同步，示例代碼如下：

      xmlhttp.open("GET", "http://localhost:8080/index.jsp", true);

設定好通信方式之后，需要調用send方法把數據傳輸給服務器。如果采用POST方式給服務器發送信息，則必須先調用setRequestHeader方法，修改MIME類型，示例代碼如下：

      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

如果前面設定為采用異步方式來進行通信，則還需要設置一個回調函數，當數據返回時系統會執行這個回調函數。通過為XMLHttpRequest對象的onreadystatechange屬性賦值來設置一個回調函數的示例代碼如下：

      xmlhttp.onreadystatechange=function() {...};

XMLHttpRequest對象的返回值可以是XML，也可以是文本，在服務器端要進行如下設置：

      response.setContentType("text/xml;charset=utf-8");
      response.setContentType("text/plain;charset=utf-8");

在客戶端則可以通過responseXML和responseText進行處理。

8.2.2 JavaScript（Java腳本語言）

一直以來，軟件開發人員對JavaScript都是持貶低的態度，直到Ajax的廣泛應用，JavaScript才被提到了一個新的高度。尤其是Prototype的出現，開發人員才發現：原來JavaScript也可以一種面向對象的方式來編程，也可以有類的封裝和繼承。

對于XMLHttpRequest對象的創建來說，下面這種創建方式無疑太麻煩，而且如果要創建的對象比較多的話，則要不斷地進行選擇判斷。原來的示例代碼如下：

      var xmlhttp;
      if (window.XMLHttpRequest) {
          //其他瀏覽器
          xmlhttp = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          try {
              //IE瀏覽器
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
              xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
          }
      }

針對上述問題，Prototype給出了一個很好的解決方案，在Prototype中定義了一個Try.these()函數，示例代碼如下：

      var Try = {
          these: function() {
              var returnValue;
              //遍歷參數，分別創建
              for (var i = 0, length = arguments.length; i ＜ length; i++) {
                  var lambda = arguments[i];
                  try {
                      //如果創建成功，則中止
                      returnValue = lambda();
                      break;
                  } catch (e) {}
              }
              return returnValue;
          }
      }

通過這個函數，創建XMLHttpRequest對象的方式就可以改為如下所示：

      var Ajax = {
          getTransport: function() {
              return Try.these(
                  //分別創建，直到有一個成功
                  function() {return new XMLHttpRequest()},
                  function() {return new ActiveXObject('Msxml2.XMLHTTP')},
                  function() {return new ActiveXObject('Microsoft.XMLHTTP')}
              ) || false;
          },
          //當前已經使用的XMLHttpRequest對象為0
          activeRequestCount: 0
      }

讀者可以看出，這樣的使用方式，無論是在代碼的組織上還是開發人員思路的整理上，都更加清晰，更容易理解和管理。

8.2.3 DOM（文檔對象模型）

DOM（文檔對象模型）是訪問和操作構成文檔的各種元素的應用程序接口。它是W3C組織的推薦標準，以樹形結構表示HTML和XML文檔，定義了遍歷樹和檢查、修改樹的節點的方法和屬性。一般來說，支持JavaScript的所有瀏覽器都支持DOM。

先來看一棵樹形圖，如圖8.5所示。

圖8.5 一棵樹形圖

這棵樹的根節點是A，下面有兩個子節點B和C，在B的下面又有兩個子節點D和E；在C的下面有一個子節點F，在F的下面有兩個子節點H和I。

如果將上述描述采用DOM的形式來描述，則如下所示：

      A. firstChild=B
      A. lastChild=C
      B. firstChild=D
      B. lastChild=E
      C. firstChild=F
      F. firstChild=H
      F. lastChild=I
      B. nextSibling=C
      C. prevSibling=B
      H.parentNode.parentNode.parentNode=A

或者：

      A. childNodes[0]=B
      A. childNodes[1]=C
      B. childNodes[0]=D
      B. childNodes[1]=E
      C. childNodes[0]=F
      F. childNodes[0]=H
      F. childNodes[1]=I

由此可以看出，采用DOM的方式來表示一棵樹，要比采用文字的表達方式清晰得多，而且容易操作。

在JavaScript中，用來獲取ID標記的元素，最常用的方法是：

      document.getElementById()

如果要獲取的元素比較多，這樣寫就太麻煩了，要重復很多代碼，因此在Prototype中，只采用一個簡單的$()符號就代替了document.getElementById()。$()的實現代碼如下所示：

      function $(element) {
          if (arguments.length ＞ 1) {
              //循環獲取闡述的值
              for (var i = 0, elements = [], length = arguments.length; i ＜ length; i++)
                  elements.push($(arguments[i]));
              return elements;
          }
          //假如是字符串類型
          if (typeof element == 'string')
              element = document.getElementById(element);
          return Element.extend(element);
      }

從上面的代碼可以看出，Prototype的$()函數其實還是采用了document.getElementById()方法，只不過對該方法進行了封裝，不但可以返回一個ID的元素，還可以返回多個ID的元素。

8.2.4 CSS（層疊樣式表單）

CSS（Cascading Style Sheet，層疊樣式表單）主要用于控制網頁樣式，并可以將展現樣式與網頁內容分離。其實也可以將網頁內容和展現樣式看成是面向對象的一種展示方式，這會使美工人員專著于展現樣式的設計，并將其樣式封裝好，這樣HTML開發人員就可以直接使用封裝好的樣式了，就好像使用類一樣。

有3種使用CSS的方式：

（1）在HTML網頁的＜HTML＞和＜BODY＞標記之間插入一個＜STYLE＞...＜/STYLE＞標記，在該標記內定義CSS樣式，示例代碼如下所示：

      ＜html＞
      ＜style type="text/css"＞
      ＜!--
      body {font: 12pt }
      table td {font: 12pt "Arial"; font-weight: bold; color: red}
      div {font: 12pt "Arial"; color: yellow}
      --＞
      ＜/style＞
      ＜body＞

（2）直接在標記的對象內使用CSS樣式。示例代碼如下所示：

      ＜td style=" font: 12pt "Arial"; font-weight: bold; color: red "＞表格＜/td＞

（3）單獨建立CSS樣式表，然后在HTML網頁中通過link把樣式表引入網頁，示例代碼如下所示：

      ＜head＞
      ＜title＞樣式示例＜/title＞
      ＜link rel=stylesheet href="../index.css" type="text/css"＞
      ＜/head＞

一般情況下，CSS的選擇符也有3種表示方式：

● className——使用類選擇符，要在標記的類名稱前加“.”。

● #id——使用ID選擇符，要在標記的ID前加“#”。

● Type——使用類型選擇符，就是直接使用標記的名稱。

8.2.5 XML（可擴展標識語言）

XML（eXtensible Markup Language，可擴展標識語言）是一種開放的、可擴展的、可自描述的語言結構，已經成為網上數據和文檔傳輸的標準。目前，XML已經成為最普遍的數據操縱和數據傳輸方式。但并非所有的數據傳輸方式都適合使用XML進行傳輸，當數據量大到一定程度時，創建和解析XML將變得非常困難，而且會耗費大量的資源。

官术网_书友最值得收藏!