Ajax初始

AJAX初识

1. Ajax概念和axios使用

   1. 定义（MDN）：Ajax是异步的js和XML ，简单点说就是使用XMLHttpRequest对象与服务器通信

   2. 使用axios库与服务器进行数据通信

      • 基于 XMLHttpRequest 封装
      • Vue、React 项目中都会用到 axios

      语法：引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      
          <script>
              axios({
                  url:'http://hmajax.xxxx.net/api/province'
              }).then(result =>{
                  console.log(result.data.list)
                  const p = document.createElement('p')
                  p.innerHTML = result.data.list.join('<br>')
                  document.body.appendChild(p)
              })
          </script>
      

2. 认识URL

   1. 定义：统一资源定位符，简称网址，用于访问网络上的资源

   2. 组成：http\https→协议；中间部分→域名；后面部分→资源路径

      协议：规定浏览器和服务器之间传输数据的格式–一指定格式传输数据，以指定数据解析服务器返回的资源

      域名：标记服务器在互联网中方位

      资源路径：标记资源在服务器下的具体位置

3. URL查询参数

   1. 定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

   2. for instance：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

   3. axios－查询参数

      语法：使用 axios 提供的 params 选项
      注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值

      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
          <script>
              // 定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
              // 语法：?参数名1=值&参数名2=值2
      
              //axios-查询参数
              axios({
                  url : 'http://xxxx.xxxx.net/api/city',
                  params:{
                      pname:"安徽省"
                  }
              }).then(result =>{
                  console.log(result.data)
                  p = document.createElement('p')
                  p.innerHTML = result.data.list.join('<br>')
                  document.body.appendChild(p)
              })
          </script>
      

4. 常用请求方法和数据提交

   请求方法	操作
   GET	获取数据
   POST	数据提交
   PUT	修改数据（全部）
   EDLETE	删除数据
   PATCH	修改数据（部分）

   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
       <script>
           //get请求数据,post提交数据,put(修改全部数据),delete(删除数据),patch(修改部分数据)
         /*   axios({
               url:'',
               method: '',
               data:''
           }) */
           axios({
               url:'http://hmajax.xxxx.net/api/register',
               method:'post',
               data:{
                   username: 'xxxxxxx',
                   password: '7654321'
               }
   
           }).then(result =>{
               console.log(result)
           }).cathc(error =>{
       		console.log(error)//错误处理
   })
       </script>
   

5. HTTP协议-报文

   HTTP 协议：规定了浏览器发送及服务器返回内容的格式
   请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

   请求报文的组成部分有:

   1. 请求行：请求方法，URL，协议
   2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
   3. 空行：分隔请求头，空行之后的是发送给服务器的资源
   4. 请求体：发送的资源

   HTTP响应状态码

   状态码	说明
   1xx	信息
   2xx	成功
   3xx	重定向
   4xx	客户端错误
   5xx	服务端错误

6. 接口文档

   接口文档：描述接口的文章（后端工程师）
   接口：使用 AJAX 和服务器通讯时，使用的 URL，请求方法，以及参数

7. form-serialize插件的使用

<form action="javascript:;" class="example-form">
        <!-- name属性最好和接口文档的data属性名一样 -->
        <input type="text" name="uname">
        <br>
        <input type="text" name="pwd">
        <br>
        <input type="button" class="btn" value="提交">
    </form>
    <!-- 
        目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
      -->
    <script src="./lib/form-serialize.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click', () => {
            const form = document.querySelector('.example-form')
            //插件使用第一个值是表单 第二个值是配置文件
            //hash为true是js对象，false查询字符串
            //empty为true表示收集空字符，
            const data = serialize(form,{hash:true,empty:true})
        })
    </script>

案例用户登录