1. Toy模板网首页
  2. > Toy博客

20230406----重返学习-AJAX

9月前 作者：方朝端 分类：Toy博客 阅读(32) 违法举报

这篇具有很好参考价值的文章主要介绍了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>距离2023年4月6号20: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文件名全称来打开及运行。文章来源地址https://www.toymoban.com/news/detail-409690.html

进阶参考

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

到了这里，关于20230406----重返学习-AJAX的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 20230401----重返学习-冒泡相关事件-拖拽-放大镜

    mouseenter/mouseleave与mouseover/mouseout mouseover/mouseout 有冒泡，忽略层级之间的关系 mouseenter/mouseleave 没冒泡，不会忽略层级之间的关系 事件委托 事件委托: 也叫事件代理，将绑定的事件委托给祖先元素，祖先元素监听事件，并利用e.target来分配给当前元素 原理是: 事件冒泡机制 事

    2023年04月08日
    浏览(39)

  • 20230728----重返学习-跨域-模块化-webpack初步

    跨域 为什么要跨域？ 浏览器为了安全，不能让我们的html文件可以随意引用别的服务器中的文件，只允许我们的html或js文件中，请求我们自己服务器。这个就是浏览器的同源策略。 因为我们的网页是一个html文件，这个html是在一个域名里的。而这个html会引用各种文件，如图片

    2024年02月15日
    浏览(47)

  • 20230623----重返学习-vue-cli脚手架

    Vue工程化处理工具之 : @vue/cli 脚手架的本质：基于webpack实现项目的打包部署; vue/cli 安装和使用 可选择当前配置项 文件地址在：C:Users当前电脑用户名.vuerc。 如：C:Usersfangc.vuerc 文件目录 package.json 目录： scripts：npm可执行命令 serve命令： vue-cli-service 是Vue脚手架内部封装的

    2024年02月10日
    浏览(62)

  • 20230706----重返学习-vue路由导航守卫相关-物美后台管理系统

    常见面试题 面试题：介绍一下 vue-router 中的导航守卫函数 面试题：介绍一下你对vue-router的理解？ 导航守卫函数 面试题：介绍一下 vue-router 中的导航守卫函数 在每一次路由切换的时候，首先把路由匹配、导航确认等事宜先处理好-在此期间会触发一系列的钩子函数，这些函数

    2024年02月12日
    浏览(39)

  • 20230711----重返学习-组件缓存-图片上传-富文编辑器-鉴权处理

    keep-alive组件的使用 keep-alive组件的原理 图片上传流程 点击上传图片后，把图片发送给服务器。 服务器返回一个相对或绝对地址。 提交时，把图片地址与其余表单数据一起传递给服务器。 el-upload组件 图片上传分为两步： 选取图片 规则限制：类型、大小… multiple 是否支持多

    2024年02月16日
    浏览(42)

  • 20230619----重返学习-图片缩略图幻灯片-插件封装的步骤-NativeApp与WebApp

    总体思路 整理思路。 所有的结构都包在一个盒子中。盒子里有两层内容： 盒子宽高由前端根据设计稿来定。 盒子宽高应具体到px，以便内部使用百分比进行布局。 一层是封面，用于展示播放时长和视频主图。 一层是进度图，用于展示进度条对应的视频缩略图。根据用户鼠

    2024年02月10日
    浏览(46)

  • 20230626----重返学习-Vue的学习路线-常用的vue指令-v-model-vue常见面试题

    如何学习Vue？ 第一条线：视图线 template 或 jsx语法 指令「内置的14个指令和自定义指令」 jsx语法 VirtualDOM编译的机制 掌握DOM-diff算法 … 第二条线：数据线 学习 OptionsAPI / CompositionAPI 中的：语法、原理、区别等内容 OptionsAPI选项 学习 MVVM 的原理 数据是如何被监听的「Vue2和Vu

    2024年02月11日
    浏览(36)

  • 20230707----重返学习-物美管理系统-登录流程-页面路由跳转-面包屑导航-访问历史列表

    登录流程 客户端： 表单校验。 避免无效请求。 防止SQL注入。 密码进行加密-MD。 非对称性加密。 获取表单信息，向服务器发送。 请求-post。 服务器端： 获取请求主体传递的信息-建议二次校验。 根据传递的验证码及uuid，到数据库去查询，校验验证码的准确性。 不准确：反

    2024年02月13日
    浏览(45)
  • Java每日一练(20230406)

    Java每日一练(20230406)

    目录 1. 翻转二叉树  🌟 2. 接雨水  🌟🌟 3. 求平均值、最大值  ※ 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练 专栏 C/C++每日一练 专栏 Java每日一练 专栏 翻转一棵二叉树。 示例： 输入： 输出： 出处： https://edu.csdn.net/practice/24851844 代码： 输出： 4  2 7 

    2023年04月09日
    浏览(81)

  • 20230529----重返学习-复合组件通信redux-redux源码-redux工程化开发-自定义hook

    要想实现复合组件通信，一般采用公共状态管理方案。 常见的公共状态管理方案： 官方推荐的：redux。 redux + react-redux + redux-logger / redux-promise / redux-saga / redux-thunk ：中间件。 代表：dva「redux-saga 」或 umi。 @reduxjs/toolkit ：工具类。 mobx 。 zustand 。 … redux的应用场景 redux 在以

    2024年02月06日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包