RESTful API的设计，是以请求方式GET、POST、PUT等为动作，URL为动作请求的资源名词的标准来设计的。
但是在实际应用中，光靠HTML其实无法完成除了GET和POST之外的请求方法，那么DELETE和PUT方法如果完成呢？RESTful怎么投入到应用呢？
可能有人想到通过form表单来向后端提交数据，但是form表单在HTML标准中是只支持POST和GET方法的。
鉴于现有条件，光靠HTML不能发送PUT和DELETE请求，我们这里用到了Javascript语言的Ajax技术来辅助实现RESTful。
在传统的Internet编程中，如果想得到服务器后端数据，或者发送客户端信息到服务器，需要建立一个HTML form然后只能以GET或者POST方法将数据发送到服务器端。
用户需要点击”Submit”按钮来发送数据信息，然后等待服务器响应请求，页面重新加载。 这样服务器每次都会返回一个新的页面， 响应有可能很慢并且用户交互不友好。
使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request，不但可以在HTTP协议请求中加入Request Method:GET(POST、PUT、DELETE)的HTTP头,来模拟多种HTTP请求， 还可以做到异步发送请求到web服务器并且接受web服务器返回的信息(不用重新加载页面，既做到免刷新)，在回调函数中对服务器返回的数据在HTML中进行动态渲染，并且展示给用户的还是同一个页面。
总结AJAX技术作用：
1、通过JS自带的XMLHttpRequest对象，实现多种HTTP请求，弥补HTML标签只能完成POST和GET请求的缺陷。
2、不用重新请求页面，仅仅以JS线程和服务器后端互动，得到后端数据后可以在回调函数中完成前端页面的动态渲染，做到免刷新技术。
下面是在Springboot框架中的实例演示，笔者的Spingboot文件结构如下所示：
image.png
在ViewController控制器中添加以下路由实现方法，来作为展示的基础页面：
@RequestMapping("/ajax")
public String ajax() {
System.out.println(">> ViewController.ajax() is called!");
return "ajax";
}
在ajax.html中，主要内容如下：
<button id="get">GET（获取数据）</button>
<button id="post">POST（添加数据）</button>
<button id="put">PUT（更新数据）</button>
<button id="delete">DELETE（删除数据）</button>
并且通过引用的方式来调用Jquery(一个JS框架，可以使用封装好的AJAX方法)和一个自定义JS文件：
<!--使用jquery框架-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--JS实现AJAX部分-->
<script type="text/javascript" src="js/main.js"></script>
main.js内容如下(如读者不熟悉Javascript的使用，可以看注释来了解功能)：
/**
* Created by Doublestar on 2017/10/1.
*/
$(document).ready(function(){ //在HTML文档加载完成后执行
//GET方法
$("#get").click(function(){ //HTML中id为get的HTML标签的点击动作
$.ajax({
url:'http://localhost:8080/product', //请求的URL地址
type:'GET', //请求方法，GET、POST、PUT、DELETE在这里设置
timeout:5000, //超时时间
dataType:'text', //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){ //成功的回调函数
$("#result").html(data) //设置id为result的标签的html内容为返回的data数据
},
error:function(xhr,textStatus){ //失败的回调函数
$("#result").html(textStatus)
}
})
})
//POST方法
$("#post").click(function(){
$.ajax({
url:"http://localhost:8080/product/?id=1&name=测试POST&age=21",
type:'POST', //请求方法，GET、POST、PUT、DELETE在这里设置
timeout:5000, //超时时间
dataType:'text', //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
$("#result").html(data)
},
error:function(xhr,textStatus){
$("#result").html(textStatus)
}
})
})
//PUT方法
$("#put").click(function(){
$.ajax({
url:'http://localhost:8080/product/1/?name=测试PUT&age=22',
type:'PUT', //请求方法，GET、POST、PUT、DELETE在这里设置
timeout:5000, //超时时间
dataType:'text', //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
$("#result").html(data)
},
error:function(xhr,textStatus){
$("#result").html(textStatus)
}
})
})
//DELETE方法
$("#delete").click(function(){
$.ajax({
url:'http://localhost:8080/product/1',
type:'DELETE', //请求方法，GET、POST、PUT、DELETE在这里设置
timeout:5000, //超时时间
dataType:'text', //返回的数据格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
$("#result").html(data)
},
error:function(xhr,textStatus){
$("#result").html(textStatus)
}
})
})
})
最后的浏览器效果如下:
image.png
以上是实例演示基础的内容，接下来介绍具体的请求执行：
User类代码：
package com.hello.data;
public class User {
private Long id;
private String name;
private Integer age;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
在DataController中，笔者写了四个路由分别来响应对应的GET、POST、PUT和DELETE方法（讲解略）：
//使用User类来存储数据实现增删改查
static Map<Long, User> users = Collections.synchronizedMap(new HashMap<Long, User>());
@GetMapping("/product")
public List<User> getInfo(){
List<User> r = new ArrayList<User>(users.values());
return r;
}
@PostMapping("/product")
public String addInfo(@ModelAttribute User user){
users.put(user.getId(), user);
return "success";
}
@PutMapping("/product/{id}")
public String putInfo(@PathVariable Long id, @ModelAttribute User user){
// 处理"/users/{id}"的PUT请求，用来更新User信息
User u = users.get(id);
u.setName(user.getName());
u.setAge(user.getAge());
users.put(id, u);
return "success";
}
@DeleteMapping("/product/{id}")
public String delInfo(@PathVariable Long id){
// 处理"/users/{id}"的DELETE请求，用来删除User
users.remove(id);
return "success";
}
这四个路由对应的处理方法，对应上文对main.js展示中AJAX的URL。
下面我们来看执行效果：
首先我们点击GET按钮获取数据，发现为空
[]
image.png
再点击POST按钮，显示执行成功，并且再点击GET查看，发现多了一条数据
[{"id":1,"name":"测试POST","age":21}]
image.png
再点击PUT按钮来尝试更新数据，发现数据更新为
[{"id":1,"name":"测试PUT","age":22}]
![Uploading image_153709.png . . .]
最后，我们尝试删除这条数据，删除成功后，GET查看数据发现已经清空为
[]
image.png
至此，使用AJAX技术对于RESTful API的实现演示结束了，笔者在这里使用了JAVAEE的Spingboot框架，但是上文所讲技术移植性很强，除了对于后端实现部分，其他部分均可以在PHP、Python等后端环境下正常工作（读者如有细节问题，可以结合阅读代码理解）。
感谢阅读
作者：Doublestar
博客：https://www.yourhome.ren
网友评论