前置框架day2

Bootstarp 弹框

  作用：

  不离开当前页面，显示单独内容让用户操作

步骤：

①：引入bootstrap.css和bootstrap.js

               

<!-- 引入bootstrap.css -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

 <!-- 引入bootstrap.js -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>  

②：准备弹框标签

③：利用自定义属性，控制弹框的显示和隐藏 。（自带的，直接查文档用）

如果没有其他需求就用库函数显示和隐藏，如果还有其他逻辑就用js写显示和隐藏的样式。

AJAX原理-XMLHttpRequest

xhr对象用关于和服务器交互，通过xml可以在不刷新的情况下请求url，获取数据。axios内部使用的是xml。

1.使用xml

①：创建xml对象：   const xhr = new  XMLHttpRequest()

②: 配置请求方法和请求url地址：  xhr.open('请求方法'， ‘请求url地址’)

③：绑定loadend事件，接受响应结果。  xhr.addeventlistener('loaded', () => {

             //响应结果在这里可以调用查看，loaded是指这次响应之后会执行后面这个函数

})

④：发起请求 xhr.send()

2.xml查询参数：cname
          语法：网址?参数名1=值&参数名2=值

          意义是查询某个特定条件下的内容。

3.urlsearchparams对象：

           应用于 获取页面中某个值并且把这个值转为查询条件。引入到查询网址的后面。

          ① 先queryselector获取pname和cname

          ②再把获取数据用对象结构接收;

                   const qobj = {

                                     pname: pname; //参数值：获得的值

                                     cname: cname 

                                       }

             ③：利用URLSearchParams()把②中的对象转为查询参数字符串：

                  const paramsobj = new URLSearchParams(qobj)

                  const querysting = paramsobj.toString(paramsobj)

              ④在利用xhr查询数据是把地址改一下：

                           const xhr = new XMLHttpquest()

                           xhr.open=('get', 'https://www.(网址)？${querysting}')

                           xhr.addeventlistener('loadend', () => {

                                         // 响应后的数据要怎么处理})

                           xhr.send（）

4.xml数据提交

    注意两点：

             请求头要设置    xhr.setRequestHeader('Content-Type', 'application/json')

             请求体要发送的是JSON字符串      //JSON.stringify()把js对象转为json字符串

                       先把要提交的数据用对象进行封装，之后把对象转为json再把json字符send过去。

  5.promise

       管理异步操作的。简单的判断异步就是这个函数会耗一定时间才能完成。

       好处：逻辑更清除，了解axios函数内部运作机制。

       语法：  

                    ①创建promise对象：

                              const p = new Promise((resolve,reject) => {

                                             //在这里执行异步任务并且传递结果，

                                           //传递结果就是: resolve('要传入的参数')

                                          //如果成功，resolve会触发then （）函数执行。

                                          否则调用reject( new error())触发error（）

                                           })

                               p.then(result => {要执行内容})  //在①中resolve传入的参数会作为result给                                                                                            p.then作为其参数

                              p.catch(error => {//要执行的内容})

    状态：

            new之后就是pending（等待态）

           调用resolve（）就是fulfied，完成态

           调用reject（）就是rejected，拒绝态。  只可能是一种情况。状态不会再改变。

         

案例：用promise来获取省份信息。

主要是获取成功否是看status状态值的，用if-else来控制成功失败应该执行resolve或是reject

//1.创建promise对象
const p = new Promise(（resolve, result）=> {
             //执行xhr来获取省份信息
            const xhr = new XMLHttpRequest()
            xhr.open('get', 'url地址')
            xhr.addeventlistener('loaded', () => {
            //响应完成之后，主要是判断是否获取成功了。通过xhr.status若是2××，则是成功态否则不是
             if (xhr.status >=200 && xhr.status <=300){
                  resolve(JSON.parse(xhr.response)) //把服务器返回的内容转为字符，再调用then

              }else{
                    reject(new Error(xhr.response))
                    }

              })
                  xhr.send()

 
               })
          p.then(result => {

                //打印  }).catch（error => { //打印  }）

封装-简易axios-获取省份

//1.定义myaxios函数，便于每次都可以调用。
 function myaxios(config) {          //config是传入的参数
      return new Promise((resolve, reject) {    //这里写的是要执行的异步函数
                                         //就是你要执行什么函数的，这个函数要返回值的，这个 
                                         值作为resolve或者reject进行传参            
           //1.发出xhr请求，并且根据返回的状态判断是否成功。成功则返回值传给resolve.
           const xhr = new XMLHttpRequest()
           xhr.open('config.method || get', 'config.url')   //获取方法如果给了则用config中 
                                                              的。或者用默认的get方法。


             xhr.addEventListener('loadend', () => {
                    //响应之后根据状态判断给谁传参
                if (xhr.status >= 200 && xhr.status <= 300){
                    resolve(JSON.parse(xhr.reponse))  //如果成功返回的是json对象,parse转为 
                                                                                js对象
                   }else{
                        reject(new error(xhr.response))
                                      }

})
         xhr.send()

})

//使用一次myaxios函数。传入参数
 myaxios({
             url: '数据地址'
}).then(result => {  console.log(result)}).catch(error => {  console.log(error)})
//调用函数并且传参url，then是正确结果，catch是错误的。只会执行一个的









}

封装-简易axios-查询地区（在url地址后面加上一些特定的省份和市区信息

//1.定义myaxios函数，便于每次都可以调用。
 function myaxios(config) {          
      return new Promise((resolve, reject) {   
                                          
           //1.发出xhr请求，并且根据返回的状态判断是否成功。成功则返回值传给resolve.
           const xhr = new XMLHttpRequest()



              //对于有约束条件的地址查询来说，约束条件是要在url之后加上的，那么在形成查询网址 
                 的？后面形成的条件就要在传url'之前把条件准备好！！！
             //这个是否本身有携带条件，判断的是传入的config.params是否携带了信息
             
             if(config.params) {
                      
                   const paramsobj = new URLSearchParams(config.params)
                     const querystring = paramsobj.toString()
                        config.url = config.url + `?${querystring}`


                            }




           xhr.open('config.method || get', 'config.url')  

             xhr.addEventListener('loadend', () => {
                    //响应之后根据状态判断给谁传参
                if (xhr.status >= 200 && xhr.status <= 300){
                    resolve(JSON.parse(xhr.reponse))  //如果成功返回的是json对象,parse转为 
                                                                                js对象
                   }else{
                        reject(new error(xhr.response))
                                      }

})
         xhr.send()

})

//使用一次myaxios函数。传入参数
 myaxios({
             url: '数据地址',
             params:{pname:'辽宁'，cname：‘大连’}
}).then(result => {  console.log(result)}).catch(error => {  console.log(error)})










}

）

   //对于有约束条件的地址查询来说，约束条件是要在url之后加上的，那么在形成查询网址 
                 的？后面形成的条件就要在传url'之前把条件准备好！！！
             //这个是否本身有携带条件，判断的是传入的config.params是否携带了信息
             

封装-简易axios

之前是从服务器请求数据，现在往服务器发送数据。

①：

       //在发送send之前判断是否有要发的数据，所以写在发送之前。。            

       //首先把url中的js对象转为JSON才能给后端翻译出来。还要加上头部。

//1.定义myaxios函数，便于每次都可以调用。
 function myaxios(config) {          
      return new Promise((resolve, reject) {   
                                          
           //1.发出xhr请求，并且根据返回的状态判断是否成功。成功则返回值传给resolve.
           const xhr = new XMLHttpRequest()
              //对于有约束条件的地址查询来说，约束条件是要在url之后加上的，那么在形成查询网址 
                 的？后面形成的条件就要在传url'之前把条件准备好！！！
             //这个是否本身有携带条件，判断的是传入的config.params是否携带了信息
             
             if(config.params) {
                      
                   const paramsobj = new URLSearchParams(config.params)
                     const querystring = paramsobj.toString()
                        config.url = config.url + `?${querystring}`

                            }
           xhr.open('config.method || get', 'config.url')  

             xhr.addEventListener('loadend', () => {
                    //响应之后根据状态判断给谁传参
                if (xhr.status >= 200 && xhr.status <= 300){
               resolve(JSON.parse(xhr.reponse))  //如果成功返回的是json对象,parse转为js对象
                   }else{
                        reject(new error(xhr.response))
                                      }

                                       })







                //在发送send之前判断是否有要发的数据，所以写在发送之前。。。
                     if (config.data) {

                        //首先把url中的js对象转为JSON才能给后端翻译出来。
                     const jsonstr = JSON.shringify(config.data)
                   xhr.setRequestHeader('Content-Type', 'application/JSON')
                   xhr.send(jsonstr)
                    

                       }else{       xhr.send()        }


                            

                           })

//使用一次myaxios函数。传入参数
 myaxios({
             url: '数据地址',
             method：'post'
             data:{username:'nihao',  password:'555555'}
}).then(result => {  console.log(result)}).catch(error => {  console.dir(error)})










}