JS Ajax 封装

ajax 封装

  • 一、 什么是Ajax？
  • 二、 Ajax的优缺点？
    • 2.1 优点
    • 2.2 缺点
  • 三、 Ajax的使用
    • 3.1 状态码
    • 3.2 xhr的基本使用
    • 3.3 ajax原生封装：
      • 3.3.1 触发GET请求：
      • 3.3.2 调用POST请求：
  • 四、Ajax的约束

一、 什么是Ajax？

Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。

举个例子，我们去饭店吃饭，然后点了一桌子菜，后来发现其中有一道菜太咸了，因此我们只需要让服务员端回去给厨师重新做这一道菜再拿回来就行了。

吃饭事件数据更新
我们客户端
菜品页面所有的数据
服务员ajax对象
厨师服务器

当我们发现有一道菜太咸了，不需要让厨师把所有的菜重新做一遍，只要让服务员拿这一道菜回去给厨师重做这一操作就相当于让ajax对象向后端请求那一小部分数据再拿回来更新页面而无需刷新整个页面。

二、 Ajax的优缺点？

当我们发现有一道菜太咸了，不需要让厨师把所有的菜重新做一遍，只要让服务员拿这一道菜回去给厨师重做这一操作就相当于让ajax对象向后端请求那一小部分数据再拿回来更新页面而无需刷新整个页面。

2.1 优点

  • 浏览器默认支持（一般浏览器都是支持JavaScript的）
  • 提高用户体验（不需要刷新整个页面，而只需要局部刷新）
  • 提高页面的性能（只需要请求部分数据，所以数据量就明显下降了）

2.2 缺点

  • 破坏了浏览器的前进和后退功能（Ajax不会改变网页URL，因此不会在浏览器记录前后页面）
  • 对搜索引擎的支持较弱（搜索引擎无法监测到JS引起的数据变化）

三、 Ajax的使用

Ajax的基本流程：创建XHR对象 => 发送数据 => 接收数据

3.1 状态码

既然Ajax涉及到前后端的数据交互，那么我们就先来简单的看一下几种类型的状态码，如下表：

状态码含义
100 ~ 199连接含义
200 ~ 299各种成功的请求
300 ~ 399重定向
400 ~ 499客户端错误
500 ~ 599服务端错误

3.2 xhr的基本使用

在使用xhr之前，我们要创建一个xhr的实例对象：

let xhr = new XMLHttpRequest()

然后再调用xhr对象上的 open() 方法，表示创建一个请求。
open() 方法接收三个参数：

  • 第一个参数： 请求的类型（例如get 、post）
  • 第二个参数： 请求的URL
  • 第三个参数： 是否异步发送请求（默认为true）
// 创建了一个Ajax请求
xhr.open('get', 'example.php', 'true')

光调用了 open() 方法还不够，它只是创建了一个请求，但还没有发送请求，因此我们还要调用xhr对象上的另一个方法，即 send() 方法，表示将请求发送给目标URL

send() 方法接收一个参数：

  • 第一个参数： 作为请求主体发送的数据（例如post请求携带的数据）
// 我们上面创建的是get请求，因此send()方法无需传参
xhr.send()

请求发送出去后，客户端需要接收服务器响应回来的数据，xhr对象中有一些属性，它们存储着服务端返回来的一些数据信息，如下表所示:

属性名含义
response Text服务端返回的文本信息
responseXML服务端返回的XML DOM 文档
statusHTTP 状态码
status TextHTTP状态码说明
readyStatexhr对象的请求响应阶段

既然我们要获取服务端返回的数据，我们就要知道服务端是何时返回数据的，这就可以通过上面表格中的 readyState 属性来判断了
readyState 属性一共有5个值，分别表示不同的请求响应阶段：

  • 0： 还未创建请求，即未调用 open() 方法
  • 1： 已调用 open() 方法，但未发送 send() 方法
  • 2： 已调用send() 方法，但未接收到响应
  • 3： 已接收到部分响应
  • 4： 已接收到全部的响应

同时，xhr对象可以绑定一个 readystatechange 事件，每当 readyState 属性发生改变，都会触发该事件，因此，该事件在一次请求中会被多次触发

xhr.onreadystatechange = function() {console.log('readyState属性发生改变了')
}

所以，我们可以在 readystatechange 事件中判断一下 readyState 属性是否为 4，即是否已经接收所有的响应，然后还可以再继续判断一下 status 属性，看看状态码是否为 200，当上述都成立了，我们再去 responseText 属性 或 responseXML 属性中获取响应数据

xhr.onreadystatechange = function() {// 判断是否已接收所有响应if(xhr.readyState === 4) {// 判断状态码是否为200if(xhr.status === 200) {console.log(xhr.responseText)}}
}

3.3 ajax原生封装：

//封装一个ajax请求
function ajax(options) {//创建XMLHttpRequest对象const xhr = new XMLHttpRequest()//初始化参数的内容options = options || {}options.type = (options.type || 'GET').toUpperCase()options.dataType = options.dataType || 'json'// 处理参数let str = ''let params = options.data;for (let key in params) {str += key + '=' + params[key] + '&'}params = str.slice(0, str.length - 1)//发送请求if (options.type === 'GET') {xhr.open('GET', options.url + '?' + params, true)xhr.send(null)} else if (options.type === 'POST') {xhr.open('POST', options.url, true)// post 请求需要设置请求头 模仿表单请求xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send(params)}//接收请求xhr.onreadystatechange = function () {if (xhr.readyState === 4) {let status = xhr.statusif (status >= 200 && status < 300) {options.success && options.success(xhr.responseText, xhr.responseXML)} else {options.fail && options.fail(status)}}}
}

3.3.1 触发GET请求：

上面也讲解了Ajax请求的简单应用，同时也是拿 get 请求来举得例子，因此这里我就不多做说明，唯一要讲的就是，get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ? 后面的，例如这样 example.php?query=4&em=0，所以若是我们要在发送get请求时携带数据，只需要在调用 open() 方法时，将数据写在第二个参数的URL的 ? 后面即可

let btn = document.querySelector('.btn')
btn.addEventListener('click', function () {ajax({type: 'get',dataType: 'json',data: { uid: '64dcd451a2d7172b77c03768', aid: "64db6361c57b44a4c47712af" },url: 'http://localhost:3456/wyc/getUser',success: function (text, xml) {//请求成功后的回调函数console.log(JSON.parse(text))},fail: function (status) {请求失败后的回调函数console.log(status)}})
})

接收结果：
在这里插入图片描述
在这里插入图片描述

3.3.2 调用POST请求：

发送post请求的过程几乎和get请求一样，唯一不一样的是数据的传递。大家都知道post请求的数据是放在请求体中的，因此我们需要调用xhr对象上的 setRequestHeader() 方法来模仿表单提交时的内容类型
该方法传入的参数比较固定，代码如下

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

然后我们上面也说过，send() 方法接收的一个参数是请求主体发送的数据，所以我们的post请求要发送的数据就要作为该方法的参数，代码如下：

xhr.send('query=4&em=0')

完整post请求：

let btn = document.querySelector('.btn')
btn.addEventListener('click', function () {ajax({type: 'post',dataType: 'json',data: { uid: '64dcd451a2d7172b77c03768', aid: "64db6361c57b44a4c47712af" },url: 'http://localhost:3456/wyc/attention',success: function (text, xml) {//请求成功后的回调函数console.log(JSON.parse(text))},fail: function (status) {请求失败后的回调函数console.log(status)}})
})

请求结果：
在这里插入图片描述
在这里插入图片描述

四、Ajax的约束

了解过同源策略以后，我们来看看如何让Ajax不受同源策略的限制而成功发送请求。CORS（跨域资源共享）要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通，我们只需要设置一个名为 Origin 的头部，值为当前页面的源信息（协议、域名、端口），例如 Origin : http://example.com ；然后服务器需要设置一个名为 Access-Control-Allow-Origin 的响应头部，其值为允许跨域访问的源信息，若服务器设置的 Access-Control-Allow-Origin 与我们设置的 Origin 相同，则表示服务器允许我们跨域请求其资源，或者服务器可以将 Access-Control-Allow-Origin 值设为 *，此时表示允许任何域向其发送请求并且不受同源策略的限制。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/83716.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

手搓CAS原理实现/ 模拟mutex的lock和unlock

手搓CAS原理实现/ 模拟mutex的lock和unlock

通过cas去实现自旋锁 flag的0表示现在没上锁，1表示已经上锁了 static int flag{0}; //0表示没有锁，1表示锁了int cas(int *ptr,int newp) {int old=*ptr;*ptr=newp;return old; }void lock() {while(cas(&flag,1)==0){// cout<<"lock"<<endl;// c…
阅读更多...
SQL plus简单使用

SQL plus简单使用

查看Oracle数据库全部数据库 数据库名称 SELECT name FROM v$database;这将返回所有数据库的名称。 视图 通过SQL查询dba_registry视图&#xff1a; 另一个查看数据库的方法是查询dba_registry视图&#xff0c;该视图包含了数据库中安装的所有组件的信息。以下是示例SQL查询…
阅读更多...
【新版】系统架构设计师 - 案例分析 - 数据库设计

【新版】系统架构设计师 - 案例分析 - 数据库设计

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 数据库设计数据库基础数据库设计概述E-R模型概念结构设计逻辑结构设计规范化&#xff08;范式&#xff09;反规范化技术数据库事务并发控制索引视图物化视图存储过程触发器数据库性能优…
阅读更多...
【Spring Cloud系列】Feign详解与实战

【Spring Cloud系列】Feign详解与实战

Feign详解与实战 文章目录 Feign详解与实战一、概述二、什么是Feign三、Feign特性四、Feign简单使用3.1 Feign使用步骤3.2 Feign具体使用1. 引入依赖2. 启动类上添加注解3.编写FeignClient接口 五、使用Feign发起http请求5.1 Maven导入Feign配置&#xff0c;并集成Jackson5.2 F…
阅读更多...
list 用法与模拟

list 用法与模拟

list 用法 list list 模拟 #pragma once #include <assert.h> namespace sjy {//链表节点template <typename T>struct __list_node{__list_node(const T& val T()):_prev(nullptr),_next(nullptr),_val(val){}/*成员变量*/__list_node<T>* _prev;__…
阅读更多...
基于matlab实现的光折射反射（不同界面）程序

基于matlab实现的光折射反射（不同界面）程序

完整程序: %平面电磁波在不同介质界面上入射、反射、折射仿真 %ReadMe!!!在下述说明的用户输入区内输入入射角和两介质折射率&#xff0c; %输出反射折射示意图与反射折射系数随入射角变化的曲线 %—————————————————————————————————————…
阅读更多...
百度SEO优化TDK介绍（分析下降原因并总结百度优化SEO策略）

百度SEO优化TDK介绍（分析下降原因并总结百度优化SEO策略）

TDK是SEO优化中很重要的部分&#xff0c;包括标题&#xff08;Title&#xff09;、描述&#xff08;Description&#xff09;和关键词&#xff08;Keyword&#xff09;&#xff0c;为百度提供网页内容信息。其中标题是最重要的&#xff0c;应尽量突出关键词&#xff0c;同时描述…
阅读更多...
9.20 QT作业

9.20 QT作业

widget.h #include <QPainter> //画家 #include <QTimerEvent> #include <QTime> #include<QTimer> //定时器类QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widge…
阅读更多...
c#扩展包-Stateless

c#扩展包-Stateless

准备 Stateless是一个有限状态机扩展包。在c#项目中可以直接通过NuGet安装。 使用他需要先用枚举写好你所有可能的状态和子状态。 例如移动&#xff0c;下蹲&#xff0c;空闲&#xff0c;跳跃&#xff0c;游泳&#xff0c;奔跑&#xff0c;走路。 其中&#xff0c;奔跑和走路…
阅读更多...
性能测试之使用Jemeter对HTTP接口压测

性能测试之使用Jemeter对HTTP接口压测

我们不应该仅仅局限于某一种工具&#xff0c;性能测试能使用的工具非常多&#xff0c;选择适合的就是最好的。笔者已经使用Loadrunner进行多年的项目性能测试实战经验&#xff0c;也算略有小成&#xff0c;任何性能测试&#xff08;如压力测试、负载测试、疲劳强度测试等&#…
阅读更多...
SAP DN已发货但是需求还挂在MD04上的异常处理（SE38执行程序：ATP_VBBE_CONSISTENCY OR SDRQCR21）

SAP DN已发货但是需求还挂在MD04上的异常处理（SE38执行程序：ATP_VBBE_CONSISTENCY OR SDRQCR21）

背景&#xff1a;DN 80074061已经发完货&#xff0c;但是在MD04上还挂着它的需求 处理方法&#xff1a; HANA S4 版本&#xff0c; SE38 执行程序 ATP_VBBE_CONSISTENCY HANA之前的版本执行程序 SDRQCR21 以 ATP_VBBE_CONSISTENCY 为例&#xff0c;先选择模拟模式 执行&…
阅读更多...
ChatGPT：解释Java中 ‘HttpResponse‘ 使用 ‘try-with-resources‘ 的警告和处理 ‘Throwable‘ 打印警告

ChatGPT：解释Java中 ‘HttpResponse‘ 使用 ‘try-with-resources‘ 的警告和处理 ‘Throwable‘ 打印警告

ChatGPT&#xff1a;解释Java中 ‘HttpResponse’ 使用 ‘try-with-resources’ 的警告和处理 ‘Throwable’ 打印警告 我在IDEA中对一个函数的警告点击了ignore&#xff0c;怎么撤回这个呢 ChatGPT&#xff1a; 要撤回在IDEA中对一个函数的警告的忽略&#xff0c;您可以按照以…
阅读更多...
VUE_history模式下页面404错误

VUE_history模式下页面404错误

uniapp 的history 把#去掉了&#xff0c;但是当刷新页面的时候出现404错误 解决方案&#xff1a;需要服务端支持 如果 URL 匹配不到任何静态资源&#xff0c;则应该返回同一个 index.html 页面 Apache <IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRu…
阅读更多...
【计算机网络】 拥塞控制

【计算机网络】 拥塞控制

文章目录 背景TCP的四种拥塞控制算法慢开始与拥塞避免&#xff1a;快重传&#xff1a;快恢复&#xff1a; 流量控制和拥塞控制本质上的 区别 背景 网络中的链路容量和交换节点中的缓存和处理机都有着工作的极限&#xff0c;当网络的需求超过他们的工作极限时&#xff0c;就出现…
阅读更多...
Unity——对象池

Unity——对象池

对象池是一种朴素的优化思想。在遇到需要大量创建和销毁同类物体的情景时&#xff0c;可以考虑使用对象池技术优化游戏性能。 一、为什么要使用对象池 在很多类型的游戏中都会创建和销毁大量同样类型的物体。例如&#xff0c;飞行射击游戏中有大量子弹&#xff0c;某些动作游戏…
阅读更多...
函数扩展之——内存函数

函数扩展之——内存函数

前言&#xff1a;小伙伴们又见面啦。 本篇文章&#xff0c;我们将讲解C语言中比较重要且常用的内存函数&#xff0c;并尝试模拟实现它们的功能。 让我们一起来学习叭。 目录 一.什么是内存函数 二.内存函数有哪些 1.memcpy &#xff08;1&#xff09;库函数memcpy &…
阅读更多...
高云FPGA系列教程（9）：cmd-parser串口命令解析器移植

高云FPGA系列教程（9）：cmd-parser串口命令解析器移植

文章目录 [toc]cmd-parser库简介cmd-parser库源码获取GW1NSR-4C移植cmd-parser实际测试cmd-parse命令解析器优化 本文是高云FPGA系列教程的第9篇文章。 上一篇文章介绍片上ARM Cortex-M3硬核处理器串口外设的使用&#xff0c;演示轮询方式和中断方式接收串口数据&#xff0c;并…
阅读更多...
GLTF编辑器如何快速重置模型原点

GLTF编辑器如何快速重置模型原点

1、什么是模型原点&#xff1f; 模型原点是三维建模中的概念&#xff0c;它是指在一个虚拟三维空间中确定的参考点。模型原点通常位于模型的几何中心或基本组件的中心位置。如图所示&#xff1a; 可以看到模型的原点在模型的几何中心 2、模型原点的作用 知道了什么是模型原点&…
阅读更多...
ubuntu18.04安装python3.10.13

ubuntu18.04安装python3.10.13

下载python包: https://www.python.org/downloads/安装关联软件包: apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev执行sudo ./configure --enable-optimizations 此命令是为了在编译 Python 时启用性…
阅读更多...
洛谷100题DAY6

洛谷100题DAY6

26.P1628 合并序列 法一&#xff1a; #include<bits/stdc.h> using namespace std; const int N 1e5 10; int n, cnt; string c, s[N], a[N]; int main() {cin >> n;for(int i 1; i < n; i ){cin >> s[i];}cin >> c;int len c.size();for(int…
阅读更多...
最新文章

Copyright @ 2022~2023