网络-8【AJAX版本、响应状态、超时设置、同步与异步】

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

一.AJAX版本

XMLHttpRequest标准又分为Level 1 和Level 2

XMLHttpRequest Level 1 缺点:

  1. 无法发送跨域请求
  2. 不能非纯文本的数据
  3. 无法获取传输进度

XMLHttpRequest Level 2 改进

  1. 可以发送跨域请求
  2. 支持获取二进制数据(非纯文本数据)
  3. 支持上传文件
  4. formData对象
  5. 可以获取传输进度
  6. 可以设置超时时间

兼容性问题

  1. IE8/9/Opara Mini不支持xhr对象
  2. IE10/11不支持相应类型为JSON(XMLHttpRequest中不支持,在Active中支持)
  3. 部分浏览器不支持超时设置
  4. 部分浏览器不支持blob(文件对象的二进制数据)

二.响应状态

状态码

xhr.status/xhr.statusText:服务器回应的HTTP状态码/服务器发送的状态提示

200,OK访问正常

301,Moved Permanently ,永久移动

302,Move temporarily,暂时移动

304,Not Modified,未修改

307,Temporary Redirect,暂时重定向

401,Unauthorized,未授权

403,Forbidden,禁止访问

404,Not Found,未发现指定网址

500,Internal Server Error,服务器发生错误

304也代表成功所以在封装的AJAX中要考虑这种情况也为成功,如下:

监听函数

xhr.onloadstart 绑定HTTP请求发出的监听函数

xhr.onerror 绑定请求失败的监听函数(修改封装的AJAX)

xhr.onload 绑定请求成功完成的监听函数

xhr.onabort 绑定请求中止(调用了abort()方法)的监听函数

xhr.onloadend 绑定请求完成(不管成功与失败)的监听函数

loadstart->readyState ===4 ->load/error/abort/-> loadend

三.超时设置

xhr.timeout

多少毫秒后,如果请求仍然没有得到结果,就会自动终止。如果该属性等于0就表示没有时间限制

xhr.ontimeout

绑定请求超时一个监听函数,如果发生timeout事件,就会执行这个监听函数

超时响应程序的案例(清除计时器的注意事项)

兼容性不好

改进的方法设置timeout



 

四.同步与异步

字符串处理false传参

异步

同步

区别在于同步有阻塞,异步时同时进行得

通过datatype来确定返回类型返回不同数据

下方第一个AJAX不执行得问题

解决办法:每次doajax的时候实例化对象

之前是在外面声明的,导致异步得情况下两个请求公用一个实例


Axios POST、GET、多并发请求 Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。 安装 npm install axios --save cnpm install axios --save 使用CDN <script src="https://unpkg.com/axios/dist/axios.min.js"></script> GET请求 axio... 阅读详情

相关推荐

各种版本ajax使用方法及相关问题

提供了四种 ajax使用方式,jquery、prototype、ajaxrequest以及原始版本使用方法及实例demon,以及相关乱码问题等等。

IE8发送ajax方法解决

ie8ie9发送Ajax无反应、或者拒绝访问报错解决方法

孤独旋转的博客 1310

【项目立项管理、项目整合管理】30天通过软考高项-第二天

①项目或阶段的概述;②范围目标、范围的评估标准,证明达到完⼯标准的证据;③质量目标、项目和产品质量的评估标准、相关核实信息和实际里程碑交付日期以及偏差原因;④成本目标,包括可接受的成本区间、实际成本,产⽣任何偏差的原因等;⑤最终产品、服务或成果的确认信息的总结;⑥进度计划目标,包括成果是否实现项目预期效益:如果在项目结束时未能实现效益,则指出效益实现程度并预计未来实现情况;

weixin_42520723的博客 965

Ajax知识体系大梳理

通常, 一个xhr实例对象拥有10个普通属性+9个方法. readyState 只读属性, readyState属性记录了ajax调用过程中所有可能的状态. 它的取值简单明了, 如下: | readyState | 对应常量 | 描述 | | — | — | — | | 0 (未初始化) | xhr.UNSENT | 请求已建立, 但未初始化(此时未调用open方法) | | 1 (初始化) | xhr.OPENED | 请求已建立, 但未发送 (已调用open方法, 但未调用send方法) | | 2 (

m0_67619362的博客 413

第二节:Ajax核心技术 - XMLHttpRequest 对象

XHR 1.0 是一个内建的浏览器对象,可以实现 Ajax 请求,Ajax技术的核心就是XMLHttpRequest 对象。

孤安先生的博客,作者主站正在重构中,敬请期待! 864

AJAX笔记

AJAX笔记

qwerasdctds的博客 475

Ajax三:同步异步的区别

平常在浏览网页的时候,当打开一个新的网页时,经常遇到整个网页的基本架构(如页眉、页脚、网页顶部描述性文字、网页底部描述性文字等)已经加载出来了,但网页中间某些数据、图片等核心区块需要等一段时间后才会出来,这其中就大概率使用到了ajax异步处理的方式;(maybe) 目录 零:ajax同步异步的简述 一:示例1:如果设置成false同步时: 二:示例2:设置成true异步时:(核心部分) 零:ajax同步异步的简述 在ajax的第二步,发送ajax请求的时候,第三个参数,true:异步;fal

小枯林的博客 1375

小白学习ajax

HTTP学习 1.概念 1.客户端服务器超本文无状态传输协议 2.http默认端口80 3.https 默认端口 443 2.请求方法 1.options:测试有哪些方法可以用 2.get:获取服务信息 3.Post: 修改更新,新增服务器信息 4.put:新增 5.delete:删除 6.head 只返回头信息 7.trace:回显头信息,用来测试 8.connect: 管道形式连接 3.请求过程 建立tcp连接 客户端发送请求头+请求体 服务器响应请求头+请求体 ,关闭tcp连接 客户端

cj521zhihui的博客 1万+

实现Ajax异步交互

实现Ajax异步交互 文章目录 实现Ajax的执行步骤 创建Ajax的核心对象 通过Ajax异步请求数据 请求方式 Ajax异步交互 文章包含以下几点内容 实现Ajax的执行步骤 创建Ajax的核心对象 通过Ajax异步请求数据 监听服务器端通信状态 处理服务器端响应数据 实现Ajax的执行步骤 实现Ajax异步交互需要服务器端逻辑进行配合,而作为客户端的HTML页面需要完成以下步骤: 创建Ajax的核心对象XMILHlttpRequest对象 通过XMLHttpReques

码小余の博客 4599

js原生ajaxjquery的ajax的用法区别

Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 。 1.原生JavaScript写法:(原生js写ajax就像打电话)...

sunnyjingqi的博客 3329

Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

1.之前用jsp请求存在的问题,同步请求; 2.异步请求Ajax是啥; 3.axios的get和post方法,用axios实现异步请求; 4.vue框架的出现和入门

Arya的博客,专注后端领域 1893

ajax(面试重点)

目录 一、ajax简介 二、ajax优缺点(面试题) 三、异步同步 四、ajax处理网络请求 五、xhr对象发送GET、POST请求 六、最后补充(面试题) 1.grt请求和post请求的区别 2、常见的响应码和状态码含义 ①status ②readyState 一、ajax简介 ajax(Asynchronous Javascript And XML)其实就是异步的javaScript和XML。 XML:<html>这是html标签,XML格式是一样的可以自定

A20201130的博客 3846

ajax同步异步,json-serve的安装使用,node.js的下载

ajax同步异步,json-serve的安装使用,node.js的下载

qq_46372132的博客 1466

Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue &amp; 同步请求 到 异步请求_jsp异步请求

异步 JavaScript 和 XML,或 Ajax 本身不是一种技术,而是一种将一些现有技术结合起来使用的方法,包括:HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。当使用结合了这些技术的 Ajax 模型以后,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。

2401_89733454的博客 686

java Ajax入门

java Ajax入门 文章目录java Ajax入门前言一、同步异步二、Ajax的使用JavaScript方法JQuery方法总结 前言 接下来整理一下Ajax相关的内容,AJAX(asynchronous js and xml),即异步的JavaScript和xml,它的主要作用就是让页面不必等待服务器返回整个页面信息,而可以通过异步的方式给服务器发送数据和获取数据,对页面进行局部刷新,是一种提高用户体验的技术。 一、同步异步 同步异步的主要区别如下; (1)同步:一个响应结束后才能发送下

qq_54088719的博客 7609

创建ajax的步骤

创建ajax的步骤: 创建Ajax对象 连接到服务器 发送请求 接收返回值 一.创建Ajax对象 语法: 非IE6语法: var oAjax=new XMLHttpRequest(); 老版本IE5 和 IE6语法: varoAjax=new ActiveXObject("Microsoft.XMLHTTP") <!DOCTYPE html> <html lang="en"> <head> .

weixin_43638890的博客 2125

AJAX发送请求响应-jQuery中ajax的使用-node初级(五)

AJAX简介: AJAX异步JavaScriptXML技术,是一套综合了多项技术的浏览器端网络开发技术。 简单来说,AJAX就是使用JavaScript代码发送网络请求并处理响应,有浏览器即客户端实现。 ajax技术能够在页面不刷新的情况下,和服务器端进行交互,可以仅向服务器发送并取回必须的数据,并在客户端采用js处理响应。交换的数据大大减少,服务器的响应更加迅速,把数据处理工作放到了客户端进行,减少了web服务器的负荷。 特点:异...

henu_GM的博客 3093

Ajax异步请求方法(详细)

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML) 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面情况下,能够更新部分网页的技术。同步异步同步互交:指向服务器发送一个请求,需要等待返回,然后才能够发送下一个请求,期间有个等待过程;异步互交:指向服务器发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待;

weixin_46721191的博客 6317

原生JS实现Ajax异步交互

原生JS实现Ajax应该是前端开发人员在学习ajax中的第一步,这篇博客需要一些必要的前置知识,会更容易理解: JS基础,JS DOM操作,JS事件,ES6(熟悉更好) 什么是AJAX AJAX:全称Asynchronous Javascript And XML,也就是异步的JS和XML的意思。JS我们熟悉,XML可能不熟悉。 XML:XML文件和我们的HTML很类似,都是使用标签结构,但是XML是用来存放数据和传输数据的,且没有像<div>,<a>这样的预定义标签,全部是.

szwh1998的博客 3188

AJAX异步请求的功能实现

通过js代码模拟浏览器向服务器发送http请求,服务器响应之后进行捕获更新页面异步请求:异步请求就是网速很慢的情况下请求数据但是只有后台服务器数据到达了网页当中,浏览器才会把整个网页的内容做修改说白了就是整个页面框架都不会更新更新的只有js从服务器请求的数据构建异步请求。

一个努力学习网安的小牛马 148
上一篇: 网络-7【同步与异步请求、混编、AJAX、原生AJAX封装】
下一篇: 网络-9【六种跨域获取数据的方法】
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值