ajxa 基础

异步

异步代码

1 代码是执行了，不能马上得到结果延迟一点来执行

2 不一定按照正常上下顺序来执行代码 - 同时进行

3 异步代码定时器和延时器

      setInterval(() => {
        document.querySelector('h1').innerText = Date.now();
      }, 10);

      setInterval(() => {
        document.querySelector('h2').innerText = Date.now();
      }, 10);

同步

1 代码是执行了，但是结果会马上得到

1 你同桌给你一拳马上就会感觉到痛

2 饮水机大水一按下按键水出来

3 你现在把你加电源开关关掉立马就断网

2 按顺序一件一件做事

1 核酸检查

排队的一个人一个人在进行

同步的代码（以前学过的程序绝大部分都是同步的代码按顺序-马上得出结果

console.log( document.querySelector("body") ); // 1 有body
console.log( document.querySelector("div") ); // 2  没div

第一次获取服务器

      /* 
      想要获取服务器上的数据 url ，它是后端程序员提供  
      http://www.itcbc.com:3006/api/getbooks  图书数据 

      我们需要通过代码的方式  把服务器上的数据 变成 一个普通的变量 数组
      给我数组了 我就懂得如何去页面渲染了  第三方的一个js的帮助 

      axios
      1 下载 引入到项目中
      2 根据url的地址 来编写代码 
        1 获取数据 -get   （ 请求类型  1  get 2 post 3 delete  4 put 5 patch  ）
        2 编写代码
       */

      //  开始向服务器 发送请求 索要数据
      axios({
        //  method:"请求类型",
        //  url:"资源地址",
        method: 'get',
        url: 'http://www.itcbc.com:3006/api/getbooks',
      }).then((result) => {
         // .then固定写法 不需要纠结
        //  如果这个代码可以触发 数据回来了
        // console.log(result); // 服务器给我们返回的数据！！
        // 数组数据
      })

第一次获取服务器

1 资源的地址问后端要即可

2 我们负责用对代码确保数据可以请求成功

3 不需要纠结 result的数据格式

只需要打印出result ，在里面 resut.data 找到数据

自己截图数据

4 把数据存在自己的一个数组

5 使用以前教过知识把数组渲染到页面中

  axios({
            method: 'get',
            url: 'http://www.itcbc.com:3006/api/getbooks',
        }).then((result) => {
            console.log(result);
            // result 请求成功的结果
            // then 固定！！ 是axios封装的一个代码  意思 服务器把数据返回了，then里           面的代码就会被触发
            // 底层套了两层data 也是后台程序员做的，不用纠结 别人怎么定义的 我只负责           如何拿对
            const arr = result.data.data; // 字段的名称 id、bookname、author。           publisher 固定
            render(arr);
        });

get post delete put parch 获取接口的五种方法

 // 获取接口 五种方法
        axios({
           
            url:''?
            请求地址
             method:'get',
            请求方式
            data:{
            请求的参数
            }
            // get 是 用来获取接口数据的 固定写法
            // 使用axios发起 get请求时 ，只需要将method:属性改为'get' url地址改           为/api/getbook'
        })
        axios({
            url:'',
            请求地址
            method:'post',
            请求方式
            data:{
            请求的参数
                
            }
            // post 是 用来新增接口数据的 固定写法
            // 使用axios发起 post请求时 ，只需要将method:属性改为'post' url地址改         为/api/addbook'
        })
        axios({
            url:''?
            请求地址
            method:'delete',
            请求方式
            data:{
            请求参数
                
            }
            // delete 是 用来删除接口数据的 固定写法
            // 使用axios发起 delete ，只需要将method:属性改为'delete' url地址改        为/api/delbook'
        })
        axios({
            url:''?
            method:'put',
            data:{     
            }
            // put 是 用来更新全部接口数据的 固定写法
        })
        axios({
            url:''?
            method:'parch',
            data:{  
            }
            // parch 是 用来更新部分接口数据的 固定写法
        })

form表单的基本使用

表单在网页中主要负责数据采集功能。HTML中的

标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。表单由三个基本部分组成：表单标签表单域表单按钮

<form>
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
    <button type="submit">提交</button>
</form>

form标签属性

标签用来采集数据，标签的属性则是用来规定如何把采集到的数据发送到服务器。

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencodedmultipart/form-datatext/plain	规定在发送表单数据之前如何对其进行编码
target	_blank_self_parent_topframename	规定在何处打开 action URL

form表单的基本使用

1 action 属性用来规定当提交表单时，向何处发送表单数据。

action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。当表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

2 arget 属性用来规定在何处打开 action URL。

它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。

值	描述
_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。（很少用）
_top	在整个窗口中打开。（很少用）
framename	在指定的框架中打开。（很少用）

3 enctype 属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 “+” 加号，但不对特殊字符编码。（很少用）

业务状态码

1在检查网络中,status表示业务状态码，每个公司都不一样的*

后端自己定义的*

业务状态码用来表示这次业务处理的成功与否

2 http 表示响应式状态码，it行业全部通用，200等于响应成

300等于重定义，400 表示前端的问题，没有获取成功，500表示后端的问题

3如果响应式状态码发请求给业务状态码，成功了就返回200

4案列中的响应式状态码显示为code

原生ajax

 // axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的
    //  创建 xhr对象
    const xhr = new XMLHttpRequest()
    //   调用open方法 指定 请求类型,url
    xhr.open('get', 'http://www.itcbc.com:3006/api/getbooks')
    xhr.send()
    //   发送出去
    xhr.addEventListener('load', function () {
      const obj = JSON.parse(this.response)
      // 字符串转对象
      console.log(obj);
    })

报文小节

        /*  1请求报文       请求报文四个组成部分
                             1请求方式 get/post
                             2请求地址 /api/getbooks
                             3  空行
                             4协议类型 http1.1版本  
        //
        // 请求头 cibtebt-type指定当前请求体数据格式
        // 请求体 发给后端的参数都放在请求体里面的 */
        /*  2 响应报文 组成的四个部分
                     1状态行  1状态码 2状态描述 3协议版本
                     2响应头  1后端让前端登录失效时机 cookie
                     3空行
                     4响应体  后端返回给前端的代码 */
        /* 3 http状态码  2xx 正常
                        3xx 重定向
                        4xx 前端的错
                        5xx 后端的错 */

        /* 
            4   1业务状态码  1http状态码式行内通用 2业务状态码 只是你公司通用
                2http状态在 响应报文 状态行可以看见  1业务状态码在响应主体可以看见

原生ajax携带参数

  // 1XMLHttprequest表示 XML 格式请求
  // 2XMLHttprequest是什么？答案是浏览器内置的一个构造函数
  // 3作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
  // 4axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！
const xhr = new XMLHttpRequest()
      // 1 快速 写完 原生ajax的步骤
      xhr.open('get','http://www.itcbc.com:3006/api/getbooks?appkey=wanshao1234')//URL参数，只能拼接在 URL 地址 后面

      xhr.send() //请求体
      xhr.addEventListener('load',function(){
      console.log( (this.response));
    })

使用XML发起get请求

 /*  主要的四个实现步骤
        1 创建xhr 对象
        2 调用xhr open()函数
        3 调用xhr send()函数
        4 监听load 事件 */
        let xhr = new XMLHttpRequest()
        // new出来的XMLHttpRequest都可以发起axios请求
        xhr.open('get','http://www.itcbc.com:3006/api/xx')
        xhr.send()
        xhr.addEventListener('load',function(){
            console.log(this.response);
        })

请求时携带参数

let xhr = new XMLHttpRequest()
        xhr.open('get','http://www.itcbc.com:3006/api/addbook?name=zhangsan')
        // 可以将请求的参数拼接到url后面
        xhr.send() // = 请求体
        xhr.addEventListener('load',function(){
            console.log(this.response);
        })

请求原生ajax

  const xhr = new XMLHttpRequest()
        // 1.创建 xhr对象
        xhr.open('get','http://www.itcbc.com:3006/api/getbooks')
        // get请求只能 放在url后面进行拼接才可以
        // 2.调用open 方法指定 请求类型 和url
        xhr.send()
        // 3 发送出去send
        xhr.addEventListener('load',function(){
        // 4  监听load事件，数据响应事件
            console.log('数据回来啦');
            const obj=JSON.parse(this.response)
        /* 5   字符串转对象格式 ，因为获取回来的是一个字符串，所以要转成
            对象格式输出 */
            console.log(obj);
        })

快速写完原生ajax

 const xhr = new XMLHttpRequest()
        xhr.open('get','http://www.itcbc.com:3006/api/getbooks?appkey=wanshao1234')
        // xhr发送get请求只能 获取数据只能在url后面拼接
        xhr.send()
        xhr.addEventListener("load",function(){
            console.log(this.response);
            // 怎么拿到服务器响应回来的数据？
            //1load事件  2xhr.response
            // 因为 获取返回来的数据是以字符串形式返回的，所以需要转成对象格式
            
            
        })

原生-post-字符串格式

  /*  post 请求类型和 url 也是写在xhr.open里面，但是
         参数只能另外写 */
        // 1 a=b$c=d 同时也要指定content-type 才行
        // xhr.setRequestHeader
        // 2 对象格式 {a:'b',c:'d'}同时也需要指定content-type才行
        // 3 formdata 数据
        const data = {
            bookname: "从入门到入土",
            author: '杀人诛心',
            publisher: "杀人诛心出版社",
            appkey: 'wanshao1234'
        }
        const usp = new URLSearchParams(data)
        // 把data 转成 a=b&c=d ....  URLSearchParams 
        const query = usp.toString()
        // 把构造函数里面的内容转换成字符串格式
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        // setRequestHeader这个是规定写法 请求头部 
        /*  'Content-type','application/x-www-form-urlencoded'
         也是规定写法 对应 上面 a=b$c=d这个格式 */
        xhr.send(query)
        // 上传要字符串形式
        // 把参数上传到send里面 因为规定请求体要在send里面写
        xhr.addEventListener('load', function () {
            console.log(this.responre);
        })

原生-post-携带参数json

  const xhr = new XMLHttpRequest()
        xhr.open('post', 'http://www.itcbc.com:3006/api/addbook')
        /*  post 请求类型和 url 也是写在xhr.open里面，但是
         参数只能另外写 */
        // 1 a=b$c=d 同时也要指定content-type 才行
        // xhr.setRequestHeader
        // 2 对象格式 {a:'b',c:'d'}同时也需要指定content-type才行
        // 3 formdata 数据
        const data = {
            bookname: "从入门到入土1",
            author: '杀人诛心1',
            publisher: "杀人诛心出版社1",
            appkey: 'wanshao1234'
        }
        // 把data 转成 a=b&c=d ....  URLSearchParams 
        // 把构造函数里面的内容转换成字符串格式
        xhr.setRequestHeader('Content-type', 'application/json')
        const query = JSON.stringify(data)
        // 把data转换成字符串
        // setRequestHeader这个是规定写法 请求头部 
        /*  'Content-type','application/x-www-form-urlencoded'
         也是规定写法 对应 上面 a=b$c=d这个格式 */
        xhr.send(query)

        // 把参数上传到send里面 因为规定请求体要在send里面写
        xhr.addEventListener('load', function () {
            console.log(this.responre);
        })

原生-post-携带参数 formdata

 const input = document.querySelector('input')
        input.addEventListener('change',function(){
            // 绑定change事件 当上传完图片自动触发
            const file = this.files[0]
            // 获取 input 图片数组
            const fromdata = new FormData()
            // 获取 图片地址 fromdata
            fromdata.append('avatar',file)
            // fromdata 插入 一个规定参数名，和图片数组
            const xhr = new XMLHttpRequest()
            xhr.open('post','http://www.itcbc.com:3006/api/formdata')
            // 调用formdata接口
            xhr.send(fromdata)
            xhr.addEventListener('load',function(){
                console.log(this.response);
            })

        })

ajax代码封装

<script src="../../jquery.js"></script>
    <!-- jq中也是封装过代码的 -->
    <script>
        // 使用了 axios 来发送ajax请求
        // 我们应该使用原生的ajax代码 来封装成 axios 调用模样 axios({url,method,params,data}).then
        $.ajax({
            url: 'http://www.itcbc.com:3006/api/getbooks',
            type: 'get',
            // jq里面获取类型 就是type
            data: 'appkey=wanshao1234',

            success(result) {
                console.log(result);
            }
        })
    /*   1 type  可能是get 也可能是post
                  2 data 3种（查询字符串 json  formdata ） */

ajax代码封装-携带 get参数

/*   1 ajax  是一个函数（正解） 还是 一个对象 
          2 它接受一个 参数 格式  什么格式(对象)
          3 需要在ajax函数中 写完 整个原生ajax 发送请求的代码  */
        const option = {
            url: 'http://www.itcbc.com:3006/api/getbooks',
            type: "get",
            data: "appkey=xxxx6666",
            seccess(result) {
                // result 等于 要等于响应的数据 =  对象格式 
                console.log(result);
            }
        }
        ajax(option)
        function ajax(config) {
            const xhr = new XMLHttpRequest()
            xhr.open(config.type, config.url + '?' + config.data)
            // 把参数传进去 必须按照这样的格式 type 到url
            xhr.send()
            xhr.addEventListener('load', function () {
                const obj = JSON.parse(this.response)
                // 要转换成对象输出，不然就是一堆字符串
                config.seccess(obj)
                // 把输出结果 传到seccess里面输出
            })

        }

ajax封装-不封装参数的问题

const option = {
            url: 'http://www.itcbc.com:3006/api/getbooks',
            type: "get",
            data: "appkey=xxxx6666",
            seccess(result) {
                // result 等于 要等于响应的数据 =  对象格式 
                console.log(result);
            }
        }
        ajax(option)

        function ajax(config) {
            console.log(config.data);
            const xhr = new XMLHttpRequest()
            if (config.data) {
                xhr.open(config.type, config.url + '?' + config.data)
            } else {
                xhr.open(config.type, config.url)
            }

            // 把参数传进去 必须按照这样的格式 type 到url
            xhr.send()
            xhr.addEventListener('load', function () {
                const obj = JSON.parse(this.response)
                // 要转换成对象输出，不然就是一堆字符串
                config.seccess(obj)
                // 把输出结果 传到seccess里面输出
            })

        }

ajax封装-默认值的问题

/*   1 ajax  是一个函数（正解） 还是 一个对象 
      2 它接受一个 参数 格式  什么格式(对象)
      3 需要在ajax函数中 写完 整个原生ajax 发送请求的代码  */
    const option = {
      url: 'http://www.itcbc.com:3006/api/getbooks',
      type: 'get',
      // data: 'appkey=wanshao1234',
      success(result) {
        console.log(result);
      },
    };
    ajax(option)
    //   把option实参赋值给ajax函数

    // ajax({
    //     url:'http://www.itcbc.com:3006/api/getbooks',
    //     type:"get",
    //     data:"appkey=xxxx6666",
    //     seccess(result){
    //         // result 等于 要等于响应的数据 =  对象格式 
    //         console.log(result);
    //     }
    // })


    function ajax(url, type, data = '', seccess) {
      // 相当于是 option.url option.type

      const xhr = new XMLHttpRequest()
      xhr.open(type, url + '?' + data)
      // xhr直接调用形参 type url
      // 注意 url后面不要加逗号


      // 把参数传进去 必须按照这样的格式 type 到url
      xhr.send()
      xhr.addEventListener('load', function () {
        const obj = JSON.parse(this.response)
        // 要转换成对象输出，不然就是一堆字符串
        seccess(obj)
        // 把输出结果 传到seccess里面输出
      })

    }

ajax基础

ajxa 基础

异步

同步

第一次获取服务器

第一次获取服务器

get post delete put parch 获取接口的五种方法

form表单的基本使用

form标签属性

form表单的基本使用

1 action 属性用来规定当提交表单时，向何处发送表单数据。

2 arget 属性用来规定在何处打开 action URL。

3 enctype 属性用来规定在发送表单数据之前如何对数据进行编码。

业务状态码

原生ajax

报文小节

原生ajax携带参数

使用XML发起get请求

请求时携带参数

请求原生ajax

快速写完原生ajax

原生-post-字符串格式

原生-post-携带参数json

原生-post-携带参数 formdata

ajax代码封装

ajax代码封装-携带 get参数

ajax封装-不封装参数的问题

ajax封装-默认值的问题