赞
踩
RESTFUL是一种网络应用程序的设计风格和开发方式,基于HTTP,可以使用XML格式定义或JSON格式定义。
我们先来看看传统的请求地址风格:
这里我们都是在请求地址后面携带请求信息的标识,这里增删改查的语义不明确且混乱,比如删除用户使用的是get请求,后面的标识也是五花八门,很混乱,所以我们可以使用RESTFUL风格的API。
1.RESTFUL AP 概述。
一套关于设计请求的规范。
在这套规范中,我们获取数据就使用get请求,添加就是post,更新就是put请求,删除就是delete请求。
注意:传统的表单是不支持后面二种提交方式的,但是在ajax中就支持啦。
我们在请求方式里面已经有对应的操做方式了,所有请求地址就直接传递信息就好了。
这里传入的信息一般都和数据库中我们要操做集合的名字一样,方便我们进行各种的操做。
2.RESTFUL AP 实现。
这样我们就很清楚的明白要进行什么操做,操做的对象是哪个。
//服务器端代码 app.get('/users', (req, res) => { res.send('当前是获取用户列表信息的路由'); }); // 获取某一个用户具体信息的路由 app.get('/users/:id', (req, res) => { // 获取客户端传递过来的用户id const id = req.params.id; res.send(`当前我们是在获取id为${id}用户信息`); }); // 删除某一个用户 app.delete('/users/:id', (req, res) => { // 获取客户端传递过来的用户id const id = req.params.id; res.send(`当前我们是在删除id为${id}用户信息`); }); // 修改某一个用户的信息 app.put('/users/:id', (req, res) => { // 获取客户端传递过来的用户id const id = req.params.id; res.send(`当前我们是在修改id为${id}用户信息`); }); //客户端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="/js/jquery.min.js"></script> <script type="text/javascript"> // 获取用户列表信息 $.ajax({ type: 'get', url: '/users', success: function (response) { console.log(response) } }) // 获取id为1的用户信息 $.ajax({ type: 'get', url: '/users/1', success: function (response) { console.log(response) } }) // 删除id为10的用户信息 $.ajax({ type: 'delete', url: '/users/10', success: function (response) { console.log(response) } }) // 修改id为10的用户信息 $.ajax({ type: 'put', url: '/users/10', success: function (response) { console.log(response) } }) </script> </body> </html>
我们要操做的都是users集合里面的数据,所以我们的请求地址里都是使用的users,然后后面的都是关于要操做的具体用户的信息,在设置服务器端代码时候,我们获取用户id时使用的是参数形式**(/:id),然后我们使用req.params** 来获取,我们在上面写的**/:id**,所以req.params下面就有一个id属性,然后我们使用req.params.id获取,记住,我们设置什么,对应的该对象下面会有一个多出的方法。忘了说了,这是在express框架里,该框架提供的方法。
3.XML基础
//服务器端代码: app.get('/xml', (req, res) => { res.header('content-type', 'text/xml'); res.send('<message><title>消息标题</title><content>消息内容</content></message>') }); //客户端代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btn">发送请求</button> <div id="container"></div> <script type="text/javascript"> var btn = document.getElementById('btn'); var container = document.getElementById('container'); btn.onclick = function () { var xhr = new XMLHttpRequest(); xhr.open('get', '/xml'); xhr.send(); xhr.onload = function () { // xhr.responseXML 获取服务器端返回的xml数据 var xmlDocument = xhr.responseXML; var title = xmlDocument.getElementsByTagName('title')[0].innerHTML; container.innerHTML = title; } } </script> </body> </html>
在客户端中,我们要告诉客户端返回的是xml数据,在响应头中设置即可。
当服务器端返回的是xml类型的数据时,我们就不能使用responseText来获取返回数据了,我们使用responseXML来获取返回数据。但是直觉使用会发现是一整个文档,我们要获取里面具体的某个数据时,使用的方法和html是一样的,我们这里使用的先获取到所有的title标签,然后返回值是一个数组,获取第一值里的innerHTML内容。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。