Ajax,赋予前端新活力

作者: 亨利何 | 来源:发表于2017-12-03 15:55 被阅读33次

何宏伟

Asynchronous & Synchronization

[嵌牛导读]

当你编写代码遇到同步 | 异步时, 差不多这个时候Google就该给你你想要的一推名词解释,和排名靠前的Ajax - [ Asynchronous Javascript And XML ]。只要你耐心的看下去,虽然无法教会你在实际应用中灵活区分同步操作 | 异步操作,但我一定会让你明白什么是同步操作,什么是异步操作

[嵌牛鼻子]

同步,异步,回调(callback),Ajax,过程

[嵌牛提问]

Parallel
  • 当你意识到你要解决的问题顺着过程化的思维方式行不通的时候,有没有去思考同步和异步的问题?
  • 当你使用Ajax的时候到底发生了什么?为什么Ajax提高了执行效率?

[嵌牛正文]

有如下示例:


就餐时间到了
  • 就餐时间

为了不饿肚子,及时的吃到妈妈做的午饭。当妈妈在做午饭的时候,你是如何确定你该吃午饭的时间?

  • 搜索引擎

打开google,有没有发现当你点击输入检索内容时,每一个字都会有相应的检索提示,在输入框下方弹出,很大的概率弹出的提示中前几个就是你想要找的.

0x01. 同步和异步

我们尝试着这样来就餐:

  • 方式一

你站在厨房看着妈妈做饭,一刻也不松懈的等候在妈妈身边,等到饭菜熟了就开始吃饭。

  • 方式二

你跑到厨房告诉妈妈,“妈妈,等你做好了饭菜记得叫我吃饭哦!”,你在房间看着电视,玩着游戏,不一会儿听到妈妈喊你吃饭,你才起身去填满早已饥肠辘辘的躯体。

相信你已经看懂了两种方式的不同之处。方式一你可以吃到可口的饭菜,但缺点是你什么也不能干,必须守在妈妈的身边,方法二则大不相同,安心的坐在房间做自己的事,你只需要等到妈妈叫你,然后去吃饭,两种方式,不同的享受。

同步,就是在系统的执行过程中一些过程需要在时间上呈现一致性,执行操作有时间单向性(操作按步骤执行不可跳转,逆转)或者接续性(当前续步骤完成才能执行当前步骤)
异步,就是系统执行过程中操作的单向性可控制,接续性操作“可并行”,“可并行”依赖于可控制单向性操作(回调)。

这样,就不难看出方式一属于同步操作,方式二属于异步操作,你也可以分析出搜索引擎对于你的搜索内容进行实时分析,实时回应但丝毫不影响操作体验,那么这种实时操作是如何做到的,继续往下看。

0x02. Ajax做了什么

Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,作为异步操作,Ajax堪称典型代表。

Ajax通过Javascript向服务器发送HTTP请求,在等待服务器回应的同时可以继续执行其他操作不阻塞交互逻辑。Ajax能够使得从服务端获取数据后不需要刷新整个页面,可以做到只动想动的节省了网络请求的带宽占用,处理时间的高效保证了执行率的高效,减轻了服务端的压力

搜索引擎正是使用Ajax,来实时的将用户的搜索内容提交到服务器,却丝毫不卡顿,提升用户体验的同时提升了整个系统的容灾能力。


END

相关文章

  • Ajax,赋予前端新活力

    何宏伟 [嵌牛导读] 当你编写代码遇到同步 | 异步时, 差不多这个时候Google就该给你你想要的一推名词解释,...

  • ajax跨域jsonp,后台使用java

    前端ajax代码: //进行ajax请求 $.ajax({ url:'http:/uploadPage/get...

  • Ajax Axios

    关于Ajax兼容性问题 前端原生Ajax(get方式),后端使用node.js 前后端代码: 前端原生Ajax(p...

  • Django 八

    目录 1.ajax概念 2.ajax计算器 后端 前端 3.ajax发送其他请求 3.1.登录功能前端 3.2 登...

  • Springboot中配置CORS解决前后端分离跨域问题

    Spring Boot: 前端Ajax:

  • thinkphp处理前端跨域请求

    1、前端js正常ajax请求 后端php返回 2、前端js用ajax跨域请求 thinkphp返回 ajaxRet...

  • 2020-06-24

    [toc] Ajax Ajax视图的控制权在前端手上,前端入参data,回调后端返回的数据Ajax四个点,请求ur...

  • 初识ajax

    一、ajax介绍 ajax(Asynchronous Javascript And XML), 在前端的开发中主要...

  • Jquery ajax请求中datatype的含义

    一切从一个普通的前端ajax请求jspringMVC后端的例子开始, 前端jquery ajax 请求: 后端 s...

  • Spring MVC Ajax Json交互配置

    Ajax Json交互分为两个方向: 前端到后台:前端ajax发送json格式字符串,后台直接接收为pojo参数,...

网友评论

    本文标题:Ajax,赋予前端新活力

    本文链接:https://www.haomeiwen.com/subject/vtwzmxtx.html