Ajax、cookie

1.HTTP协议
   HTTP(超文本传输协议)是一个基于请求与响应的模式、无状态的、应用层的协议、绝大多数的web开发,都是勾践在HTTP协议之上的
decodeURI(valEle.value)  //url地址中文获取转码

2.Ajax
    浏览器与服务器通讯而无需刷新当前页面的技术,不需要刷新当前页面,只刷新局部页面的一种异步通讯技术.
     //1.实例化ajax核心对象xmlhttpRequest
            const xhr = new window.XMLHttpRequest
            //2.建立链接   
            xhr.open('GET', 'http://127.0.0.1:3000/username')
            //3.发送请求   如果有参数,post请求写入send方法,het请求拼接到url地址后面
            // 传输内容类型   POST方式时
            //xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')           
            //xhr.send(`username=${username.value}&password=${password.value}`)   //POST
            xhr.send()    //GET
            //4.处理响应数据
            xhr.onreadystatechange = function () {
                //4.1判断响应是否完成
                if (xhr.readyState == 4) {
                    //4.2是否成功响应
                    if (xhr.status == 200) {
                        //4.3获取成功响应的数据进行处理
                        let rest = xhr.responseText
                        let obj = JSON.parse(rest)
                    } else { //请求失败,查看原因
                        alert(xhr.statusText, xhr.status)
                    }
                }
            }
        }

3.同源策略及跨域问题
     同源:浏览器的一个安全功能
          协议+域名+端口  全部相同称为同源,否则为不同源
          不同源网页在没有明确授权的情况下,不能读写对方资源
     跨域:使用Ajax技术请求资源时,违反了浏览器同源策略,引起的安全问题称为跨域
     解决跨域: 1.不使用Ajax技术,使用JSONP技术
              思路:利用HTML的<script>标签天生可以跨域这一特点,用其加载另一个域的JSON数据,
              加载完成后会自动运行一个回调函数通知调用者。
              此过程需要另一个域的服务端支持，所以这种方式实现的跨域并不是任意的。
        
        //创建script标签,src属性设置请求接口地址
         let scriptEle = document.createElement('script')
         // 给创建的这个script标签添加src属性
         scriptEle.setAttribute('src', 'http://10.7.176.87:8088/api/jsonp/list')
         // 把这个标签放在body里
         document.body.appendChild(scriptEle)
        // 根据后端回调函数定义一个同名函数接收接口返回数据
        function callback(result){
            console.log(result);  //后端返回的数据
        }

4.promise
    //对异步操作的封装,可以通过resolve,reject处理异步结果(成功,失败结果)

5.cookie
    //本地存储技术,以字符串形式存储数据的位置和空间
        //特点:
        // 存储大小有限制,一般4kb左右
        // 数量有限制,一般50条
        // 有时间限制,
        // 域名限制
        // 使用
        //     获取cookie
               let cookie =  document.cookie
        //     设置值
               document.cookie = 'a = 100'
               document.cookie = 'b=200;expires=Thu, 18 Dec 2022 12:00:00 GMT'
        //              expires(设置过期事件)      2022年  Dec(12月)18日12点过期
        //     删除值
               document.cookie = 'b = 200;expires = 比当前时间之前的时间'
   // cookie封装(jsCookie  npm)