欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

http://blog.dreambrook.com/zlliu/archive/2005/05/18/623.aspx
大約五年前我曾參與一個(gè)web應用的開(kāi)發(fā)，該應用的一個(gè)主要需求是要提供類(lèi)似window胖客戶(hù)端的外觀(guān)和操作方式。先不討論為什么當初這個(gè)項目不直接使用window胖客戶(hù)端，而把這個(gè)難題帶到了web開(kāi)發(fā)中，事實(shí)是在五年前還沒(méi)有多少這樣的東西（基于web的胖客戶(hù)端）存在。

作為對這一課題研究的結果，我偶然發(fā)現了一些用于實(shí)現上述需求的非典型技術(shù)和方法。使用這些技術(shù)實(shí)現的web應用，直到現在很多人還不能相信它們是基于web的，然后事實(shí)上你確實(shí)是通過(guò)瀏覽器來(lái)訪(fǎng)問(wèn)它們。

讓我沒(méi)想到的是，幾年后的今天我所實(shí)現的那種東西又出現另一種實(shí)現方式，它就是AJAX。AJAX是Adaptive Path的人們發(fā)明的一個(gè)名詞，全稱(chēng)是Asynchronous Javascript + XML。

這說(shuō)明了一件事情，提煉你曾經(jīng)擁有的好主意是致富的一個(gè)好方法。如果當初我意識到我所作的是一件很特別的東西......我跑題了

Google正在使用這項技術(shù)，許多其它的組織也是。但它究竟是個(gè)什么東西呢？概括地說(shuō)，AJAX不是一項技術(shù)，只是一種考慮問(wèn)題的方法，這個(gè)方法整合了多種技術(shù)且基于這樣一種考慮：為每一個(gè)客戶(hù)請求構造一張全新的web頁(yè)面是低效的且應該避免的。

舉個(gè)例子，假設你再一張web頁(yè)面上放了兩個(gè)SELECT元素，你想讓第二個(gè)SELECT元素的內容隨著(zhù)第一個(gè)的內容變化而變化，這是實(shí)際開(kāi)發(fā)中很常見(jiàn)的一個(gè)問(wèn)題而且有多種解決方案。

AJAX對此問(wèn)題的解決方法是：只重畫(huà)頁(yè)面的一小部分，在這里是第二個(gè)SELECT。

AJAX基于一種稱(chēng)為XMLHttpRequest的組件。討厭Microsoft的人要開(kāi)始叫嚷了，因為這是Microsoft的東西。不錯，Microsoft有些東西做得挺好，而且先于其他人做了。Microsoft最初實(shí)現XMLHttpRequest是在Windows下的IE 5中，其實(shí)現方式是ActiveX對象（好吧，他們做得不完全對?。?。Monilla項目在Mozilla 1.0中實(shí)現了一個(gè)本地版本，還有Netscape 7。其他的還有Apple的Safari 1.2，Opera 7.60，Firefox等，有提供了類(lèi)似的功能。

好，讓我們切開(kāi)這塊蛋糕看看它的實(shí)現。

 XMLHttpRequest是一個(gè)客戶(hù)端組件，需要在Javascript腳本中實(shí)例化后才能使用。幸運的事，這樣做非常簡(jiǎn)單。在IE中，實(shí)現代碼如下：

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

對其他的瀏覽器，使用：

var req = new XMLHttpRequest();

你當然想在代碼中實(shí)現一些判斷邏輯，有很多方法可以做到這點(diǎn)，但是我傾向于簡(jiǎn)單的方案，比如只是檢查一下某個(gè)對象是否存在：

var req;

if (window.XMLHttpRequest) { // Non-IE browsers  

req = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE  

req = new ActiveXObject("Microsoft.XMLHTTP");

}

不管你怎么實(shí)現，上面的代碼執行之后，你會(huì )發(fā)現變量req現在指向了一個(gè)XMLHttpRequest對象，這個(gè)對象有一組屬性和方法，列舉如下：

Property                                  Description

onreadystatechange                  Event handler for an event that fires at every state change

readyState                                Status:

0 = uninitialized

1 = loading

2 = loaded

3 = interactive

4 = complete

responseText                            Data returned from server in string form

responseXML                          DOM-compatible document object of data returned

status                                        HTTP status code (i.e., 200, 404, 500, etc.)

statusText                                 String message associated with the status code

Method                                   Description

abort()                                      Stops the current request

getAllResponseHeaders()         Returns all headers (name and value) as a string

getResponseHeader(                Returns the value of the specified header

"<headerName>")

open("", "URL"[,       Opens a connection and retrieves response from the specified URL.

asyncFlag[, ""[,      Can also specify optional values method (GET/POST), username and

"<password>"]]])                     password for secured sites

 send(content)                           Transmits request (can include postable string or DOM object data)

setRequestHeader                    Assigns values to the specifed header

("<name>", "")

繼續介紹之前，我強烈建議你運行本文末尾給出的那個(gè)web應用。如果你還沒(méi)有下載示例應用，請參見(jiàn)本文末尾給出的鏈接，下載并安裝到你的servlet引擎中。示例應用是以展開(kāi)目錄的結構形式發(fā)布的，所以只要解壓后拷貝解壓出的目錄就可以工作。比如，如果你使用Tomcat，只要把xhrstruts目錄拷貝到\webapps下就可以了。完成之后，啟動(dòng)服務(wù)器即可。

該應用可以通過(guò)http://localhost:8080/xhrstruts （將8080換成你的服務(wù)器所監聽(tīng)的端口）來(lái)訪(fǎng)問(wèn)。  它展示了幾種不同的應用場(chǎng)景：一個(gè)可排序的table，一個(gè)可以改變另一個(gè)下拉框內容的下拉框（如上文所述），一個(gè)RSS feed 解析器。正像本文標題中說(shuō)明的那樣，該示例基于struts。盡管AJAX可以完全獨立于struts和任何其他的后端技術(shù)，但我使用Java，而且使用struts，所以......

web應用中的所有例子都在代碼頭部的標簽中包含有一段代碼，盡管每個(gè)都有所不同，總體是出自相同的基礎代碼，如下：

var req;

  var which;

  function retrieveURL(url) {

    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = processStateChange;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = processStateChange;

        req.open("GET", url, true);

        req.send();

      }

    }

  }

  function processStateChange() {

    if (req.readyState == 4) { // Complete

      if (req.status == 200) { // OK response

        document.getElementById("urlContent").innerHTML = req.responseText;

      } else {

        alert("Problem: " + req.statusText);

      }

    }

  }
 

這段代碼邏輯很簡(jiǎn)單。你可以調用retieveURL()方法，傳入你想訪(fǎng)問(wèn)的URL，該方法根據瀏覽器類(lèi)型實(shí)例化相應的XMLHttpRequest對象，開(kāi)啟一個(gè)對指定URL的請求。請留意這里的try...catch語(yǔ)句塊，加入這段代碼是因為有些瀏覽器（比如Firefox）不允許使用XMLHttpRequest從一個(gè)域到另一個(gè)域發(fā)送請求，換句話(huà)說(shuō)，如果你從www.omnytex.com/test.htm頁(yè)面請求www.cnn.com，該類(lèi)瀏覽器是不允許的，但是，訪(fǎng)問(wèn)www.omnytext.com/whatever.htm是可以的。IE允許這種跨域訪(fǎng)問(wèn)但是需要用戶(hù)驗證。

有一行代碼很重要：req.onreadystatechange = processStateChange，這行代碼設定了一個(gè)事件處理器。當request的狀態(tài)發(fā)生變化時(shí)，processStateChange()方法將被調用。然后，你可以檢查XMLHttpRequest對象的狀態(tài)進(jìn)行后續處理。上面的列表中列出了所有可能的值。這里我們關(guān)心的是請求完成之后，下面要做的事就是檢查收到的HTTP響應代碼，除200（HTTP OK）外的任何代碼都預示著(zhù)需要顯示錯誤信息。

在這個(gè)例子中，如果響應接收完成且沒(méi)有異常，我們就把接收到的代碼插入urlContent span，然后最終效果就顯示在頁(yè)面上。

語(yǔ)法上講，這就是所有XMLHttpRequest的使用方法！

另一個(gè)更有趣的例子是web應用中的第二個(gè)，動(dòng)態(tài)排序table。下面是完整的頁(yè)面代碼：

<code>

<html>

<head>

<title>Example 2</title>

<script>

  var req;

  var which;

  function retrieveURL(url) {

    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = processStateChange;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = processStateChange;

        req.open("GET", url, true);

        req.send();

      }

    }

  }

  function processStateChange() {

    if (req.readyState == 4) { // Complete

      if (req.status == 200) { // OK response

        document.getElementById("theTable").innerHTML = req.responseText;

      } else {

        alert("Problem: " + req.statusText);

      }

    }

  }

</script>

</head>

<body onLoad="retrieveURL(‘example2RenderTable.do‘);">

<h1>Example 2</h1>

Dynamic table.<hr>

<p align="right"><a href="home.do">Return home</a></p><br>

This example shows how a table can be built and displayed on-the-fly by showing

sorting of a table based on clicks on the table headers.

<br><br>

<span id="theTable"></span>

<br>

</body>

</html>

</code>
 

請注意中幾乎相同的代碼。這里我們實(shí)際請求的是一個(gè)Struts的Action，該action返回繪制table的HTML腳本。還有其他方法可以達到相同的效果而無(wú)需在A(yíng)ction中產(chǎn)生HTML，但這是最快捷而且工作良好的。當頁(yè)面最初載入的時(shí)候我們發(fā)送請求到Action得到一個(gè)最初的table，點(diǎn)擊任何列標題可以將該table排序并重新繪制。

我們再來(lái)看另外一個(gè)例子，RSS feed 解析器：

<code>

<html>

<head>

<title>Example 6</title>

</head>

<script>

  var req;

  var which;

  function retrieveURL(url) {

    if (url != "") {

      if (window.XMLHttpRequest) { // Non-IE browsers

        req = new XMLHttpRequest();

        req.onreadystatechange = processStateChange;

        try {

          req.open("GET", url, true);

        } catch (e) {

          alert(e);

        }

        req.send(null);

      } else if (window.ActiveXObject) { // IE

        req = new ActiveXObject("Microsoft.XMLHTTP");

        if (req) {

          req.onreadystatechange = processStateChange;

          req.open("GET", url, true);

          req.send();

        }

      }

    }

  }

  function processStateChange() {

    if (req.readyState == 4) { // Complete

      if (req.status == 200) { // OK response

        // We‘re going to get a list of all tags in the returned XML with the

        // names title, link and description.  Everything else is ignored.

        // For each that we find, we‘ll constuct a simple bit of HTML for

        // it and build up the HTML to display.  When we hit a title,

        // link or description element that isn‘t there, we‘re done.

        xml = req.responseXML;

        i = 0;

        html = "";

        while (i >= 0) {

          t = xml.getElementsByTagName("title")[i];

          l = xml.getElementsByTagName("link")[i];

          d = xml.getElementsByTagName("description")[i];

          if (t != null && l != null && d != null) {

            t = t.firstChild.data;

            l = l.firstChild.data;

            d = d.firstChild.data;

            html += "<a href=\"" + l + "\">" + t + "</a><br>" + d + "<br><br>";

            i++;

          } else {

            i = -1;

          }

        }

        document.getElementById("rssData").innerHTML = html;

      } else {

        alert("Problem: " + req.statusText);

      }

    }

  }

</script>

<body>

<h1>Example 6</h1>

RSS example.<hr>

<p align="right"><a href="home.do">Return home</a></p><br>

This example is a more real-world example.  It retrieves an RSS feed from one

of three user-selected sources, parses the feed and displays the headlines

in clickable form.  This demonstrates retrieving XML from a server and

dealing with it on the client.

<br><br>

<b>Note that the RSS feed XML is actually stored as files within this

webapp.  That is because some browsers will not allow you to retrieve

content with XMLHttpRequest outside the domain of the document trying to

do the call.  Some browsers will allow it with a warning though.</b>

<br><br>

<form name="rssForm">

  <select name="rssFeed" onChange="retrieveURL(this.value);">

    <option value=""></option>

    <option value="cnn_rss.xml">CNN Top Stories</option>

    <option value="slashdot_rss.xml">Slashdot</option>

    <option value="dans_rss.xml">Dan‘s Data</option>

  </select>

</form>

<hr><br>

<span id="rssData"></span>

<br>

</body>

</html>

</code>
 

首先要注意的是RSS feed XML文件實(shí)際上是包含在web應用中的本地文件。一個(gè)真正實(shí)用使用XMLHttpRequest的RSS閱讀器是不可能實(shí)現的因為要涉及到跨域處理。然而，一個(gè)可行的方法是寫(xiě)一個(gè)Action從真正的URL處得到feed然后將之返回給請求頁(yè)面，參見(jiàn)示例7。除了需要一個(gè)Action作為代理來(lái)得到RSS feed外，頁(yè)面上代碼還是相同的。

上面的例子跟其它的類(lèi)似，除了在事件處理器中的XML解析代碼。這只是一個(gè)簡(jiǎn)化的例子，我們只是簡(jiǎn)單地忽略了除標題之外的其他標簽。在一個(gè)真實(shí)的例子中（比如一個(gè)請求復雜XML的應用），解析代碼會(huì )變得復雜，但這個(gè)我留給讀者作為練習。

讓我們以一個(gè)在請求中提交數據的例子做結，中的腳本如下：

var req;

  var which;

  function submitData() {

    // Construct a CSV string from the entries.  Make sure all fields are

    // filled in first.

    f = document.theForm.firstName.value;

    m = document.theForm.middleName.value;

    l = document.theForm.lastName.value;

    a = document.theForm.age.value;

    if (f == "" || m == "" || l == "" || a == "") {

      alert("Please fill in all fields first");

      return false;

    }

    csv = f + "," + m + "," + l + "," + a;

    // Ok, so now we retrieve the response as in all the other examples,

    // except that now we append the CSV onto the URL as a query string,

    // being sure to escape it first.

    retrieveURL("example5Submit.do?csv=" + escape(csv));

  }

  function retrieveURL(url) {

    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = processStateChange;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = processStateChange;

        req.open("GET", url, true);

        req.send();

      }

    }

  }

  function processStateChange() {

    if (req.readyState == 4) { // Complete

      if (req.status == 200) { // OK response

        document.getElementById("theResponse").innerHTML = req.responseText;

      } else {

        alert("Problem: " + req.statusText);

      }

    }

  }
 

在這個(gè)例子中，我們只是簡(jiǎn)單地用用戶(hù)的輸入創(chuàng )建了一個(gè)以逗號分割的字符串。你當然可以創(chuàng )建一個(gè)XML文檔然后提交，事實(shí)上那是更常見(jiàn)的情況。但是這正是我不想那樣做的一部分原因：我想告訴讀者你并不一定非要使用XMLHttpRequest對象來(lái)傳輸XML。就本例而言，除了將一個(gè)CSV字符串添加到URL之外并沒(méi)有做任何事情。在網(wǎng)上有不計其數的例子演示了如何創(chuàng )建XML文檔并使用XMLHttpRequest.send()方法提交，我強烈推薦你閱讀相關(guān)文檔，當然，如果你使用這種方法的話(huà)。

我希望這篇簡(jiǎn)短的文章和附加的例子可以給你一個(gè)好的研究XMLHttpRequest對象的起點(diǎn)。在結束之前我還想說(shuō)AJAX概念本身并不強制你使用XMLHttpRequest對象，你可以使用其他方法得到相同的效果，比如代替XMLHttpRequest的隱藏frame，這正是我在本文開(kāi)頭提到的在五年前的那個(gè)項目中采用的方法。然而，XMLHttpRequest的確使得AJAX概念更容易實(shí)現，而且更標準。請參見(jiàn)Google研究這種技術(shù)的強大之處。

但是，我提醒所有認為全部的web應用都應該用這種方法開(kāi)發(fā)的人，我不認為這是web開(kāi)發(fā)的不二法門(mén)。在某些情況下它是一個(gè)好的方案，但在其他情況下不是。如果獲得盡可能多的瀏覽者是你的目標，你最好放棄這種方案。如果一個(gè)用戶(hù)取消了瀏覽器的腳本解釋功能（而你的網(wǎng)站除了這又沒(méi)有其他出彩的地方），這就不是一個(gè)好的情況。還有其他AJAX不適用之處，但是你完全可以把它當成你工具箱中的一個(gè)普通工具：它適合某些工作，不適合其他工作。畢竟，你不能指望用一個(gè)膠水槍釘釘子吧？