一、服务器的基本概念与初始Ajax

Gik99

已于 2023-02-08 17:43:39 修改

阅读量135

点赞数

分类专栏： Node.js前后端交互 # 一、Ajax+HTTP 文章标签：服务器 ajax 前端

于 2023-02-08 17:32:37 首次发布

本文链接：https://blog.csdn.net/Gik99/article/details/128938099

版权

Node.js前后端交互同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

一、Ajax+HTTP

5 篇文章 0 订阅

订阅专栏

服务器的基本概念与初始Ajax

一、客户端与服务器

1.1 服务器

上网过程中,负责存放和对外提供资源的电脑,叫做服务器(本质就是电脑)

1.2 客户端

上网过程中,负责获取和消费资源的电脑,叫做客户端

二、URL地址

2.1 概念

URL全称UniformResourceLocator
中文称作为统一资源定位符
用于标识互联网上每个资源的唯一存放位置

2.2 URL地址组成部分

1.客户端与服务器之间的通信协议
2.存有该资源的服务器名称
3.资源在服务器上具体的存放位置

三、分析网页的打开过程

3.1客户端与服务器的通信过程

客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤
网页中的每一个资源,都是通过请求-处理-响应的方式从服务器获取回来的

3.2 基于开发者工具分析通信过程

在这里插入图片描述

四、服务器对外提供了哪些资源

4.1 常见资源

文字内容 image图片 Audio音频 Video视频

4.2 数据也是资源

网页中的数据,也是服务器对外提供的一种资源

4.3 数据是网页的灵魂

html是网页的骨架
css是网页的颜值
js是网页的行为
数据是网页的灵魂

4.4 网页中如何请求数据

数据,也是服务器对外提供的一种资源
只要是资源,必然要通过请求-处理-响应的方式进行获取
网页中请求服务器上的数据资源,则要用到XMLHttpRequest对象
XMLHttpRequest(xhr)是浏览器提供的js成员,可以请求服务器上的数据资源
简单用法 var xhrObj=new XMLHttpRequest()

4.5 资源的请求方式

get请求通常用于获取服务端资源(向服务器要资源)
post请求通常用于向服务器提交数据(往服务器发送资源)

五、了解Ajax

5.1 什么是Ajax

Ajax全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式

5.2 Ajax的作用

实现网页与服务器之间的数据交互

5.3 应用场景

检测用户名是否被占用
动态加载搜索提示列表
分页动态显示表格的数据
数据的增删改查

六、JQuery中的Ajax

6.1 了解JQuery中的Ajax

JQuery对XMLHttpRequest进行的封装,降低使用难度
$.get()
$.post()
$.ajax()

6.2 $.get()函数

$.get(url,[data],[callback])

在这里插入图片描述

发起不带参数的请求

		let btn = document.querySelector("#btnGet")
        btn.addEventListener('click', function () {
            console.log('点击了按钮');
            $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                console.log('服务器成功', res);
            })
        })

发起带参数的请求

 let btn = document.querySelector('#btn')
        btn.addEventListener('click', function () {
            $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                console.log('res', res);
            })
        })

6.3 $.post()函数

$.postt(url,[data],[callback])

在这里插入图片描述

向服务器提交数据

let obj = {
            bookname: '水浒传', author: '施耐庵', publisher: '人民出版社'
        };
        let btn = document.querySelector("#btn")
        btn.addEventListener('click', function () {
            $.post('http://www.liulongbin.top:3006/api/addbook', obj, function (res) {
                console.log(res);
            })
        })

6.4 $.ajax()函数

在这里插入图片描述

七、接口

7.1 概念

使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(接口)

7.2 接口的请求过程

在这里插入图片描述

7.3 接口测试工具

PostMan

测试get接口
测试post接口

7.4 接口文档

接口的说明文档，它是我们调用接口的依据

八、图书管理案例

需引入的库

 	<link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>

html部分

 <!-- 添加图书的panel面板 -->

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group">

                <div class="input-group-addon">
                    <input type="text" id="bookName" placeholder="请输入书名">
                </div>
                <div class="input-group-addon">
                    <input type="text" id="bookUser" placeholder="请输入作者">
                </div>
                <div class="input-group-addon">
                    <input type="text" id="bookPublish" placeholder="请输入出版社">
                </div>
                <button id="add" class="btn btn-primary">添加</button>
            </div>

        </div>
    </div>
    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>

js部分

		$(function () {
            //获取图书列表
            function getBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res);
                    if (res.status !== 200) {
                        return alert('获取失败')
                    }
                    let arr = []
                    for (let i = 0; i < res.data.length; i++) {
                        arr.push(`<tr>
                        <td>${res.data[i].id}</td>
                        <td>${res.data[i].bookname}</td>
                        <td>${res.data[i].author}</td>
                        <td>${res.data[i].publisher}</td>
                        <td><a class="del" data-id=${res.data[i].id}>删除</a></td>
                    </tr>`)
                    }
                    // console.log('打印arr', arr);
                    $('#tb').empty().append(arr.join(''))
                })
            }
            getBookList()
            //事件委托 为动态添加的元素绑定点击事件
            $('tbody').on('click', '.del', function () {
                var Id = $(this).attr('data-id')
                console.log('删除了', Id);
                $.get('http://www.liulongbin.top:3006/api/delbook', { id: Id }, function (res) {
                    if (res.status !== 200) return alert('删除失败')
                    console.log('删除成功', res);
                })
            })
            let addbtn = document.querySelector('#add')
            addbtn.addEventListener("click", function () {
                console.log('点击了添加按钮');
                let bookname = document.querySelector('#bookName').value.trim() //去掉两端空格
                let bookUser = document.querySelector('#bookUser').value.trim()
                let bookPublish = document.querySelector('#bookPublish').value.trim()
                if (bookname.length <= 0 || bookUser.length <= 0 || bookPublish.length <= 0) {
                    return alert('请填写完整的图书信息')
                }
                $.post('http://www.liulongbin.top:3006/api/addbook', {
                    bookname: bookname,
                    author: bookUser,
                    publisher: bookPublish
                }, function (res) {
                    console.log('res', res);
                    if (res.status !== 201) return alert('添加失败')
                    getBookList()
                })
                document.querySelector('#bookName').value = ''
                document.querySelector('#bookUser').value = ''
                document.querySelector('#bookPublish').value = ''
                alert('添加成功')
                // console.log('打印value', bookname);
            })
        })

最终效果

九、聊天机器人案例

需要引用的

 <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.mousewheel.js"></script>

html部分

 <div class="wrap">
    <!-- 头部 Header 区域 -->
    <div class="header">
      <h3>小思同学</h3>
      <img src="img/person01.png" alt="icon" />
    </div>
    <!-- 中间 聊天内容区域 -->
    <div class="main">
      <ul class="talk_list" style="top: 0px;" id="take_list">
        <li class="left_word">
          <img src="img/person01.png" /> <span>你好</span>
        </li>
        <!-- <li class="right_word">
          <img src="img/person02.png" /> <span>你好哦</span>
        </li> -->
      </ul>
      <div class="drag_bar" style="display: none;">
        <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
      </div>
    </div>
    <!-- 底部 消息编辑区域 -->
    <div class="footer">
      <img src="img/person02.png" alt="icon" />
      <input type="text" placeholder="说的什么吧..." id="ipt" class="input_txt" />
      <input type="button" value="发 送" id="btn" class="input_sub" />
    </div>
  </div>
  <!-- 只要为audio指定新的src 并且指定了autoplay属性 就会自动播放 -->
  <audio src="" id="voice" autoplay style="display: none;"></audio>
  <script type="text/javascript" src="js/scroll.js"></script>
  <script src="./js/chart.js"></script>

chart.js本部分

	$(function () {
    // 初始化右侧滚动条
    // 这个方法定义在scroll.js中
    resetui()
    //为发送按钮绑定鼠标点击事件
    let btn = document.querySelector('#btn')
    btn.addEventListener("click", function () {
        console.log('点击了发送')
        let ipt = document.querySelector('#ipt').value.trim();
        if (ipt.length <= 0) return alert('内容不能为空')
        //如果用户输入内容 则将聊天内容追加到页面上显示
        $('#take_list').append(`<li class="right_word">
        <img src="img/person02.png" /> <span>${ipt}</span>
      </li>`)
        //重置滚动条
        resetui()
        document.querySelector('#ipt').value = ''
        //发起请求
        $.get('http://www.liulongbin.top:3006/api/robot', {
            spoken: ipt
        }, function (res) {
            console.log(res)
            $('#take_list').append(`<li class="left_word">
            <img src="img/person01.png" /> <span>${res.data.info.text}</span>
          </li>`)
            //调用语音函数
            getVoice(res.data.info.text)
            resetui()
        })

    })
    //文字转语音接口
    //http://www.liulongbin.top:3006/api/synthesize
    //把文字转换成语音
    function getVoice(text) {
        $.ajax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/synthesize',
            data: {
                text: text
            },
            success: function (res) {
                console.log(res)
                if (res.status === 200) {
                    //播放音频
                    document.querySelector('#voice').src = res.voiceUrl
                }
            }
        })
    }
    let inputs = document.querySelector('#ipt')
    inputs.addEventListener('keyup', function (e) {
        // console.log('eee', e);
        if (e.keyCode === 13) {
            btn.click()
        }
    })
})