跟着老杜学Ajax,轻松掌握ajax的底层实现原理

简介: 原生的ajax虽然在实际开发中很少编写,但如果想将js高级框架底层学明白,那ajax的原理是必须要求精通的。 本套ajax视频对ajax底层实现原理讲解非常透彻,对ajax发送异步请求的每一步都进行了透彻的分析,让你彻底搞懂搞透ajax。

原生的ajax虽然在实际开发中很少编写,但如果想将js高级框架底层学明白,那ajax的原理是必须要求精通的。

本套ajax视频对ajax底层实现原理讲解非常透彻,对ajax发送异步请求的每一步都进行了透彻的分析,让你彻底搞懂搞透ajax。

课程主要涵盖的内容:

  • ajax底层实现原理剖析
  • ajax跨域
  • 手写jquery库
  • ajax省市联动
  • ajax实现搜索联想
  • ajax改造oa项目等

课程在理论层面非常深入,使用大量实战案例来进行驱动,能够让大家在欢快愉悦的环境当中,掌握技术底层的实现原理。

https://www.bilibili.com/video/BV1cR4y1P7B1

Ajax的目的

首先现在的应用当中的功能都是页面的局部刷新,Ajax可以帮助实现页面的局部刷新。

如何理解局部刷新和全部刷新?

1、页面全部刷新

比如说在百度的网站上,搜了一个信息,展示出下面一些很多信息,其中有一个东西叫超链接。我一点超链接跳转到下一个页面,这就不是页面局部刷新,这叫页面全部刷新。

简单点说就是在百度的一个页面上我点了一个超链接,点完之后跳到另外一个窗口里,在另外一个窗口当中去浏览信息,这叫页面的全部刷新。

2、页面的局部刷新

比如:百度搜索框里面当搜索一个东西的时候,下面在不停地刷新。

从软件实现角度来说,我们输进去东西,那么这个东西肯定要发送到服务器上,服务器会根据关键字进行检索,下边展现出的关联词,它是实时的从底层从服务器端获取回来,展现到前端页面上的。

当这个关键词发生了改变之后你它又会把这个改变了的关键词也发送给服务器,服务器根据新的关键词再去检索到一些信息再返回来,于是这一块的信息是就变化了,这就是页面的局部刷新,Ajax就是做这件事情。

学习Ajax的作用

它可以让页面局部刷新,这样做有什么好处呢?

主要是可以提高用户的体验。

举个例子:

现在这是一个浏览器,这边是爱奇艺正在播放视频,假如说已经缓冲完了播放到一半了,右边有一个登录的一个表单,我们通过用户名密码点登录,那么这个登录的请求它是一个页面全部刷新,这样操作会有什么问题?

一旦我们点击登录那整个页面全部重新加载,我们的爱奇艺视频就要从零开始重新缓冲,也就是说如果页面全部刷新的话,这个视频一定是从零开始播放,用户的体验中断了。

但是现在的大部分请求是什么?

是右边有一个登录的表单,用户名密码写上点登录,然后只刷新登录表单这一块,登录成功之后显示您是金牌会员,您是银牌会员,对整个网页来说变化的信息只有这一块,别的地方的东西都是不会刷新的,这叫页面的局部刷新,这是为了提高用户体验,不让用户的体验间断,因为页面全部刷新的话,如果网速不行,加载全页面也加载不出来,用户的体验是有空白期的。

Ajax就是做这件事情的一种技术,提高用户的操作体验。

本套教程的课程亮点

这个视频里边最大的两个亮点:

  • 手写jQuery

在前端库里边有一个库叫jQuery,jQuery这个课程,其实是封装的一个js文件,封装好。

市面上大部分的培训机构讲法是什么?

主要是讲库怎么去用,把库引进来,然后告诉学员这里面由哪个方法去讲,但是我们这套课程是基于Ajax,手动封装一个jQuery的库出来。

  • 超详细的跨域的解决方案

视频中有Ajax跨域这部分内容,在我们整个软件界来说,跨域是很有名的一个单词,但市面上还没有像本套视频一样将跨域讲的这么详细的,能讲这么底层的。

大部分跨域讲法是:怎么解决跨域,我告诉你解决方案就行了,但是杜老师讲的视频不仅要告诉你怎么去解决跨域的问题,而且告诉真正解决跨域问题的关键点在什么地方,最底层的东西在哪儿,怎么解决的。

案例

1、省市联动

例如:省市区,当你选河北省的时候,右边那个框就会显示河北省的市区,当你选择河北省下的某一个市区,比如石家庄市,那么右边第三个框就会动态联动出来,动态的刷新出来,石家庄市下边的区。这叫省市联动效果,这是一个非常经典的案例。

省市联动操作视频

2、搜索联想和自动补全

什么叫自动补全?但我们搜索一个内容时(比如用百度搜索Java)它不仅能联想出来,而且当你点完之后,它可以自动给你补全上面的信息,叫搜索联想加自动补全,这是用Ajax做的。

总体来说,这套课程讲的够深入,不仅讲表面怎么用,我们还讲底层的原理,讲的特别深入。

课程直击原理,即使你是零基础小白,但也不会因为本套课程讲得很深入而学不明白。

学完之后让你不但会使用Ajax,而且直击底层的实验原理,用时不多,收获却很多哦~


相关文章
|
7月前
|
XML 前端开发 JavaScript
ajax原理是什么?如何实现?
ajax原理是什么?如何实现?
102 0
|
前端开发 安全 数据格式
js-ajax的工作原理
前后端交互,首先需要创建一个XMLHttpRequest对象,通过这个对象的open方法与服务器建立连接,通过send方法将请求发送给服务器,最后通过事件监听,将后端请求的数据通过回调函数返回给前端。
|
XML 前端开发 JavaScript
Ajax运行原理
Ajax运行原理
107 0
|
3月前
|
XML 前端开发 JavaScript
ajax运行原理
AJAX(Asynchronous JavaScript and XML)是一种使网页能够在不重新加载整个页面的情况下与服务器异步通信的技术。尽管名字中有“XML”,但它支持多种数据格式,如JSON、HTML和纯文本。用户行为触发AJAX请求后,通过创建`XMLHttpRequest`对象或使用现代浏览器中的`fetch` API来配置并发送HTTP请求。请求完成后,可以通过回调函数处理服务器返回的数据,更新网页内容。现代JavaScript推荐使用更简洁强大的`fetch` API来实现AJAX功能,广泛应用于动态网页和单页应用中,提升用户体验。
|
7月前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
105 1
Python爬虫之Ajax数据爬取基本原理#6
|
前端开发
Ajax原理--详解
Ajax原理--详解
|
7月前
|
前端开发 JavaScript 搜索推荐
Ajax原理以及优缺点
Ajax原理以及优缺点
|
前端开发 PHP 数据安全/隐私保护
【PHP学习】—利用ajax原理实现密码修改功能(九)
【PHP学习】—利用ajax原理实现密码修改功能(九)
|
前端开发 JavaScript PHP
【PHP学习】—利用ajax原理实现登录功能(八)
【PHP学习】—利用ajax原理实现登录功能(八)
|
XML 前端开发 JavaScript
ajax是什么?原理以及优缺点
ajax是什么?原理以及优缺点
137 0