7：RESTful 和 XML

一：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的用户信息

实例展示：

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}的用户信息`);
});

2. 静态页面：

 <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>

3. 结果展示：
   

二：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 文档解析成文档对象模型。

实例展示：

1. Node服务器搭建（模块引入部分省略，前几篇都包含）

//响应xml数据格式
app.get('/xml', (req, res) => {
    //设置响应由(必写)
    res.header('Content-Type', 'text/xml');
    //响应xml文件格式
    res.send('<myson><sid>001</sid><sname>超级大喜仔</sname></myson>');
});

2. 静态网页（细节含注释）

 <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>

3. 结果展示：
   

在路上，奥利给