原生ajax调用,JavaScript进阶之原生AJAX接口请求的方式
简单介绍接口调用的方式
原生ajax 指的是 XMLHttpRequest(XHR)
基于jQuery的ajax是 jQuery对原生ajax的进一步封装
fetch则是通过而是es6 JavaScript Promisess设计的Ajax的替代品但是它不是对原本Ajax的封装 ,它本来就是原生而且比Ajax更加简化
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生Ajax的封装,只不过它是Promise的实现版本(Vue中常用它)
下面我们先了解原生Ajax的一些知识
简述JavaScript执行方式
我们都知道JavaScript的执行环境是「单线程」,所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务 ,这个任务可称为主线程 。
简述异步(Asynchronous [eskrns])
而所谓的异步(Asynchronous)指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。
其优势在于不阻塞程序的执行,从而提升整体执行效率。
区别:
同步:同一时刻只能做一件事,上一步完成才能开始下一步
异步:同时做多件事,效率更高
什么是AJAX
AJAX(即 Asynchronous Javascript And XML)AJAX 不是一门的新的语言,而是对现有持术的综合利用。
简单来说AJAX是基于web标签的xhtml+css ,可以使用dom进行动态的显示和交互 ,使用XML和XSLT(是一种用于将XML文档转换任意文本的描述语言) 进行数据的交换和操作 ,并使用XMLHttpRequest进行异步的数据查询和检索等操作……
AJAX的本质:能在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。
AJAX的作用:可以在页面不刷新的情况下,请求服务器,局部更新页面的数据。
XMLHttpRequest
浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面。
简单post异步请求对象
由于服务器做出响应需要时间(比如网速慢等原因),所以我们需要监听服务器响应的状态,然后才能进行处理。onreadystatechange 是 Javascript 的事件的一种,其意义在于监听 XMLHttpRequest 的状态
简单get请求
状态在200说明请求成功
AJAX API解析
1.xhr.open() 发起请求,可以是get、post方式
2.xhr.timeout:
a) 设置超时 xhr.timeout
b) 监听超时事件 xhr.ontimeout = function () {// code}
当请求超时,此事件就会被触发
3.xhr.setRequestHeader() 设置请求头
4.xhr.send() 发送请求主体get方式使用xhr.send(null)
5.xhr.status表示响应码,如200
6.xhr.statusText表示响应信息,如OK
7.xhr.getAllResponseHeaders() 获取全部响应头信息
8.xhr.getResponseHeader('key') 获取指定头信息
9.xhr.responseText、xhr.responseXML都表示响应主体
10.xhr.onreadystatechange = function () {} 监听响应状态
readstate 属性有五个状态:
xhr.readyState = 0时,(未初始化)还没有调用send()方法xhr.readyState = 1时,(载入)已调用send()方法,正在发送请求xhr.readyState = 2时,(载入完成)send()方法执行完成,已经接收到全部响应内容xhr.readyState = 3时,(交互)正在解析响应内容xhr.readyState = 4时,(完成)响应内容解析完成,可以在客户端调用了注GET和POST请求方式的差异
1、GET没有请求主体,使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数(get请求如果有参数就需要在url后面拼接参数)
3、POST可以通过xhr.send('name=itcast&age=10')(post如果有参数,就在请求体中传递)
4、POST如果有参数需要设置请求头[ xhr.setRequestHeader("") ]
5、GET传递数据有大小限制一般约4K,POST则没有限制(可修改)
如何简单封装原生AJAX方法
AJAX方法
举报/反馈
原生ajax调用,JavaScript进阶之原生AJAX接口请求的方式相关推荐
- js ajax通用方法,目前5个流行的AJAX调用JavaScript库
在这篇文章中,我们将看一些用于进行AJAX调用的最好的JavaScript库,包括jQuery,Axios和Fetch. AJAX是由客户端框架和库用来对服务器进行异步HTTP调用的一组Web开发技术 ...
- wcf简单教程(10) ajax调用,wcf简单教程(10) ajax调用
wcf简单教程(10) ajax调用 [2021-02-11 16:23:59] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
- [Ajax]异步的 JavaScript 和 XML:Ajax入门教程(整理)
首先先来解释一下什么是 AJAX . 简单来说AJAX = 异步 JavaScript 和 XML, 是一种用于创建快速动态网页的技术. 它不是一种编程语言,而是一种规范. Ajax的主要功能是:通过 ...
- ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
- 【JavaScript进阶学习】ajax
ajax ajax是前后端交互的重要手段,ajax:异步的js和服务端的数据.前端用来异步获取服务端数据,无刷新加载新数据(不阻塞浏览器其他任务的情况下获取到新数据) ajax并不是一个技术,多种技术 ...
- ajax调用后台java方法,jquery ajax再次封装,前台调用后台java方法直接返回数据
一,前台js部分代码 /** * bean参数格式:类全限定名.方法名 opt参数格式:键值对 handleResponse:会function类型参数包含一个参数data,为后台返回json数据 ...
- ajax 调用java类_在ajax中调用java方法
AJAX是Asynchronous JavaScript And XML的首字母缩写.它提供了异步与服务器通信的能力. 要简单地解释一下,您可以向服务器发送请求并继续与用户进行用户交互.您无需等待服务 ...
- js 通过摄像头识别二维码,可以控制闪光灯。原生 HTML 调用摄像头,有 原生HTML + JS 版本 和 VUE3 + TS 版本与 uniapp 版本
开发背景 最开始公司说到这个需求的时候第一个想法是使用微信的 js SDK 接入微信的扫一扫.但是得知所做的这个功能模块是需要嵌入到之前开发的app中,所以就只有使用 js 原生的 API 来开发了. ...
- react ajax组件,javascript – 我可以将ajax放在React组件构造函数中吗?
class AjaxInConstructor extends React.Component{ constructor() { super(); this.state = {name: '',age ...
- ajax同时调用两个jsonp,使用JSONP进行跨域Ajax 调用
JSONP 是啥 JSONP 全称是JSON with Padding. 当需要进行跨域Ajax 调用的时候, 需要用到JSONP 协议. 客户端 $.ajax({ url: 'http://xxx' ...
最新文章
- python-mysql的安装和基本操作
- lor: 一个基于OpenResty的lua framework
- ABAP 直接上传图片的函数
- PostgreSQL failed IANA tz database BUG修复
- 7-5 列车厢调度 (25 分)
- 动态规划在求解传递闭包问题中的应用(JAVA)--Warshell算法
- Swift中文教程(十九) 类型嵌套
- [存档]使用.Net开发web程序时现在比较流行的前台技术都有什么?
- 由数据范围反推算法时间复杂度和需要用到的算法类型
- python按字节读文件-使用Python进行二进制文件读写(转)
- win7计算机搜索记录怎么删除文件,win7删除文件浏览记录,windows搜索记录删除
- 修改echarts 3D柱状图柱子大小(粗细)的方法
- app能不能跳转外部h5_uni-app微信小程序跳转外部H5链接
- mht转html保留图片,【JAVA】mht文件转html
- LTspice基础教程-033.绘制电容阻抗特性曲线
- 绑定变量窥视 oracle,不均衡分区和绑定变量窥视导致的查询计划错误
- cadence使用教程
- 3.6.3 获取分区的读取偏移量
- JAVA求班级男女生比例_java编程:给你一个班级的名单,随机分成6个组的问题解决办法...
- 操作系统独木桥问题解法
热门文章
- python卡方拟合优度检验_SPSS超详细教程:卡方拟合优度检验
- android仿qq编辑图片,仿QQ图片编辑器 – ImageEditor
- 【“elabsim”高频电子线路实验】得到输出峰峰值幅度为200mV、频率为10.7MHz正弦波信号
- eclipse黑色炫酷主题设置1
- html设置360浏览器兼容,360浏览器不兼容CSS的解决方法
- 电赛日志——2016年TI杯大学生电子设计竞赛 A题:降压型直流开关稳压电源
- 语音信号处理(赵力)作业答案第8章——语音合成
- 最优化理论——最速下降法
- ubuntu的使用--系统目录篇(文末附Desktop目录位置)
- OO第三单元(地铁,JML)单元总结