Ajax是什么?Ajax高级用法之Axios技术


Posted in Javascript onApril 21, 2021

AJAX

Ajax是什么?Ajax高级用法之Axios技术
ajax 即 “Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式,多个请求,只能顺序执行,只能等待执行。有了ajax异步技术,可以无需等待上一个请求执行完成,就可以直接发起请求。服务端返回后,ajax通过回调技术通知客户端程序,把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页进行局部更新,提升网页的效率,用户无需等待页面的刷新,嗖的一下内容就变化了。改变原有整个页面刷新,造成页面晃眼的现象。所以这项技术一出现,就得到业界的推崇。

关键字:异步、回调、局部刷新。

异步请求局部刷新

主流方式:
Ajax是什么?Ajax高级用法之Axios技术
技术栈

  • HTML 页面展示
  • JavaScript 形成交互
  • jQuery 封装JavaScript,代码更加简洁高效
  • json 数据传输
  • ajax 异步请求
  • Web中间件(tomcat) 处理请求和响应
  • mysql数据库 存取数据

用户页面中触发ajax请求,访问后端服务器,Web 中间件 拦截用户请求,转发后端程序进行数据处理,一般还需访问数据库,然后逐层返回。数据库返回数据处理服务,数据处理服务返回Web中间件,Web中间件返回ajax调用,将数据封装到返回的js对象中,目前主流返回数据为json字符串(可以通过Jsonp格式实现跨域访问)。在回调callback的方法中解析json中的数据,最终回显到页面上。通常我们使用jquery封装过的ajax,写法更加简洁灵活。

Ajax 参数详解

$.ajax({				//交互方式 $.get,$.post,$.getJSON
	async:				//请求同步异步,默认true异步
	type:				//请求类型:GET/POST				
	url:				//请求的网站地址
	data:				//提交的数据,参数
	contentType:		//请求的MIME媒体类型:application/x-www-form-urlencoded(默认)、application/json;charset=UTF-8
	dataType:			//服务器返回MIME类型:xml/html/script/json/jsonp
	success: function(data){	//请求成功,回调函数,data封装网站返回的数据
		console.log( data );
	},
	error: function(e){		//请求失败回调函数,e封装错误信息
		console.log(e.status);			//状态码
		console.log(e.responseText);	//错误信息
	}
})

js、json、jsonp区别

json和jsonp的区别

json请求返回就是json格式,而jsonp请求返回是fun(json)格式。

  • 京东的价格是单独发起ajax请求,返回json数组,一次可以查询多个价格

查询网址:http://p.3.cn/prices/mgets?skuIds=J_1411013,J_1411014

[{"p":"-1.00","op":"3888.00","cbf":"0","id":"J_1411013","m":"6699.00"},
{"p":"-1.00","op":"799.00","cbf":"0","id":"J_1411014","m":"1398.00"}]
  • 京东的商品描述是单独发起ajax请求,返回jsonp格式数据,回显到页面

查询网址:https://d.3.cn/desc/1411000

通过JSONView插件展示数据:
Ajax是什么?Ajax高级用法之Axios技术
网站有一个跨域问题,非同一个网站的请求默认是禁止的**(同源策略)**,那我们的页面要访问其他网站啊,例如:我们访问京东获取其商品的价格信息。这时就必须用jsonp方式进行跨域请求。

同源策略

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

json和js对象的区别

json字符串: 	{ "id":"100","name":"tony","salary":"30000" }
js对象:		{ "id":100,"name":"tony","salary":30000 }

可以看出js对象中value值如果是整数,小数,无需加双引号

  • 含义不同,json是一种数据格式,js对象表示类的实例
  • 传输:json用于跨平台、跨网络传输,速度快;js不能传输
  • 展现:json是字符串不能是对象方法函数;js值不一定加双引号,值可以是对象、函数、字符串等
  • 转换:JSON已经作为浏览器内置对象,eval(json)、JSON.parse(jsonStr) 、JSON.stringify(obj)

Ajax高级用法(axios)

Vue中封装了ajax并增强了它,在异步并发处理优于原生ajax。称为:axios(ajax input output system)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		//引入js支持,axios.min.js文件
		<script src="../js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			商品价格:{{info}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data(){		//data的ES6函数写法
				return {
					info : null
				}
			},
			mounted(){
				axios.get('../data/price.json')
				.then( 
					//箭头函数,res为返回值,res.data 返回的json数据对象
					res => (
						this.info = res.data.price
					)	
				)
				.catch(function (e){
					console.log(e)
				})
			}
		})
	</script>
</html>

注意:
axios请求头的 Content-Type 默认是 application/json,而postman默认的是 application/x-www-form-urlencoded。

ajax一般采用@RequestParam接收参数:

@ResponseBody
public Result testpost(@RequestParam String username) {}

axiso采用@RequestBody的json方式接收参数

@ResponseBody
public Result testget(@RequestBody Map map) {}

为什么要用Axios

传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。

JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。经过多年的更新维护,真的已经是非常的方便了,优点无需多言;如果是硬要举出几个缺点,那可能只有:

  • 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
  • 基于原生的XHR开发,XHR本身的架构不清晰。
  • JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
  • 不符合关注分离(Separation of Concerns)的原则
  • 配置和调用方式非常混乱,而且基于事件的异步模型不友好。

Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,想必让axios进入了很多人的目光中。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 支持 Promise API
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口(重要,方便了很多的操作)
  • 从 node.js 创建 http 请求
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据

防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key,根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。

总得来说:axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。

Javascript 相关文章推荐
用js实现小球的自由移动代码
Apr 22 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 #Javascript
canvas多重阴影发光效果实现
JavaScript+HTML实现学生信息管理系统
浅谈vue2的$refs在vue3组合式API中的替代方法
JS实现简单控制视频播放倍速的实例代码
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 #Javascript
You might like
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php代码书写习惯优化小结
2013/06/20 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python3 配置logging日志类的操作
2020/04/08 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
JSF界面控制层技术
2013/06/17 面试题
社会调查研究计划书
2014/05/01 职场文书
教师节演讲稿
2014/05/06 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
2014年林业工作总结
2014/12/05 职场文书