一:RESTful 风格的 API
1.传统请求地址回顾
GET http://www.example.com/getUsers // 获取用户列表
GET http://www.example.com/getUser?id=1 // 比如获取某一个用户的信息
POST http://www.example.com/modifyUser // 修改用户信息
GET http://www.example.com/deleteUser?id=1 // 删除用户信息
2.RESTful API 概述
一套关于设计请求的规范。
GET: 获取数据
POST: 添加数据
PUT: 更新数据
DELETE: 删除数据
eg:
users => /users
articles => /articles
3.RESTful API 的实现
GET:http://www.example.com/users 获取用户列表数据
POST:http://www.example.com/users 创建(添加)用户数据
GET:http://www.example.com/users/1 获取用户ID为1的用户信息
PUT:http://www.example.com/users/1 修改用户ID为1的用户信息
DELETE:http://www.example.com/users/1 删除用户ID为1的用户信息
实例展示:
- Node服务器搭建(模块引入部分省略,前几篇都包含)
//!RESTful测试
app.get('/user', (req, res) => {
res.send('展示user数据');
});
//获取某个用户具体信息路由
app.get('/user/:id', (req, res) => {
// 获取占位符方式的参数
const id = req.params.id;
res.send(`查询id=${id}的用户信息`);
});
// 添加数据的路由
app.post('/user', (req, res) => {
const info = req.body;
res.send(`增加的用户信息为${info}`);
});
// 修改数据的路由
app.put('/user/:id', (req, res) => {
const id = req.params.id;
res.send(`修改id=${id}的用户信息`);
});
// 删除数据的路由
app.delete('/user/:id', (req, res) => {
const id = req.params.id;
res.send(`删除id=${id}的用户信息`);
});
- 静态页面:
<script src="/js/jquery.min.js"></script>
<script>
// 获取用户信息列表
$.ajax({
type: 'get',
url: '/user',
success: function(response) {
console.log(response);
}
});
// 获取id为1的用户信息
$.ajax({
type: 'get',
url: '/user/1',
success: function(response) {
console.log(response);
}
});
// 添加用户信息
$.ajax({
type: 'post',
url: '/user',
success: function(response) {
console.log(response);
}
});
// 修改id为1的用户信息
$.ajax({
type: 'put',
url: '/user/1',
success: function(response) {
console.log(response);
}
});
// 删除id为1的用户信息
$.ajax({
type: 'delete',
url: '/user/1',
success: function(response) {
console.log(response);
}
});
</script>
- 结果展示:
二:XML 基础
1.XML是什么
XML 的全称是 extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据。
<students>
<student>
<sid>001</sid>
<name>张三</name>
</student>
<student>
<sid>002</sid>
<name>李四</name>
</student>
</students>
2.XML DOM
XML DOM 即 XML 文档对象模型,是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。
实例展示:
- Node服务器搭建(模块引入部分省略,前几篇都包含)
//响应xml数据格式
app.get('/xml', (req, res) => {
//设置响应由(必写)
res.header('Content-Type', 'text/xml');
//响应xml文件格式
res.send('<myson><sid>001</sid><sname>超级大喜仔</sname></myson>');
});
- 静态网页(细节含注释)
<button>发送请求</button>
<div class="box"></div>
<script>
// 获取元素
var button = document.querySelector('button');
var box = document.querySelector('.box');
// 点击按钮发送请求
button.onclick = function() {
//创建ajax实例对象
var xhr = new XMLHttpRequest();
//配置ajax实例
xhr.open('get', '/xml');
// 发送请求
xhr.send();
//监听事件接收响应
xhr.onload = function(response) {
if (xhr.status == 200) {
// 返回的xml数据
console.log(xhr.responseXML);
const xmlDocument = xhr.responseXML;
// xmlDocument相当于HTMLDocument,具有跟其相似的方法
console.log(xmlDocument.getElementsByTagName('sname')[0].innerHTML);
var sname = xmlDocument.getElementsByTagName('sname')[0].innerHTML;
// 在容器中展示
box.innerHTML = sname;
}
}
}
</script>
- 结果展示: