Ajax第一天

最新推荐文章于 2024-08-04 16:33:59 发布

zhaoyifei01

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量74

点赞数

文章标签： javascript 服务器前端

本文链接：https://blog.csdn.net/zhaoyifei01/article/details/129103045

版权

本文介绍了服务器的基本概念，阐述了客户端与服务端的通信过程，特别是Ajax在异步数据传输中的作用。详细讲解了HTTP请求的组成部分，包括URL、请求方式（GET,POST等）、请求报文和响应状态码，同时也提到了接口文档的使用和参数设置方法。

摘要由CSDN通过智能技术生成

服务器的概念 & 初识 Ajax

客户端-浏览器-展示资源

服务端-服务器(远程电脑大型仓库)-存储资源

客户端---服务端通信

步骤

请求

1、怎么请求？

url地址--四部分--{1、协议--确保双方说的话都能听懂

2、地址主机名--确保服务器唯一性

3、端口号【1、确定找那一个服务 2/80端口可以省略】

4、资源

}

2、怎么发起请求？

ajax/axios

3、请求方式

POST 、 GET、delete、put、patch

POST/GET【1、get没有请求体 2、get不能使用data传参，只能使用params，post都可以使用 3、get参数拼接在URL最后的？=&】

4、请求报文？

几部分

请求行--请求方式，协议版本请求地址

请求头

空格

请求体--主要用来传参的

响应

响应状态码

1xx--等待客户端下一步操作

2xx--成功

3xx--重定向

4xx--客户端错误

5xx--服务端错误

业务状态码

后端程序员和前端商量来

响应报文

响应行/状态行--状态码 / 协议版本/ 状态描述

响应头

空格

响应体--返回的数据

接口文档的使用

求参数（(GET方法就是Query参数，POST方法就是 Body参数)

在 axios中通过headers选项设置Headers请求头参数

在 axios中通过data选项设置Body请求体参数

在 axios中通过params选项设置Query参数
如果有 Query 参数，axios 会在内部把这个对象转为key=value&key=value 的数据格式，然后以?分割频道的url的后面传递给接口

axios({
	// Method请求方法
	method: 'post ',//常见的有GET(一般用于查询操作)、POST(一般用于添加)、PUT(一般用于修改，完整替换)、DELETE(一般用于删除操作)、PATCH(一般用于修改操作，局部修改)，从使用角度不用关心为什么，因为这是后端设计的，我们决定不了。
	// PATH请求路径
	url: '请求路径"，
	//请求路径中的:xXx表示路径参数
	//使用的时候需要指定参数，把数据值替换掉:xxx
	ur1: '/mp/v1_0/articles /:target',
	
	ur1: ' /mp/v1_0/articles/1',
	ur1: '/mp/v1_0/articles/2',
	//在 axios 中通过headers选项设置请求头参数
	headers : {
	//名字:值
	//因为 axios 发送的请求默认会设置'Content-Type ' : 'application/json'
	'Content-Type ' : 'application/json',
	
	Authorization:用户token
	},
// axios 中通过data选项设置Body请求体参数
	data:{
		mobile: '',
		code: ''
	},
// axios中通过params选项设置Query参数
// Query参数也叫查询参数
//如果有 Query参数，axios 会在内部把这个对象转为 key=value&key=value 的数据格式，然后以?分割频道的url的后面传递给接口
	params:{
		status: 2
	}
})
请求参数:
-请求头 Headers
-查询参数Query
-请求体Body
-路径参数

1.如何查看请求参数是否正确

检查你的请求参数是否正确
- 请求方法
- 请求路径
- 请求参数
  - Headers参数
  - Query参数(在url中)
  - Body参数
  - 路径参数（在url中)

机器人案例

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/main.css" />
  <title>聊天机器人</title>
</head>

<body>
  <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="talk_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>
    <!-- 底部 消息编辑区域 -->
    <div class="footer">
      <img src="img/person02.png" alt="icon" />
      <input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />
      <input type="button" value="发 送" class="input_sub" id="btnSend" />
    </div>
  </div>
  <!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
  <audio src="" id="voice" autoplay style="display: none;"></audio>
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script src="../../04-源代码/lib/axios.js"></script>
  <script>
    // 1、获取所有参与对哈的标签
    const ipt = document.querySelector('#ipt') // 获取里边数据
    const btnSend = document.querySelector('#btnSend')// 发送数据
    const talkList = document.querySelector('#talk_list')// 展示数据
    const voice = document.querySelector('#voice')// 展示声音

    function addLi(className, sign, message) {
      // 封装的作用 将所有固定的代码都写出来 将所有变化的东西都传进来
       // 2.2 创建一个Li标签 追加在ul后边
      const li = document.createElement('li')
      //2.3、添加类名
      li.className = `${className}_word`
      // 2.4、添加内容
      li.innerHTML = `
        <img src="img/person0${sign}.png" /> <span>${message}</span>
      `
      // 2.5追加
      talkList.appendChild(li)
    }

    // 2、注册点击事件
    btnSend.addEventListener('click', function() {
      // 2.1 获取数据
      const message = ipt.value
      console.log(message);
      // // 2.2 创建一个Li标签 追加在ul后边
      // const li = document.querySelector('li')
      // //2.3、添加类名
      // li.className = 'right_word'
      // // 2.4、添加内容
      // li.innerHTML = `
      //   <img src="img/person01.png" /> <span>${message}</span>
      // `
      // // 2.5追加
      // talkList.appendChild(li)

      addLi('right', 2, message)

      //2.6、向机器人 说话 获取它的说话
      axios({
        url:'http://www.liulongbin.top:3006/api/robot',
        method:'GET',
        params:{
          spoken: message
        }
      }).then(({data: res}) => {
         console.log(res);

         //2.7、获取机器人聊天内容
        //  console.log(res.data.info.text);

        addLi('left', 1, res.data.info.text)

        //2.9 调用函数获取声音
        getVioce(res.data.info.text)

        
      })
    })
    
    // 2.8 获取声音信息
    function getVioce(text) {
      axios({
          url:'http://www.liulongbin.top:3006/api/synthesize',
          method: 'GET',
          params:{
            text
          }
        }).then(({data:res}) => {
          console.log(res);    
          // 将声音链接给到标签
          voice.src = res.voiceUrl
        })
    }
  </script>
</body>

</html>

main.css

body {
    font-family: 'Microsoft YaHei';
}
.wrap {
    position: fixed;
    width: 450px;
    left: 50%;
    margin-left: -225px;
    top: 20px;
    bottom: 20px;
    border: 1px solid #ebebeb;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.header {
    height: 55px;
    background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6));
    overflow: hidden;
}
.header h3 {
    color: #faf3fc;
    line-height: 55px;
    font-weight: normal;
    float: left;
    letter-spacing: 2px;
    margin-left: 25px;
    font-size: 18px;
    text-shadow: 0px 0px 5px #944846;
}
.header img {
    float: right;
    margin: 7px 25px 0 0;
    border-radius: 20px;
    box-shadow: 0 0 5px #f7f2fe;
}
.main {
    position: absolute;
    left: 0;
    right: 0;
    top: 55px;
    bottom: 55px;
    background-color: #f4f3f3;
    box-sizing: border-box;
    padding: 10px 0;
    overflow:hidden;
}
.talk_list{
    position: absolute;
    width:100%;
    left:0px;
    top:0px;
    height: 100%;
    overflow: auto;
}


.talk_list::-webkit-scrollbar {
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.talk_list::-webkit-scrollbar-thumb {
  border-radius   : 10px;
  background-color: rgba(128, 58, 242, 0.6);
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.talk_list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}


.talk_list li {
    overflow: hidden;
    margin: 20px 0px 30px;
}
.talk_list .left_word img {
    float: left;
    margin-left: 20px;
}
.talk_list .left_word span {
    float: left;
    background-color: #fe9697;
    padding: 10px 15px;
    max-width: 290px;
    border-radius: 12px;
    font-size: 16px;
    color: #fff;
    margin-left: 13px;
    position: relative;
    line-height: 24px;
    word-break: break-word;
}
.talk_list .left_word span:before {
    content: '';
    position: absolute;
    left: -8px;
    top: 3px;
    width: 13px;
    height: 12px;
    background: url('../img/corner01.png') no-repeat;
}
.talk_list .right_word img {
    float: right;
    margin-right: 20px;
}
.talk_list .right_word span {
    float: right;
    background-color: #fff;
    padding: 10px 15px;
    max-width: 290px;
    border-radius: 12px;
    font-size: 16px;
    color: #000;
    margin-right: 13px;
    position: relative;
    line-height: 24px;
    word-break: break-word;
}
.talk_list .right_word span:before {
    content: '';
    position: absolute;
    right: -8px;
    top: 3px;
    width: 13px;
    height: 12px;
    background: url('../img/corner02.png') no-repeat;
}
.drag_bar{
    position:absolute;
    right:0px;
    top:0px;
    background-color: #fff;
    height:100%;
    width:6px;
    box-sizing:border-box;
    border-bottom:1px solid #f4f3f3;
}
.drager{
    position:absolute;
    left:0px;
    top:0px;
    background-color: #cdcdcd;
    height:100px;
    width:6px;
    border-radius:3px;
    cursor: pointer;
}

.footer{
    width:100%;
    height: 55px;
    left:0px;
    bottom:0px;
    background-color:#fff;
    position: absolute;
}

.footer img{
    float: left;
    margin:8px 0 0 20px;
}

.input_txt{
    float: left;
    width:270px;
    height:37px;
    border:0px;
    background-color: #f4f3f3;
    margin:9px 0 0 20px;
    border-radius:8px;
    padding:0px;
    outline:none;
    text-indent:15px;
}
.input_sub{
    float: left;
    width:70px;
    height:37px;
    border:0px;
    background-color: #fe9697;
    margin:9px 0 0 15px;
    border-radius:8px;
    padding:0px;
    outline:none;
    color:#fff;
    cursor: pointer;    
}

reset.css

body,ul,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}
img{
    border:0px;
}

/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,.clearfix:after{
    content:'';
    display:table;    
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1;
}

.fl{
    float:left;
}
.fr{
    float:right;
}