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

服务器的基本概念与初始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.2Ajax的作用

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

5.3 应用场景

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

六、JQuery中的Ajax

 6.1 了解JQuery中的Ajax

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

 6.2 $.get()函数

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

 发起不带参数的请求

 不带参数的GET请求
  

发起带参数的请求

  发起带参数的GET请求

  

 6.3 $.post()函数

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

• 向服务器提交数据

  发起POST请求
  

6.4 $.ajax()函数

七、接口

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

7.2 接口的请求过程

7.3 接口测试工具

PostMan

测试get接口

 

 测试post接口

7.4 接口文档

八、图书管理案例

需引入的库

html部分

  

  

    

      
添加图书
    
    

      

        
书名
        
      
      

        
作者
        
      
      

        
出版社
        
      
      按钮
    
  

  

  

    

      

        
id
        
书名
        
作者
        
出版社
        
操作

      
    
    


    
  

js部分

最终效果：

九.聊天机器人

 需要引用的

html部分

  

    
    

      
小思同学
      
    
    
    

      

        

           嗨，最近向我没有
        
      
      

        

      
    
    
    

      
      
      
    
  
  
  
  
  
  

chart.js部分

$(function () {
  // 初始化右侧滚动条
  // 这个方法定义在scroll.js中
  resetui()
  // 为发送按钮绑定鼠标点击事件
  $('#btnSend').on('click',function(){
    let text = $('#ipt').val().trim() 
    if(text.length<=0){
      return $('#ipt').val('')
    }
    // 如果用户输入了聊天内容，则将聊天内容追加到页面上显示
    $('#talk_list').append('
 '+text+'
')
    $('#ipt').val('')
    // 重置滚动条的位置
    resetui()
    // 发起请求获取聊天内容
    getMsg(text)
  })

  // 获取聊天机器人发送回来的信息
  function getMsg(text){
    $.ajax({
      method:'GET',
      url:'https://ajax-base-api-t.itheima.net/api/robot',
      data:{
        spoken:text
      },
      success:function(res){
        // console.log(res);
        if(res.message==='success'){
          // 接收聊天消息
          let msg=res.data.info.text
          $('#talk_list').append('
 '+msg+'
')
          // 重置滚动条的位置
          resetui()
          // 调用getVoive函数把文本转化为语音
          getVoive(msg)
        }
      }
    })
  }
  // 把文字转换为语音进行播放
  function getVoive(text){
    $.ajax({
      method:'GET',
      url:'https://ajax-base-api-t.itheima.net/api/synthesize',
      data:{
        text: text
      },
      success:function(res){
        console.log(res);
        if(res.status===200){
          // 播放语音
          $('#voice').attr('src',res.voiceUrl)
        }
      }
    })
  }
  $('#ipt').on('keyup',function(e){
    // e.keyCode 可以获取到当前按键的编码
      if(e.keyCode===13) {
        // 调用按钮元素的 click 函数，可以通过编程的形式触发按钮的点击事件
      $('#btnSend').click()
    }
  })

})