20230406----重返学习-AJAX

day-043-forty-three-20230406-AJAX

AJAX

  • AJAX全称async javascript and xml。
    • 以前的数据一般是xml,现在大多是json。

      <?xml version="1.0" encoding="utf-8"?>
      <root>
        <person>
          <name>lili</name>
          <age>18</age>
          <job>学生</job>
        </person>
        <person>
          <name>Tom</name>
          <age>28</age>
          <job>CEO</job>
        </person>
        <person>
          <name>lisa</name>
          <age>30</age>
          <job>演员</job>
        </person>
      </root>    
      
    • AJAX不是一种新的技术,而一个与后端通信的方式。

    • 特色: 异步获取数据,局部更新页面。

  • 数据渲染
    1. 服务器渲染
    2. 客户端渲染----(局部更新页面)

服务器渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uiCDwrX-1680796750083)(./服务器渲染.png)]

  • 步骤:

    1. 客户端向服务器发送一个客户端请求
      • 这个客户端请求一般是一个html类型的总体客户端请求
    2. 服务器获取客户端请求
    3. 服务器处理请求
      1. 服务器解析客户端请求,确定客户端请求的目的
      2. 服务器从数据库获取数据
      3. 在服务器端循环数据,插入到页面结构中
      4. 得到一个html文件类型的字符串,即循环好的前端页面
    4. 服务器将循环好的前端页面,发起一个服务器响应返回给客户端
    5. 客户端接收到服务器响应
    6. 客户端将服务器响应(一个html类型的文件)展示到页面上
  • 劣势:

    1. 不能实现局部更新
    2. 服务器压力过大
    3. 服务器与客户端分工不明确,不是前后端分离
  • 优势:

    1. 客户端加载页面的时候速度非常快
    2. 有利于seo优化

客户端渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jFh4Rswa-1680796750084)(./客户端渲染.png)]

  • 步骤:
    1. 客户端向服务器发送多个客户端请求
      1. 客户端将页面分块,如轮播图、瀑布流、列表、分页等,每个请求是一小块
      2. 每一块分别发起一类请求,一类请求里包含多个客户端请求
      3. 一个客户端请求一般是json类型的客户端请求
    2. 服务器获取客户端请求
    3. 服务器处理请求
      1. 服务器解析客户端请求,确定客户端请求的目的
      2. 服务器从数据库获取数据
      3. 在服务器端处理数据
      4. 得到一个json的字符串,即json数据
    4. 服务器将处理好的json数据,发起一个服务器响应返回给客户端
    5. 客户端接收到服务器响应
    6. 客户端数据,并渲染到页面
      1. 客户端将服务器响应得到的json数据进行处理
      2. 把json数据转成DOM数据节点
      3. 把DOM数据节点插入到document,即DOM文档树中
    7. 客户端将页面渲染好并展示
  • 优势:
    1. 可以实现局部更新
    2. 服务器压力减小,能处理更多请求
    3. 服务器端跟客户端分工明确,即前后端分离
  • 劣势:
    1. 页面加载速度慢
    2. 不利于seo优化
  • 实际工作中:
    1. 首页做服务器渲染
    2. 其它页面做客户端渲染(骨架屏操作及加loading动画)

请求的组成

  • 一个完整的请求由客户端请求服务器响应组成
    • 客户端—>发送:请求头+请求体 到—>服务器
    • 服务器—>发送:响应头+响应体 到—>客户端

seo优化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DNYkh2F4-1680796750084)(./seo优化.png)]

  • 步骤
    1. 一个网站有内容,上线到互联网
    2. 搜索引擎的服务器上存储数据
      1. 搜索引擎有爬虫,爬虫会定期去各种网站获取网站的信息
      2. 爬虫得到的数据,经处理存在搜索引擎的服务器上,并有一些权重和排名
    3. 用户在搜索引擎的网站上搜索,会看到搜索引擎服务器上的内容。内容的排列排名就是seo
      • 排名越前越好
  • 基本原理
    1. 关键词越多,越容易被搜索到。内容越多,关联越多,越容易有高权重
    2. 加钱向搜索引擎升级权重
  • 实际操作
    1. 使用服务器渲染
    2. 添加关键词,通过meta和title添加关键词
      • 通过meta和title添加关键词
    3. 公司资金充足,直接向搜索引擎加钱加权重

ajax对象

  • 一个简单但正常的ajax请求

    let xhr = new XMLHttpRequest();
    xhr.open("get", "./one.xml?name=lili&age=18");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseXML);
      }
    };
    xhr.send();
    
  • 属性-值类型的属性-正常类的

    • readyState 状态值
      • 0 : 创建出XMLHttpRequest实例对象,即XMLHttpRequest核心对象
      • 1 : 建立连接,即调用open()方法
      • 2 : 成功返回响应头
      • 3 : 进一步处理中,马上要返回响应体了
      • 4 : 成功返回响应体
    • status 状态码: 用于这个来判断是当前状态值中的xml实例对象是个怎样的状态。
      • 1XX : 信息响应类,如服务器已经成功接收到客户端请求了,但还在进一步处理
      • 2XX : 成功响应类,一般代表客户端已经成功接收到数据了
      • 3XX : 重定向响应类 一般已经成功接收到返回数据了,但还要进一步操作
        • 304 : 缓存。就是浏览器的缓存,类似于200,用200也可以捕获并触发
      • 4XX : 客户端错误 : 一般表示客户端地址错了之类的
        • 404 : 找不到页面,原因一般是前端发的请求有问题
      • 5XX : 服务端错误 : 一般表示服务器那边有问题
    • response 响应体,格式一般为字符串
      • 服务器返回什么格式就是什么格式
    • responseText 响应体,格式为字符串
    • responseXML 响应体,格式为XML
    • responseType 存储服务器返回数据的格式 (了解)
      • 种类
        • 空字符串默认
        • arraybuffer
        • blob
        • document
        • json
        • text
      • 这些格式就是浏览器支持的服务器返回给客户端的数据格式
    • timeout 超时时间
      • 0 默认不设置
      • 1 --> 1ms
    • withCredentials 是否允许携带跨域资源凭证(cookie)
      • true–>允许
      • false–>不允许
  • 方法函数类属性

    1. open(请求方式,请求路径,是否同步异步) 建立连接

      • 请求方式:
        1. get类请求
          • get: 一般用于获取数据
          • head: 一般用于获取请求头信息
          • delete: 删除服务器的信息
          • options: 试探性请求(了解即可)
        2. post类请求
          • post: 一般用于提交数据(表单提交)
          • put: 更新服务器全部数据
          • patch: 对修改过的数据进行局部修改
        • 大小写随意
        • 一般看接口文档即可
      • 请求路径:
        • 服务器网址
          • 一般以http或https开头

          • 组成方式

            • 单独字段:直接使用

              //URL --> http://localhost:8888/api/articleList
              let xhr = new XMLHttpRequest();
              xhr.open("get", "http://localhost:8888/api/articleList");
              xhr.onreadystatechange = function () {
                console.log(xhr.response);
              };
              xhr.send();
              
            • 两个字段:一般由baseUrl+URL

              • baseUrl: 服务器根路径的网址

              • URL: 接口相对路径

                //baseUrl --> http://localhost:8888
                //URL --> /api/articleList
                //get类数据参数 --> ?date=2021-05-21
                let xhr = new XMLHttpRequest();
                xhr.open("get", "http://localhost:8888/api/articleList?date=2021-05-21");
                xhr.onreadystatechange = function () {
                  console.log(xhr.response);
                };
                xhr.send();
                
          • 一般看接口文档即可:

      • 是否同步异步
        1. 异步true,默认
        2. 同步false
    2. send() 发送数据

    3. getAllResponseHeaders() 获取所有的响应头信息

    4. getResponseHeader(‘XXX’) 获取响应头指定信息

      • getResponseHeader(“date”) 拿到的是格林尼治标准时间字符串

        //最快 获取响应头时间
          let xhr = new XMLHttpRequest();
          xhr.open("head", "./");
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 2) {
              if (xhr.status >= 200 && xhr.status < 400) {
                //console.log(xhr.getAllResponseHeaders())
                //console.log(xhr.getResponseHeader("date"))//格林尼治时间
                let time1 = xhr.getResponseHeader("date");
                let time2 = new Date(time1);//格林尼治时间字符串--->本地时间-北京
                console.log(time2);
              }
            }
          };
          xhr.send();
        
        let time1=xhr.getResponseHeader("date");//格林尼治时间字符串
        //格林尼治时间--->北京时间
        let time2=new Date(time1);
        console.log(time2);
        
    5. setRequestHeader(‘name’,‘value’) 设置请求头信息

  • 钩子事件类属性-值类型的属性-事件钩子类的

    1. onreadystatechange 注册监听
    2. onabort 请求中断时
    3. onerror 请求出错时触发
    4. onprogress 监控文件的上传进度
    5. ontimeout 请求超时时触发

传递参数

  1. get类,在url的后面,跟随请求头传递 ?XXX1=xxx1&&XXX2=xxx2

    //baseUrl --> http://localhost:8888
    //URL --> /api/articleList
    //get类数据参数 --> ?date=2021-05-21
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:8888/api/articleList?date=2021-05-21");
    xhr.onreadystatechange = function () {
      console.log(xhr.response);
    };
    xhr.send();
    
    let xhr = new XMLHttpRequest();
    xhr.open("get", "./index.html?name=lili&age=18");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseXML);
      }
    };
    xhr.send();
    
  2. post类,在send()里面,跟随请求体传递

    • 参数格式–看接口文档来的
      1. 默认格式,普通字符串 text/plain;charset=UTF-8

        • Content-Type: text/plain;charset=UTF-8

        • 如果不想要默认格式,必须需设置 xhr.setRequestHeader(‘Content-Type’, ‘XXX’);

          let xhr = new XMLHttpRequest();
          xhr.open("post", "http://127.0.0.1:9999/user/login");
          
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//必须放在open的后面
          
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 400) {
                console.log(JSON.parse(xhr.response));
              }
            }
          };
          xhr.send("account=18310612838&password=" + "1234567890");
          
      2. form-data 主要应用于文件的上传或者表单数据提交

        let xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:9999/user/login");
        //-------
        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        //-------
        xhr.onreadystatechange = function () {
          console.log(xhr.response);
        };
        //-------
        let data = new FormData();
        data.append('lx', 0);
        data.append('name', 'xxx');
        //-------
        xhr.send(data);
        
      3. x-www-form-urlencoded格式的字符串

        let xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:9999/user/login");
        //-------
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //-------
        xhr.onreadystatechange = function () {
          console.log(xhr.response);
        };
        //-------
        let data = `name=fang&age=16`;
        //-------
        xhr.send(data);
        
      4. raw字符串格式

        • 普通字符串  -> text/plain

          let xhr = new XMLHttpRequest();
          xhr.open("POST", "#");
          //-------
          xhr.setRequestHeader('Content-Type', 'text/plain');
          //-------
          xhr.onreadystatechange = function () {
            console.log(xhr.response);
          };
          //-------
          let data = `正常文本`;
          //-------
          xhr.send(data);
          
        • JSON字符串 -> application/json  => JSON.stringify/parse  「常用」

          let xhr = new XMLHttpRequest();
          xhr.open("POST", "#");
          //-------
          xhr.setRequestHeader('Content-Type', 'application/json');
          //-------
          xhr.onreadystatechange = function () {
            console.log(xhr.response);
          };
          //-------
          let data = JSON.stringify({name:'fang',age:11});
          //-------
          xhr.send(data);
          
        • XML格式字符串 -> application/xml

          let xhr = new XMLHttpRequest();
          xhr.open("POST", "#");
          //-------
          xhr.setRequestHeader('Content-Type', 'application/xml');
          //-------
          xhr.onreadystatechange = function () {
            console.log(xhr.response);
          };
          //-------
          let data = document.documentElement.innerText;
          //-------
          xhr.send(data);
          
      5. binary进制数据文件「buffer/二进制…」

        • 一般应用于文件上传
        • 图片 -> image/jpeg
        • EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
      6. GraphQL(新增的,类似于查询语句)

      • 请求头的 Content-Type 必须设置为对应格式
    • 步骤
      1. 语法头的Content-Type字段必须设置为对应的格式。
        - 必须放在open()的后面
        - 默认: Content-Type: text/plain;charset=UTF-8 普通字符串
        - 语法: xhr.setRequestHeader(‘Content-Type’, ‘XXX’);
      2. 构建对应的数据。
      3. 在send()调用并提交。

get与post请求的区别

  1. get一般用于获取数据,post一般用于提交数据

  2. post的安全性比get高(互联网没有安全可言)

  3. 可传递的数据大小

    • get 参数跟在url的后面,跟随请求头发送, url长度限制,超出长度限制就会自动给截掉
    • post 参数在send里面,跟随请求体发送, 没有长度限制,但是数据过多,会影响速度,
    • 需要自己手动限制长度
  4. 缓存问题

    • get请求,请求同一个地址,2次级以上,都会从缓存中获取数据,浏览器的特色
      • 解决缓存问题: url后加一个随机数或时间戳
        • 加一个时间戳: http://127.0.0.1:9999/user/login?date=${new Date()*1}
        • 加一个随机数:http://127.0.0.1:9999/user/login?num=${Math.random()}
    • post请求每次都是最新的
    let xhr = new XMLHttpRequest();
    console.log(xhr);
    
    xhr.open("get", "./?account=18310612838&password=667");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //xhr.timeout = 100;
    xhr.withCredentials = true;
    
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 400) {
          console.log(JSON.parse(xhr.response));
        }
      }
    };
    xhr.ontimeout = function () {
      console.log("请求超时");
    };
    xhr.send();
    
    let xhr = new XMLHttpRequest();
    console.log(xhr);
    
    xhr.open("post", "./");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //xhr.timeout = 100;
    xhr.withCredentials = true;
    
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 400) {
          console.log(JSON.parse(xhr.response));
        }
      }
    };
    xhr.ontimeout = function () {
      console.log("请求超时");
    };
    xhr.send("account=18310612838&password=666");
    

服务器版本倒计时

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>距离20234620:00:00 还有 <span id="spanbox"></span></h1>

    <script>
      //倒计时的时间来自于服务器---ajax
      //世界获取的越早越好  请求方式head    readyState===2
      function getTime() {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest();
          xhr.open("head", "/");
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 2 && xhr.status === 200) {
              let time1 = xhr.getResponseHeader("date");
              let time2 = new Date(time1);
              resolve(time2);
            }
          };
          xhr.send();
        });
      }

      let timer = null;
      let time2 = 0;

      function addZero(n) {
        return n < 10 ? "0" + n : n;
      }

      function computed() {
        let endTime = new Date("2023/4/8 20:00:00");
        time2 += 1000; //每隔1000调用一次computed(),time2每隔1000ms加1000
        let diffTime = endTime - time2;

        let day = parseInt(diffTime / (24 * 60 * 60 * 1000)); //天数
        let hour = parseInt((diffTime / (60 * 60 * 1000)) % 24); //小时
        let mintues = parseInt((diffTime / (60 * 1000)) % 60); //分钟
        let seconds = parseInt((diffTime / 1000) % 60); //秒

        let str = `${day}天,${addZero(hour)}:${addZero(mintues)}:${addZero(
          seconds
        )}`;
        spanbox.innerHTML = str;
      }

      async function init() {
        time2 = +(await getTime()); //***获取服务器的时间,改为***毫秒数
        timer = setInterval(() => {
          computed();
        }, 1000);
      }
      init();
    </script>
  </body>
</html>

跑服务器环境

那个目录有package.json,cmd终端窗口就要在那打开,之后安装依赖npm i

如果是node环境,用node JavaScript文件名全称来打开及运行。

进阶参考

  1. HTTP 状态码 - 菜鸟教程的http状态码表示
  2. HTTP 状态码 - 百度百科
  3. ContenType类型大全(包括Office2007文件等问题的解决办法)
  4. 如何在纯 JavaScript 中使用 GraphQL
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值