10.20 Ajax 第一天服务器概念和ajax-CSDN博客

本文链接：https://blog.csdn.net/m0_56356342/article/details/127414550

一、服务器相关基础概念

二、Ajax的基础用法

三、请求报文&响应报文

四、接口相关的基础概念

一

1.客户端

前端开发中，特指“web浏览器”

作用：将互联网世界中的Web资源加载，并呈现到浏览器窗口供用户使用

2.服务器

概念：提供服务的设备

如：百度云服务器、知乎网站的服务器

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

两步骤：请求-响应

请求：客户端通过网络去找服务器要资源的过程

响应：服务器把资源通过网络发送给客户端的过程

4资源与URL地址

（1）资源在服务器上

(2)URL地址

a. 协议

概念：网络协议的简称，用来确保通信双方能读懂彼此发送的消息的内容。

b.主机名

概念：主机名同来标识互联网中服务器的唯一性。

c.端口号

概念：0-65535，主要作用是表示一台计算机中特定进程所提供的服务。

80端口可以省略不写

二

1.Ajax

浏览器的技术，用来实现客户端网页请求服务器的数据

2.Ajax五种请求数据的方式

POST	向服务器新增数据
GET	从服务器获取数据
DELETE	删除服务器的数据
PUT	更新服务器的数据（完整更新）
PATCH	更新服务器的数据（部分更新补丁）

3.发送get请求

<body>
  <!-- 必须先导入 axios 的库文件，然后就可以调用 axios() 函数了 -->
<script src="../学生练习初始-源代码/lib/axios.js"></script>
  <script>
    // =================================== 目标 ===================================
    // 发起 GET 请求，获取图书列表的数据
    // http://www.liulongbin.top:3009/api/getbooks
    axios({
      url:'http://www.liulongbin.top:3009/api/getbooks',
      method:'get'
    }).then(function(result){
      //回调函数在成功后执行
      console.log(result)
      console.log(result.data)
    })
  </script>
</body>

（1）参数

params:查询条件

    axios({
      url:'http://www.liulongbin.top:3009/api/getbooks',
      method:'get',
      params:{//参数查询条件
        id:2
      }
      
    }).then(function(result){
      console.log(result)
      console.log(result.data)

    })

也可以写为（本质）

url:'http://www.liulongbin.top:3009/api/getbooks？id=2'，

（2）URL编码

URL 地址不允许出现中文，特殊符号

encodeURI() 编码

decodeURI() 解码

console.log(encodeURI('红楼梦'))//%E7%BA%A2%E6%A5%BC%E6%A2%A6
    console.log(decodeURI('%E7%BA%A2%E6%A5%BC%E6%A2%A6'))

4.发送post请求

    document.querySelector('#btnPOST').addEventListener('click',function(){
      axios({
      method:'post',
      url:'http://www.liulongbin.top:3009/api/addbook',
      data:{
        bookname:'历险记',
         author:'不要',
        publisher:'黑马出版社'
      }
      
    }).then(({data:res})=>{
      console.log(res)
    })
    })

post 可以带数据data，也可以带查询参数，但get不可以写数据data（没用）

5、查询账号密码

 // 请求方式 POST
    // 地址 http://www.liulongbin.top:3009/api/login
    // 参数:  username 用户名     password  密码
      // 1
    document.querySelector('#btnLogin').addEventListener('click',function(){
      // 2
      let username=document.querySelector("#username").value
      let password=document.querySelector("#password").value
      // 3.
      axios({
        url:'http://www.liulongbin.top:3009/api/login',
        method:'post',
        data:{
          username:username,
          password//当属性和值同名时可以简写 
        }
      }).then(({data:res})=>{
        console.log(res)

        if(res.code===200){
          alert('恭喜你登录成功，稍后将跳转到首页')
          location.href='http://www.jd.com'
        }else{
          alert(res.msg)
        }
      })
    })

三

请求报文规定了客户端以什么格式把数据发送给服务器

响应报文规定了服务器以什么格式把数据响应给客户端

1、请求报文

请求行（位于network-headers-request-headers），请求头，请球体（位于network-rayload）,空行