本文介紹了一個基於JavaScript的REST用戶端架構。這是一個輕量級架構,JavaScript用戶端主要使用了XMLHttpRequest對象來實現通過HTTP對伺服器操作GET、PUT、POST和DELETE以檢索和修改資源。
現在REST是一個比較熱門的概念,REST已經成為一個在Web上越來越常用的應用,基於REST的Web服務越來越多,包括
Twitter在內的微部落格都是用REST做為對外的API,先前我曾經介紹過“基於REST架構的Web
Service設計”,並給出了一些伺服器端和用戶端代碼,隨著JavaScript的廣泛應用,我這裡就給出一個輕量級的基於JavaScript的
REST用戶端架構。
這個JavaScript用戶端主要使用了XMLHttpRequest對象來實現通過HTTP對伺服器操作GET、PUT、POST和
DELETE以檢索和修改資源。值得注意的是,由於安全方面的考慮,Javascript被限制了跨域訪問的能力,因此在調用
XMLHttpRequest的時候,應該注意跨域訪問的問題,比如使用同一個域的動態檔案做代理,或者其他方法避開跨域訪問的問題。我這裡給出的代碼主
要是根據我先前的那段代碼修改過來的,其用戶端JavaScript代碼如下所示:
function httpGet(url, method, data) {<br /> var xmlhttp;<br /> xmlhttp = new XMLHttpRequest();<br /> xmlhttp.open (method, url + "?" + data, false);<br /> xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");<br /> xmlhttp.setRequestHeader ("Content-Length", data.length);<br /> xmlhttp.send (null);<br /> if (xmlhttp.Status = 200) return xmlhttp.responseText;<br /> } </p><p> function httpPost(url, method, data) {<br /> var xmlhttp;<br /> xmlhttp = new XMLHttpRequest();<br /> xmlhttp.open (method, url, false);<br /> xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");<br /> xmlhttp.setRequestHeader ("Content-Length", data.length);<br /> xmlhttp.send (data);<br /> if (xmlhttp.Status = 200) return xmlhttp.responseText;<br /> } </p><p> function httpPut(url, method, data) {<br /> var xmlhttp;<br /> xmlhttp = new XMLHttpRequest();<br /> xmlhttp.open (method, url, false);<br /> xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");<br /> xmlhttp.setRequestHeader ("Content-Length", data.length);<br /> xmlhttp.send (data);<br /> if (xmlhttp.Status = 200) return xmlhttp.responseText;<br /> } </p><p> function httpDelete(url, method, data) {<br /> var xmlhttp;<br /> xmlhttp = new XMLHttpRequest();<br /> xmlhttp.open (method, url + "?" + data, false);<br /> xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");<br /> xmlhttp.setRequestHeader ("Content-Length", data.length);<br /> xmlhttp.send (null);<br /> if (xmlhttp.Status = 200) return xmlhttp.responseText;<br /> } </p><p> function test() {<br /> document.write (httpGet("http://localhost/rest/service.asp", "GET", "do=GET"));<br /> document.write (httpGet("http://localhost/rest/service.asp", "POST", "do=POST"));<br /> document.write (httpGet("http://localhost/rest/service.asp", "PUT", "do=PUT"));<br /> document.write (httpGet("http://localhost/rest/service.asp", "DELETE", "do=DELETE"));<br /> }
我這裡使用這個代碼編寫了一個簡單的應用例子,就是管理Twitter好友的應用,大家點這裡可以下載使用,因為跨域訪問的問題,這段JavaScript只支援IE在本地使用。
原文:http://developer.51cto.com/art/200906/128718.htm