基于JavaScript的REST客戶(hù)端框架
現(xiàn)在REST是一個(gè)比較熱門(mén)的概念，REST已經(jīng)成為一個(gè)在Web上越來(lái)越常用的應(yīng)用，基于REST的Web服務(wù)越來(lái)越多，包括Twitter在內(nèi)的微博客都是用REST做為對(duì)外的API，先前我曾經(jīng)介紹過(guò)“基于REST架構(gòu)的Web Service設(shè)計(jì)”，并給出了一些服務(wù)器端和客戶(hù)端代碼，隨著JavaScript的廣泛應(yīng)用，我這里就給出一個(gè)輕量級(jí)的基于JavaScript的REST客戶(hù)端框架。
這個(gè)JavaScript客戶(hù)端主要使用了XMLHttpRequest對(duì)象來(lái)實(shí)現(xiàn)通過(guò)HTTP對(duì)服務(wù)器操作GET、PUT、POST和DELETE以檢索和修改資源。值得注意的是，由于安全方面的考慮，Javascript被限制了跨域訪問(wèn)的能力，因此在調(diào)用XMLHttpRequest的時(shí)候，應(yīng)該注意跨域訪問(wèn)的問(wèn)題，比如使用同一個(gè)域的動(dòng)態(tài)文件做代理，或者其他方法避開(kāi)跨域訪問(wèn)的問(wèn)題。我這里給出的代碼主要是根據(jù)我先前的那段代碼修改過(guò)來(lái)的，其客戶(hù)端JavaScript代碼如下所示：
- function httpGet(url, method, data) {
- var xmlhttp;
- xmlhttp = new XMLHttpRequest();
- xmlhttp.open (method, url + "?" + data, false);
- xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
- xmlhttp.setRequestHeader ("Content-Length", data.length);
- xmlhttp.send (null);
- if (xmlhttp.Status = 200) return xmlhttp.responseText;
- }
- function httpPost(url, method, data) {
- var xmlhttp;
- xmlhttp = new XMLHttpRequest();
- xmlhttp.open (method, url, false);
- xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
- xmlhttp.setRequestHeader ("Content-Length", data.length);
- xmlhttp.send (data);
- if (xmlhttp.Status = 200) return xmlhttp.responseText;
- }
- function httpPut(url, method, data) {
- var xmlhttp;
- xmlhttp = new XMLHttpRequest();
- xmlhttp.open (method, url, false);
- xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
- xmlhttp.setRequestHeader ("Content-Length", data.length);
- xmlhttp.send (data);
- if (xmlhttp.Status = 200) return xmlhttp.responseText;
- }
- function httpDelete(url, method, data) {
- var xmlhttp;
- xmlhttp = new XMLHttpRequest();
- xmlhttp.open (method, url + "?" + data, false);
- xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
- xmlhttp.setRequestHeader ("Content-Length", data.length);
- xmlhttp.send (null);
- if (xmlhttp.Status = 200) return xmlhttp.responseText;
- }
- function test() {
- document.write (httpGet("http://localhost/rest/service.asp", "GET", "do=GET"));
- document.write (httpGet("http://localhost/rest/service.asp", "POST", "do=POST"));
- document.write (httpGet("http://localhost/rest/service.asp", "PUT", "do=PUT"));
- document.write (httpGet("http://localhost/rest/service.asp", "DELETE", "do=DELETE"));
- }
我這里使用這個(gè)代碼編寫(xiě)了一個(gè)簡(jiǎn)單的應(yīng)用例子，就是管理Twitter好友的應(yīng)用，大家點(diǎn)這里可以下載使用，因?yàn)榭缬蛟L問(wèn)的問(wèn)題，這段JavaScript只支持IE在本地使用。
【編輯推薦】
