js ajax

get和post 实战用法的区别

• 1、get 会把参数放在url上显示 所以不安全
• 2、post 不会把参数显示到url上 登录的时候推荐使用psot
• 3、get 传输的数据有限制 2kb 只支持 ASCII 字符
• 4、post 传输没有大小限制，没有限制，也允许二进制数据
• 传输文件 或者 图片的时候 使用post请求

form表单提交数据 是会把整个页面进行刷新 重新加载整个网页

创建ajax

<button onclick="ajaxFn()">ajax获取数据</button>
    <script>
        function ajaxFn() {
            /* Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
        局部更新
 */
            /* 创建Ajax的步骤 */

            /* 第一步 创建Ajax对象 */
            /* new一个XMLHttpRequest的实例化对象 */
            let xhr = new XMLHttpRequest();
            console.log(xhr)


            /* 第二部 连接到服务器 */
            /* 
                open(方法，文件名，同步异步)
                参数一：post/get
                参数二：请求的文件名
                参数三：同步（false）  异步（true）
            */

            /* 获取文件的数据一定要使用异步 */
            /* 读取文件需要时间 */
            xhr.open('get', 'abc.txt', true)

            /* 第三步 发送请求 */
            xhr.send();

            /* 第四步 接收返回值 */
            /* 监听返回值 */
            /* onreadystatechange就是用来监听readyState值的变化的 */
            xhr.onreadystatechange = function () {
                /* xhr.responseText 通过ajax请求获得的数据 */
                console.log(xhr.responseText)
            }
            /* 使用live server 打开页面 */
        }

        /* 同步异步区别 */
        /*
        同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程
异步交互：指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待

        */

JSON

JSON是一种轻量级的数据交换格式，它基于 ECMAScript 的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

• JSON里面可以写[] 也可以{}
• 但是必须使用双引号
• 数据在名称/值对中
• 数据由逗号分隔
• 大括号保存对象
• 中括号保存数组
• 可以是数字、字符串、逻辑值、数组、对象、null

操作真实接口

<button onclick="login()">请先登录,再获得数据</button>
    <p>
        <button onclick="getUserInfo()">获取用户数据</button>
    </p>
    <!-- 这个真实的接口 是用来登录的
    所以使用post方式登录 -->
    <script>
        function getUserInfo(){
            /* 需要先判断有没有token 有token 就不提示直接获取数据
            没有token 就给个提示 请先登录 获取token 不执行下面的内容 */
            let xhr = new XMLHttpRequest();
            /* pagenum=1 表示取第一页的数据 */
            /* pagesize=5 表示显示5条数据 */
            let url = 'http://timemeetyou.com:8889/api/private/v1/users?pagenum=1&pagesize=3';
            xhr.open('get', url, true);
            xhr.setRequestHeader('Authorization',localStorage.token)
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let res = JSON.parse(xhr.responseText)
                    console.log(res);
                }
            }
        }
        function login() {
            let xhr = new XMLHttpRequest();
            let url = 'http://timemeetyou.com:8889/api/private/v1/login';
            xhr.open('post', url, true);
            let params = {
                username: "admin",
                password: "123456"
            }
            /* post需要添加请求头 */
            /* 请求回来的内容是json格式 */
            /* Content-type 表示请求内容的类型 */
            /* application/json 表示请求内容的类型的具体的值 */
            xhr.setRequestHeader("Content-type", "application/json")
            xhr.send(JSON.stringify(params));
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let res = JSON.parse(xhr.responseText)
                    console.log(res);
                    localStorage.token = res.data.token;
                }
            }
        }