第二十三章 javascript请求方式Ajax

news/2024/4/15 4:01:06/文章来源:https://blog.csdn.net/weixin_41636483/article/details/136534479

文章目录

  • 一、Ajax的概念
  • 二、Ajax的使用
      • 使用流程
      • xhr 状态码:xhr.readyState
      • http 状态码:xhr.status
  • 三、发送数据的数据格式 - Content-Type
  • 四、其他
      • 1. POST和GET的区别
      • 2. AJAX的兼容问题
      • 3. 个别设备中ajaxGet请求的缓存问题
      • 4. XMLHttprequest常见事件

一、Ajax的概念

  1. ajax是前后端数据交互的重要手段
  2. Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
  3. Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
    • 异步JavaScript,通过用户或其他与浏览器相关事件捕获交互行为
    • XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
    • 服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
    • 其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其呈现到页面上。
  4. 由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
    • 不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
    • 用户体验极佳(不刷新页面即可获取可更新的数据);
    • 提升 Web 程序的性能(在传递数据方面做到按需发送,不必整体提交);
    • 减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
  5. 而 Ajax 的不足由以下几点:
    • 不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
    • 前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会记录前后页面);
    • 搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);

二、Ajax的使用

使用流程

  1. 创建xhr对象:
    • const xhr = new XMLHttpRequest( );
  2. 设置请求参数
    • xhr.open('get', 'data/test.json', true);
      • 参数1:请求方式:POST || GET
      • 参数2:要请求的url
      • 参数3:true异步,false同步
  3. 观察状态(是否接通)
    • onreadystatechange:当xhr.readyState发生改变时触发
    • onload:当xhr.readyState为 4 时触发
  4. 发送
    • xhr.send(null);
  5. ajax使用get方式和post发送请求的主要区别:
    • open的第一个参数
    • 发送请求数据的位置
      • get数据在url后拼接
      • post数据传给send方法
    • 发送数据的格式
      • get数据默认格式为:**querystring**
      • post数据需要手动设置为:**application/x-www-form-urlencoded**
        • ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr 状态码:xhr.readyState

状态码含义
0(未初始化)还没有调用send()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法执行完成,已经接收到全部响应内容
3(交互)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用了

http 状态码:xhr.status

状态码含义
1**请求收到,继续处理
2**操作成功收到,分析、接收
3**完成此请求必须进一步处理
4**请求包含一个错误语法或不能完成
5**服务器执行一个完全有效请求失败

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除

400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——端口过载,服务器使用另一个端口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支持请求头中指定的HTTP版本

三、发送数据的数据格式 - Content-Type

Content-Type(MediaType),即是Internet Media Type,互联网媒体类型,也叫做MIME类型。在互联网中有成百上千种不同的数据类型,HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签,用于区分数据类型。最初MIME是用于电子邮件系统的,后来HTTP也采用了这一方案。

在HTTP协议消息头中,使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据,以及告诉客户端(一般是浏览器)如何解析响应的数据,比如显示图片,解析并展示html等等。

  1. Content-Type的语法:
    • Content-Type: type/subtype;parameter
      • type:主类型,任意的字符串,如text,如果是*号代表所有;
      • subtype:子类型,任意的字符串,如html,如果是*号代表所有,用“/”与主类型隔开;
      • parameter:可选参数,如charset,boundary等。
    • 例如:
      • Content-Type: text/html;
      • Content-Type: application/json;charset:utf-8;
  2. 常见的媒体格式类型如下:
    • text/html : HTML格式
    • text/plain :纯文本格式
    • image/gif :gif图片格式
    • image/jpeg :jpg图片格式
    • image/png:png图片格式
    • application/xml:XML数据格式
    • application/json:JSON数据格式
    • application/pdf:pdf格式
    • application/x-www-form-urlencoded : 中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
    • multipart/form-data:需要在表单中进行文件上传时,就需要使用该格式

四、其他

1. POST和GET的区别

  1. POST主要用来发送数据,GET主要用来获取数据;
  2. POST发送数据的安全性较好,而GET较差;
  3. POST发送数据不限制大小,而GET大小受限2~100k。
  4. 在数据获取时用GET方式,在操作数据时应使用POST方式。

2. AJAX的兼容问题

  1. 正常浏览器:new XMLHttpRequest();
  2. IE5:new ActiveXObject("Microsoft.XMLHTTP");

3. 个别设备中ajaxGet请求的缓存问题

  1. 某次请求走缓存的条件:get请求,重复地址
    • 后果:提升速度,无法实时获取服务器最新数据
  2. 不想走缓存:可以通过在url后拼接时间戳的方式解决
    • url = url + "?" + str + "__t__=" + Date.now()

4. XMLHttprequest常见事件

  1. readyStateChange事件:表示readyState属性的值发生改变。
  2. load事件:表示服务器响应数据接收完毕,等同于readyState4时的状态。
  3. abort事件:表示请求被中断。可通过xhr.abort()方法中断xhr请求。
  4. timeout事件:表示服务器响应超时。可通过xhr.timeout=1000属性设置超时时间,单位为毫秒。
  5. error事件:表示请求出错。
  6. progress 事件:上传文件时,不断返回上传的进度。

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

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

相关文章

代码随想录算法训练营Day38 || leetCode 7509. 斐波那契数 || 70. 爬楼梯 || 746. 使用最小花费爬楼梯

动态规划和我们数电中学习的时序电路类似,某一时刻的状态不仅与当前时刻的输入有关,还与之前的状态有关,所以推导过程中我们需要模拟题目中的情况,来找到每一时刻状态间的关系。 做题思路如下 509. 斐波那契数 此题简单 状态方程…

大型c++项目在linux下如何调试?

大型c项目在linux下如何调试? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「Linux 的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!&#xff01…

融资项目——OpenFeign的降级与熔断

当一个微服务调用其他微服务时,如果被调用的微服务因各种原因无法在规定时间内提供服务,则可以直接使用本地的服务作为备选,即进行降级熔断。 如之前所提到的微服务为例: 如果希望实现降级熔断,可以在本地创建一个实现…

21、状态模式(行为性模式)

版本一、get状态指针 #include <iostream> using namespace std;//前置声明 class Context;//状态 class State{ public://4个状态virtual void toUp (Context& context){ }virtual void toDown (Context& context){ }virtual void toLeft (Context& cont…

阿里云服务器使用教程_2024建站教程_10分钟网站搭建流程

使用阿里云服务器快速搭建网站教程&#xff0c;先为云服务器安装宝塔面板&#xff0c;然后在宝塔面板上新建站点&#xff0c;阿里云服务器网aliyunfuwuqi.com以搭建WordPress网站博客为例&#xff0c;来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流…

SpringCloudRibbon负载均衡原理与实践

文章目录 4.1.负载均衡原理4.2.源码跟踪1&#xff09;LoadBalancerIntercepor2&#xff09;LoadBalancerClient3&#xff09;负载均衡策略IRule4&#xff09;总结 4.3.负载均衡策略4.3.1.负载均衡策略4.3.2.自定义负载均衡策略 4.4.饥饿加载 实际的开发中 我们在使用 OpenFeign…

图遍历算法

图的遍历算法有两种&#xff1a;深度优先遍历、广度优先遍历算法。 深度优先遍历算法就是从起始结点开始&#xff0c;只要有相邻且未被访问的结点就要直接进行访问&#xff0c;直到最后不能向下遍历为止&#xff0c;再回溯寻找下一个策略。 广度优先遍历算法&#xff0c;就是从…

面试经典150题——环形链表

Suffering, for the weak is the tomb of death, and for the strong is the soil of germinal ambition.​ 1. 题目描述 2. 题目分析与解析 2.1 思路一 这个题目就是判断一个链表有没有环&#xff0c;其实我们之讲过一个题目&#xff0c;就实现了判断链表有没有环的步骤&a…

spring boot集成neo4j实现简单的知识图谱

一、neo4j介绍 随着社交、电商、金融、零售、物联网等行业的快速发展&#xff0c;现实社会织起了了一张庞大而复杂的关系网&#xff0c;传统数据库很难处理关系运算。大数据行业需要处理的数据之间的关系随数据量呈几何级数增长&#xff0c;急需一种支持海量复杂数据关系运算的…

九:多播和广播

1 多播 &emsp 多播(Multicast )方式的数据传输是基于UDP完成的。 因此&#xff0c;与UDP服务器端/客户端的实现方式非常接近。 区别在于&#xff0c; UDP数据传输以单一目标进行&#xff0c;而多播数据同时传递到加入(注册)特定组的大量主机。 换言之&#xff0c;采用多播…

DFT应用:计算线性卷积

目录 一、计算两个有限长序列的线性卷积示例 二、无限长序列和有限长序列的卷积(重叠相加法) 实验1&#xff1a;数据实验 实验2&#xff1a;纯净语音加混响(音效) 二、无限长序列和有限长序列的卷积(重叠保留法) 实验1&#xff1a;数据实验 三、小结 一、计算两个有限长序…

[⑥5G NR]: 无线接口协议,信道映射学习

5G系统整体包括核心网、接入网以及终端部分&#xff0c;接入网与终端间通过无线空口协议栈进行连接。无线接口可分为三个协议层&#xff1a;物理层&#xff08;L1&#xff09;、数据链路层&#xff08;L2&#xff09;和网络层&#xff08;L3&#xff09;。 L1&#xff1a;物理…

利用OpenCV 抽取视频的图片,并制作目标检测数据集

1、前言 目标检测中&#xff0c;图片的数据可以从视频中抽取&#xff0c;而OpenCV的VideoCapture可以实现这样的操作 需要的库文件 opencv pip下载&#xff1a; pip install opencv-contrib-python 更换镜像源下载&#xff1a; pip install opencv-contrib-python -i htt…

Linux 理解操作系统

目录 一、冯诺依曼体系结构 二、操作系统 1、概念 2、设计OS的目的 3、定位 4、先描述再组织 5、系统调用和库函数概念 一、冯诺依曼体系结构 计算机&#xff0c;都是有一个个的硬件组件组成&#xff1a; 输入单元&#xff1a;包括键盘, 鼠标&#xff0c;扫描仪, 写板等…

寻找旋转排序数组中的最小值[中等]

优质博文IT-BLOG-CN 一、题目 已知一个长度为n的数组&#xff0c;预先按照升序排列&#xff0c;经由1到n次 旋转 后&#xff0c;得到输入数组。例如&#xff0c;原数组nums [0,1,2,4,5,6,7]在变化后可能得到&#xff1a; 【1】若旋转4次&#xff0c;则可以得到[4,5,6,7,0,1,2…

Flink ExecuteGraph构建源码解析

文章目录 前言ExecutionGraph中的主要抽象概念源码核心代码入口源码核心流程&#xff1a; 前言 在JobGraph构建过程中分析了JobGraph的构建过程&#xff0c;本文分析ExecutionGraph的构建过程。JobManager(JobMaster) 根据 JobGraph 生成 ExecutionGraph。ExecutionGraph是JobG…

C++前置声明的学习

【C】C中前置声明的应用与陷阱_前置生命如何使用-CSDN博客 首先&#xff0c;这样写会报错&#xff1a; #pragma once #include "A.h" class B {A a; public:B(void);~B(void); };#include "B.h" B::B(void) { }B::~B(void) { } #pragma once #include &…

URL?后参数有特殊字符问题

前端对于URL的参数不做处理 不处理、用URLDecoder.decode()处理、用URLEncoder.encode()处理、用URLEncoder.encode()处理后再用URLDecoder.decode()处理 结果 前端对于URL的参数用encodeURIComponent(‘XF-OPPZZD-26*316’)处理 结果 前端不处理有&字符时 结果会把后…

前端网络请求异步处理——Promise使用记录

Promise是ES6中新增的一个处理复杂异步请求的工具&#xff0c;其主要形式为&#xff1a; const baseUrl http://localhost:80 export const $request (param {}) > {console.log(请求参数, param)return new Promise((resolve, reject) > {wx.request({url: baseUrl …

海外服务器被DDOS攻击了该怎么办

在当今全球化的时代&#xff0c;越来越多的企业和组织选择将业务拓展至海外市场。然而&#xff0c;随着业务的扩大和网络的延伸&#xff0c;也面临着来自不同地区的网络威胁和攻击风险。如果您的海外服务器遭受了DDOS攻击&#xff0c;以下是一些应对措施&#xff1a; 一、立即断…