編輯“Ajax- 訪問Web服務(wù)”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[Ajax學(xué)習(xí)教程#Ajax學(xué)習(xí)教程|上一頁]] | {{template:開發(fā)語言導(dǎo)航}}</span>
<div style="clear:both;"></div>

多年以來一直存在一個(gè)軟件工程問題：從一臺(tái)機(jī)器調(diào)用另一臺(tái)機(jī)器上的服務(wù)或方法，即使這些機(jī)器使用完全不同的硬件或軟件。對(duì)于這個(gè)問題，最近提出的解決方案是Web服務(wù)。幾年前，Web服務(wù)大受吹捧，它的頭上圍繞著耀眼的光環(huán)，有些人認(rèn)為Web服務(wù)就是分布式軟件開發(fā)的“圣杯”。后來，它的光芒逐漸黯淡下來，Web服務(wù)最終找到了自己合適的位置，它是支持異構(gòu)計(jì)算機(jī)系統(tǒng)相互操作的一種有用的工具。 <br>

Web服務(wù)通常用作為計(jì)算機(jī)系統(tǒng)之間的通信管道，這與CORBA（公共對(duì)象請(qǐng)求代理體系結(jié)構(gòu)）、RMI（遠(yuǎn)程方法調(diào)用）或DCOM（分布式組件對(duì)象模型）很相似。區(qū)別在于，Web服務(wù)獨(dú)立于具體的開發(fā)商，可以采用大量編程工具和平臺(tái)來實(shí)現(xiàn)。為了支持更高層次的互操作性，Web服務(wù)是基于文本的協(xié)議，通常在HTTP之上實(shí)現(xiàn)。由于Web服務(wù)是基于文本的協(xié)議，所以幾乎總能使用某種XML。<br>

最著名的Web服務(wù)實(shí)現(xiàn)是SOAP（簡(jiǎn)單對(duì)象訪問協(xié)議）。SOAP是由W3C管理的規(guī)約，它是XML協(xié)議，對(duì)于如何調(diào)用遠(yuǎn)程過程給出了定義。<br>

WSDL（Web服務(wù)描述語言）文檔也是XML文檔，描述了如何創(chuàng)建Web服務(wù)的客戶。通過提供WSDL文檔，Web服務(wù)提供者就能很輕松地為可能的客戶創(chuàng)建客戶端代碼。WSDL和SOAP通常一同使用，不過不一定非得這樣，因?yàn)檫@兩個(gè)規(guī)約是分開維護(hù)的。<br>

盡管人們?cè)诤?jiǎn)化SOAP實(shí)現(xiàn)上做出了很大努力，但SOAP還是一個(gè)很難使用的技術(shù)，因此很受“排擠”，只有在跨平臺(tái)互操作性確實(shí)是一個(gè)很重要的需求時(shí)才會(huì)使用SOAP。實(shí)現(xiàn)Web服務(wù)還有一種更簡(jiǎn)單的方法，稱為REST（代表狀態(tài)傳輸），它在開發(fā)人員中享有越來越高的知名度，這些開發(fā)人員一方面希望得到SOAP好處的80%，另一方面只希望付出SOAP代價(jià)的20%。<br>

Yahoo!選擇REST作為其公共Web服務(wù)的協(xié)議。Yahoo!認(rèn)為基于REST的服務(wù)很容易理解，而且很推崇REST的“平易近人”，因?yàn)楫?dāng)前大多數(shù)編程語言都可以訪問REST。實(shí)際上，Yahoo!相信，與SOAP相比，REST的門檻更低，使用也更容易。<br>

通過使用REST，建立請(qǐng)求時(shí)可以先指定一個(gè)服務(wù)入口URL，再向查詢串追加搜索參數(shù)。服務(wù)將結(jié)果返回為XML文檔。這個(gè)模式聽上去是不是很熟悉？你說對(duì)了，它與本書中你見過的Ajax例子是一樣的。<br>

XMLHttpRequest對(duì)象非常適合作為基于REST的Web服務(wù)的客戶。使用XMLHttpRequest對(duì)象，可以向Web服務(wù)異步地發(fā)出請(qǐng)求，并解析得到的XML響應(yīng)。對(duì)于Yahoo! Web服務(wù)，XMLHttpRequest對(duì)象可以向Yahoo!發(fā)出請(qǐng)求，搜索指定的項(xiàng)。一旦Yahoo!返回響應(yīng)，則使用JavaScript DOM方法解析響應(yīng)，并向頁面動(dòng)態(tài)地提供結(jié)果數(shù)據(jù)。<br>

代碼清單4-15展示了如何使用Ajax技術(shù)訪問Yahoo! Web服務(wù)，并向頁面提供結(jié)果。頁面上的文本字段允許用戶指定搜索項(xiàng)。用戶可以使用選擇框來指定需要顯示多少個(gè)結(jié)果。點(diǎn)擊Submit（提交）按鈕就能啟動(dòng)搜索。<br>

不過，先等等！第2章我們?cè)?jīng)說過，XMLHttpRequest對(duì)象只能訪問發(fā)起文檔（即調(diào)用腳本）所在域中的資源。如果試圖訪問其他域的資源，可能因?yàn)闉g覽器的安全限制而失敗。怎么解決呢？<br>

解決辦法有好幾個(gè)。在第2章已經(jīng)了解到，瀏覽器實(shí)現(xiàn)安全沙箱的方式各有不同。IE會(huì)詢問用戶是否允許訪問另一個(gè)域中的資源。Firefox則會(huì)報(bào)告錯(cuò)誤，自動(dòng)失敗，雖然可以用專用于Firefox的JavaScript代碼避免這種行為。<br>

還有一個(gè)選擇，這也是本例中要采用的方法，就是建立Yahoo!的網(wǎng)關(guān)，它與XMLHttp-
Request腳本在同一個(gè)域中。由網(wǎng)關(guān)接收來自XMLHttpRequest對(duì)象的請(qǐng)求，并把它轉(zhuǎn)發(fā)到Y(jié)ahoo! Web服務(wù)。Yahoo!做出響應(yīng)返回結(jié)果時(shí)，網(wǎng)關(guān)再把結(jié)果路由傳送到瀏覽器。通過使用這種方法，就能避免使用瀏覽器特定的JavaScript。另外，這種方法也更加健壯，因?yàn)槟氵€可以擴(kuò)展網(wǎng)關(guān)，讓它支持其他的Web服務(wù)提供者。<br>

代碼清單4-15  
 yahooSearch.html<br>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki><br>
 <nowiki><html xmlns="http://www.w3.org/1999/xhtml"></nowiki><br>
 <head><br>
 <title>Yahoo! Search Web Services</title><br>
 <script type="text/javascript"><br>
 var xmlHttp;<br>
 function createXMLHttpRequest() {<br>
   if (window.ActiveXObject) {<br>
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
   else if (window.XMLHttpRequest) {<br>
       xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function doSearch() {<br>
    var url = "YahooSearchGateway?" + createQueryString()<br>
                                             + "&ts=" + new Date().getTime();<br>
    createXMLHttpRequest();<br>
    xmlHttp.onreadystatechange = handleStateChange;<br>
    xmlHttp.open("GET", url, true);<br>
    xmlHttp.send(null);<br>
 }<br>
 function createQueryString() {<br>
    var searchString = document.getElementById("searchString").value;<br>
    searchString = escape(searchString);<br>
    var maxResultsCount = document.getElementById("maxResultCount").value;<br>
    var queryString = "query=" + searchString + "&results=" + maxResultsCount;<br>
    return queryString;<br>
 }<br>
 function handleStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
        if(xmlHttp.status == 200) {<br>
            parseSearchResults();<br>
        }<br>
        else {<br>
            alert("Error accessing Yahoo! search");<br>
        }<br>
    }<br>
 }<br>
 function parseSearchResults() {<br>
    var resultsDiv = document.getElementById("results");<br>
    while(resultsDiv.childNodes.length > 0) {<br>
        resultsDiv.removeChild(resultsDiv.childNodes[0]);<br>
    }<br>
    var allResults = xmlHttp.responseXML.getElementsByTagName("Result");<br>
    var result = null;<br>
    for(var i = 0; i < allResults.length; i++) {<br>
        result = allResults[i];<br>
       parseResult(result);<br>
    }<br>
 }<br>
 function parseResult(result) {<br>
    var resultDiv = document.createElement("div");<br>
    var title = document.createElement("h3");<br>
    title.appendChild(document.createTextNode(<br>
                                        getChildElementText(result, "Title")));<br>
    resultDiv.appendChild(title);<br>
    var summary = document.createTextNode(getChildElementText(result, "Summary"));<br>
    resultDiv.appendChild(summary);<br>
    resultDiv.appendChild(document.createElement("br"));<br>
    var clickHere = document.createElement("a");<br>
    clickHere.setAttribute("href", getChildElementText(result, "ClickUrl"));<br>
    clickHere.appendChild(document.createTextNode<br>
                                       (getChildElementText(result, "Url")));<br>
    resultDiv.appendChild(clickHere);<br>
    document.getElementById("results").appendChild(resultDiv);<br>
 }<br>
 function getChildElementText(parentNode, childTagName) {<br>
    var childTag = parentNode.getElementsByTagName(childTagName);<br>
    return childTag[0].firstChild.nodeValue;<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
  <nowiki> <h1>Web Search Using Yahoo! Search Web Services</h1></nowiki><br>
  <nowiki><form action="#"></nowiki><br>
    <nowiki>Search String: <input type="text" id="searchString"/></nowiki><br>
    <nowiki><br/><br/></nowiki><br>
    <nowiki>Max Number of Results:</nowiki><br>
    <nowiki><select id="maxResultCount"></nowiki><br>
        <nowiki><option value="1">1</option></nowiki><br>
        <nowiki><option value="10">10</option></nowiki><br>
        <nowiki><option value="25">25</option></nowiki><br>
        <nowiki><option value="50">50</option></nowiki><br>
    <nowiki></select></nowiki><br>
    <nowiki><br/><br/></nowiki><br>
    <nowiki><input type="button" value="Submit" onclick="doSearch();"/></nowiki><br>
  <nowiki></form></nowiki><br>
  <nowiki><h2>Results:</h2></nowiki><br>
  <nowiki><div id="results"/></nowiki><br>
 </body><br>
 </html><br>

點(diǎn)擊頁面上的Submit（提交）按鈕將調(diào)用doSearch函數(shù)。這個(gè)函數(shù)使用createQuery- String函數(shù)來創(chuàng)建目標(biāo)URL，createQueryString函數(shù)負(fù)責(zé)把搜索項(xiàng)和顯示的最大結(jié)果數(shù)（即最多顯示多少個(gè)結(jié)果）放在查詢串中。需要注意，參數(shù)名（query和results）都是Yahoo! Search API定義的。<br>

createQueryString函數(shù)創(chuàng)建的查詢串發(fā)送給Yahoo! Search網(wǎng)關(guān)。在這個(gè)例子中，網(wǎng)關(guān)實(shí)現(xiàn)為名為YahooSearchGatewayServlet的Java servlet（見代碼清單4-16）。這個(gè)servlet的目的很簡(jiǎn)單，就是轉(zhuǎn)發(fā)對(duì)Yahoo! Search URL的所有請(qǐng)求，并把結(jié)果傳給瀏覽器。當(dāng)然，這個(gè)網(wǎng)關(guān)也可以用其他語言（而不是Java）來實(shí)現(xiàn)。這個(gè)網(wǎng)關(guān)很簡(jiǎn)單，在XMLHttpRequest對(duì)象需要訪問其他域中的資源時(shí)，這個(gè)網(wǎng)關(guān)確實(shí)能解決問題。<br>

代碼清單4-16  
 YahooSearchGatewayServlet.java<br>
 package ajaxbook.chap4;<br>
 import java.io.*;<br>
 import java.net.HttpURLConnection;<br>
 import java.net.URL;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 public class YahooSearchGatewayServlet extends HttpServlet {<br>
   private static final String YAHOO_SEARCH_URL =<br>
        <nowiki>"http://api.search.yahoo.com/WebSearchService/V1/webSearch?"</nowiki><br>
                     + "appid=your_app_id" + "&type=all";<br>
    protected void processRequest(HttpServletRequest request<br>
                                               , HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String url = YAHOO_SEARCH_URL + "&" + request.getQueryString();<br>
        HttpURLConnection con = (HttpURLConnection)new URL(url).openConnection();<br>
        con.setDoInput(true);<br>
        con.setDoOutput(true);<br>
        con.setRequestMethod("GET");<br>
        //Send back the response to the browser<br>
        response.setStatus(con.getResponseCode());<br>
        response.setContentType("text/xml");<br>
        BufferedReader reader =<br>
                 new BufferedReader(new InputStreamReader(con.getInputStream()));<br>
        String input = null;<br>
        OutputStream responseOutput = response.getOutputStream();<br>
        while((input = reader.readLine()) != null) {<br>
            responseOutput.write(input.getBytes());<br>
        }<br>
    }<br>
    protected void doGet(HttpServletRequest request, HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        processRequest(request, response);<br>
    }<br>
 }<br>

Yahoo! Search把結(jié)果返回給網(wǎng)關(guān)，而且網(wǎng)關(guān)將結(jié)果再轉(zhuǎn)發(fā)給瀏覽器后，會(huì)調(diào)用parse-
SearchResults函數(shù)。這個(gè)函數(shù)從XMLHttpRequest對(duì)象獲取得到的XML文檔，并查找所有標(biāo)記名為Result的元素。<br>

各Result元素傳給parseResult函數(shù)。這個(gè)函數(shù)使用Result元素的子元素Title、Summary、ClickUrl和Url創(chuàng)建內(nèi)容，并增加到頁面。<br>

可以看到，與基于REST的Web服務(wù)結(jié)合使用時(shí)，Ajax技術(shù)相當(dāng)強(qiáng)大。如果想在你自己的域中訪問Web服務(wù)，用JavaScript就可以完成。否則，當(dāng)訪問其他域的資源時(shí)，就要?jiǎng)?chuàng)建外部資源的某種網(wǎng)關(guān)，這樣就能避免瀏覽器安全沙箱問題。<br>

圖4-15顯示了結(jié)合使用Yahoo! Search Web服務(wù)和Ajax的搜索結(jié)果。<br>
[[Image:image015.jpg]]
[[category:Ajax]]