2017.10.1 AJAX技术对RESTful的前端实现

简介: RESTful API的设计,是以请求方式GET、POST、PUT等为动作,URL为动作请求的资源名词的标准来设计的。但是在实际应用中,光靠HTML其实无法完成除了GET和POST之外的请求方法,那么DELETE和PUT方法如果完成呢?RESTful怎么投入到应用呢?可能有人想到通过form表单来向后端提交数据,但是form表单在HTML标准中是只支持POST和GET方法的。

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

目录
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
183 29
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
39 6
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
52 3
|
1月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
39 3
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
47 3
|
1月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
87 4