Currently, REST is a popular concept. REST has become an increasingly common Web application, and there are more and more REST-based Web Services, micro-blogs, including Twitter, use REST as their external APIs. I have previously introduced "REST-based Web Service design" and provided some server and client code, with the wide application of JavaScript, a lightweight JavaScript-based REST client framework is provided here.
This JavaScript client mainly uses the XMLHttpRequest object to perform GET, PUT, POST, and DELETE operations on the server through HTTP to retrieve and modify resources. It is worth noting that, due to security considerations, Javascript is restricted by cross-origin access capabilities. Therefore, when calling XMLHttpRequest, you should pay attention to cross-origin access, for example, you can use dynamic files in the same domain as a proxy, or use other methods to avoid cross-origin access. The code I provided here is mainly modified according to my previous code. The client JavaScript code is as follows:
- 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"));
- }
I used this code to compile a simple application example, that is, to manage Twitter friends. You can download and use it here because of cross-origin access problems, this section of JavaScript only supports local use of IE.
Edit recommendations]
- How to optimize the performance of JavaScript scripts
- Perfect solution for controlling Excel printing with JavaScript
- How to connect to the Access database using Javascript
- Document and window objects in JavaScript
- Introduction to the simulation of object-oriented technology in JavaScript