ajax 数据接收,前端数据获取之Ajax篇
Ajax,读作”阿贾克斯“,这个是每一个web开发者必掌握的一门技术,现在咱们打开一个网页,页面上数据多多少少都会有它的一些参与,来获取数据,但也并不是所有的数据都是通过它来取到的。
ajax
Ajax是Asynchronous JavaScript and XML的缩写,中文意思异步的Javascript和XML。
何为异步?
对比同步来说,javascript本身是占用一个线程执行的,如果要以同步的方式发起请求,那就是让这个线程阻塞,等待这个网络请求发出去,然后请求回来,javascript才能接着执行。你可以想象这个的过程,javascript的执行线程一直被占用着,网络请求回来之前,用户只要涉及到javascript脚本操作势必没有任何响应。
再解释异步方式,可以理解为javascript发起网络请求时只是立了一个flag,浏览器让其他线程去发了请求,javascript线程继续干自己的事情,等其他线程请求完成回来后,再给javascript立的flag打一个call,javascript线程接到通知继续执行。异步的这种方式能够及时放开javascript脚本执行线程,在页面上,用户多次点击发起请求或者脚本操作都不会受到影响,是比较理想的。宏观上只要记住异步javascript就是不影响当前页面动作的一段javascript代码,这段代码会立flag,并且有一一个回调函数会在将来某个时刻执行。
认识XML
XML,可扩展标记语,是一种语言格式。很多人熟悉JSON格式,你可以做用它和XML类比。XML也有自己的规范,和HTML很像,两个标签中间携带数据。为什么要用它来数据传输呢?我觉得可以理解为不同界域直接的解耦,它是跨平台,跨操作系统,跨语言的一种数据传输的统一标准实现。只不过现在的前端都习惯更方便直观的JSON格式作为数据传输,而告别XML了,现在很少见XML的返回格式了,AJAX应该改名为AJAJ比较合适。
AJAX实现原理
本质是浏览器底层与操作系统暴露出来的一个API,在浏览器中有一个XMLHttpRequest的构造函数,当我们用一些包如jQuery的ajax或者Axiso请求数据时,用的其实就是它的实例。
XMLHttpRequest是浏览器提供了事件通知机制引擎是所暴露出来的API,当发起请求立flag的时候,就是告诉底层,我订阅了这个消息,你要在请求回来的时候通知我,它会暴露出一些钩子给你,你便可以传相应的处理函数进去,等它触发事件,钩子函数得到执行,你传入的回调也得到执行。
AJAX的兼容性
它在一般我们常用的浏览器中是这样实现的。
new window.XMLHttpRequest();
但是有一部分IE中没有XMLHttpRequest,提供了另一个API做相同的事情。
new window.ActiveXObject(Microsoft.XMLHTTP);
AJAX的实现
AJAX的简单实现,只为了解原理去实现,不考虑细节了,大家可以翻jQuery的ajax去看完整源码。
执行结果
在上面请求了一个不存在的掘金文章,返回值404了。大家也可以打开掘金打开控制台调试看一下。
解释一下里面的关键点,当new XMLHttpRequest实例后。这个实例有5种状态,可以在它里面readyState 的属性获取到当前状态。
当实例化成功时,readyState为0,实例执行open方法,readyState为1,这两个均为同步操作内容,请求尚未发送。
当实例的send方法执行后,请求发送。readyState的变化均可以在onreadystatechange中捕获到。
发送的请求被接受后,xhr引擎触发onreadystatechange,readyState为2;发送的请求被处理,xhr引擎触发onreadystatechange,readyState为3;发送的请求处理完成返回,xhr引擎触发onreadystatechange,readyState为4。
可以清晰的看到onreadystatechange一共触发了3次,但是需要的数据内容只有在readyState为4时才会存在,所以我们只需要将readyState=4的内容返回处理即可,xhr的status代表可服务器返回的请求的转态码,当200时说明请求正常,其余情况均属于异常情况,上面代码即为404情况。
上面的代码在执行open方法的时候传入了true,这代表本次请求是异步的,下面看一下同步的情况。
这时候我们看到跟一步不一样的onreadystatechange只被触发了一次,而且readyState的值也只有3中,且console.log('异步测试');这段代码在整个请求完成后才被得到执行,可见同步已将js执行阻塞。
AJAX的内容,本期先介绍这么多,下一起介绍一下ES6后新的数据请求方式Fetch。
如上内容均为自己总结,难免会有错误或者认识偏差,如有问题,希望大家留言指正,以免误人。
举报/反馈
ajax 数据接收,前端数据获取之Ajax篇相关推荐
- ajax 请求_前端后分离Ajax跨域请求保证Session一致
JAVA码牛牛,程序员学习指南 前后端分离的项目,使用Ajax请求一般都出现跨域的问题. 跨域的时候所创建的session是不会被浏览器保存下来的.所以每次进行跨域请求时,服务器都认为不是同一个浏览器 ...
- c# 获取ajax数据,c# asp.net jQuery AJAX 从 MySQL 中获取数据
解释想做什么.这(第 1 版)工作正常...... Default.aspx(版本 1.) $(document).ready(function () { setInterval(function ( ...
- 如何用 Hook 实时处理和保存 Ajax 数据
做爬虫的时候我们经常会遇到这么一个问题: 网站的数据是通过 Ajax 加载的,但是 Ajax 的接口又是加密的,不费点功夫破解不出来.这时候如果我们想绕过破解抓取数据的话,比如就得用 Selenium ...
- 【Python爬虫学习笔记12】Ajax数据爬取简介
有时候在我们设计利用requests抓取网页数据的时候,会发现所获得的结果可能与浏览器显示给我们的不一样:比如说有的信息我们通过浏览器可以显示,但一旦用requests却得不到想要的结果.这种现象是因 ...
- 前端通信:ajax设计方案(十)--- 完善Promise A+规范,增加mock数据功能
同步更新博客: www.cnblogs.com/GerryOfZhon- 同步更新专栏: zhuanlan.zhihu.com/zhongqiang 同步更新github: github.com/Ge ...
- ajax后台如何把对象转为json_SM后台数据与前端(PC、M站、Android、IOS)的交互——页面渲染...
一.介绍 对于后台服务器开发者来说,更多的是处理客户端发过来的请求和业务逻辑,很少会有人考虑页面的渲染问题. 以前的大部分后台开发人员最多也就是在 jsp 页面或者其他视图渲染框架来渲染PC端的页面, ...
- ajax传图片以及后台接收,前端ajax上传文件,图片,后端nodejs接收文件;
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端 用普通的ajax没法实现文件上传,只能post, ...
- ajax里数组添加数据,小笔记(一):ajax传递数组及将ajax返回数据赋值
当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...
- 前端复习之Ajax,忘完了
1 * Day01: 2 * Ajax3 * Asynchronous JavaScript and XML4 * 直译中文 - JavaScript和XML的异步5 * (不严格的定义)客户端与服务 ...
最新文章
- JSP页面退出时清除会话Session
- python的property用法_Python 中@property的用法
- wxWidgets:wxRibbonButtonBar类用法
- EFLS开源 | 阿里妈妈联邦学习解决方案详解
- 3. Recursive AutoEncoder(递归自动编码器)
- WDM驱动程序入门(1)-Hello WDM
- ajax post 与get方法 data写法
- linux搭建django项目基本步骤
- 《C++ Primer Plus(第六版)》(30)(第十四章 C++中的代码重用 编程题答案)
- linux下各目录的作用
- 高精度事件计时器怎么关闭_Node.js 事件循环
- php数组排序语言,php数组排序函数有哪些
- mysql 字段_【MySql】mysql 字段个数的限制
- SpringBoot+Redis+Lua防止(黑客)IP重复防刷攻击
- IT项目管理追踪表格
- 工作中,掌握这四个说话技巧,再也不用担心自己不会说话
- 海上升明月、天涯共此时!
- 【java小游戏】老虎杠子鸡游戏
- 亲测10月最新影视流量主小程序源码+卡密系统
- 介绍一个超级的计算器--J语言(1)
热门文章
- 互联网早报:小米内测潮玩社区“磕物” 需邀请码才能注册登录
- Android APP分享功能实现 .
- K-means方法总结(附代码)
- Web of Science 数据库导出记录中各个字段的含义
- 计算机毕业设计java+ssm酒店管理系统(源码+系统+mysql数据库+Lw文档)
- 自然语言处理(NLP)-统计句法分析(CKY算法用于PCFG下的句法分析)
- LDA与PCA数据降维算法理论与实现(基于python)
- Tensorflow 从bin文件中读取数据并
- 基于支持向量机的谐波分析研究与实现
- (初学)JDBC实现增删改查 一(Statement接口)