什么是Ajax?

简介: 什么是Ajax?

前言:这篇文章只会带你大概熟悉这几个名词之间的关系和基础用法。如果你是一个初学者,正要开始学习这个关键词,或者你打算先了解这几个关键词的概念,那么这篇文章可能会帮到你,但是如果你打算深入研究一下这几个关键词的原理来提升自己,很遗憾的告知你这篇文章可能不适合你现在的水平了。

我一向不喜欢用很专业的名词来描述这些方法的功能,我更喜欢用费曼学习法的方式来解释这些概念,这些话语虽然不专业,可能让你产生误解,但是可以让你快速大致了解这东西是用来干什么的,等后面你的能力提升上去以后,自然而然的就明白它深层次的原理。

------作为一个淋过雨的人,想为同样在雨天行走的人撑一把伞,是我博客的观念,希望能帮助到那些行走在前端道路上的初学者。

首先我们需要知道Ajax是什么?它不是具体的方法,(千万不能以为是Ajax(){})更多的像是一种理念和思想。

A:Asynchronous  异步

ja:javaScript  js

x:XML Extensible(可拓展) Markup Language

比如你在看一本书的网页,你想翻到下一页,我们之前学到的知识,你会写一个a标签来提醒用户翻页,但是这样做会浪费大量资源去刷新一些不必要的页面,比如顶部导航栏和页脚,然而我们点击这个链接的时候,整个页面都会刷新一段时间,即使现在浏览器的处理速度很快,你的网速也足够快,但是因为用户关注的本身是网页中间部分的文章内容,我刷新一次就意味着我得回到网页的最顶部,用户体验非常不好。

那我们能不能直接去修改文章内容,而不去刷新页面呢?这就是Ajax的核心理念。

image.png

比如我想点击知乎某条评论,我不至于为了去点击这个东西然后刷新我整个页面吧?

(这里也可以用css布局的方式来完成,但是我们的主题是Ajax)

image.png

那么我的想法就是,用户点击这个按钮的时候,我在页面增加一个div 然后div的内容是评论信息。div好说,dom的许多方法都可以完成,那么重点就在于我如何获取这些评论的内容呢?

这里我们就要用到XMLHttpRequset对象,这个对象充当着浏览器客户端和服务器的中间人,middleware,以往我们请求方式比如a标签之类的,其实都是浏览器在帮助我们发送请求,但是有个xmlHttpRequset这个对象以后,我们就可以使用js在编写代码的时候就可以自己发送请求并且自己直接处理数据。

1.XMLHttpRequest也是一个对象,对象里有很多方法,其中最有用的是open这个方法 const xhr = new XMLHttpRequest();//构造函数,将XMLHttpRequest对象创造一个xhr实例

(这里好像const xhr = XMLHttpREquest() ,应该也可以,不确定,待定);

2.xhr的open方法 有两三个参数,

第一个参数是你打算用什么方法请求服务器来获取数据,好比你去买东西,你可以用微信,现金,支付宝多种方式来购买, 其中包括“GET”,“POST”,"SEND",根据使用场景的不同,切换使用。

第二个参数是位于这个服务器端口上的server这个文件内容,

第三个参数是一个boolean值,有true和false 来选择是否以异步的方式发送请求.

3.onreadystatechange是xhr里的一个方法 字面意思为,当 状态 准备 发生 变化 的时候要怎么做,准确的来说,是在你open方法调用后,服务器马上要给你送回数据的时候,你可以预先对即将返回的数据dosomesing。

这时候xhr对象里有一个属性名为readyState(注意State的S是大写):0,1,2,3,4会被赋值,这四个状态是依次改变的,0 到1,1到2,2到3,3到4。 一共四次状态变化,3和4 并不是二选一

0 表示还没开始.为这个属性的初始值

1 表示open方法开始被调用结束

2 表示send()方法已经运行结束

3 表示服务器 一部分 数据送回来了        //这一步的时候其实就可以操作数据了,但是不合理

4表示全部数据已经返回

image.png

作为初次了解,到这里你就差不多理解Ajax是什么了。

相关文章
|
5月前
|
人工智能 自然语言处理 前端开发
Trae插件Builder模式深度测评:从编程助手到AI工程师的进化
Trae插件最新推出的Builder模式标志着AI辅助编程工具从简单的代码补全向“AI工程师”角色的转变。该模式允许开发者通过自然语言描述项目需求,自动生成完整的项目结构、代码文件和开发流程,支持VSCode、JetBrains IDE及在线Web版本。Builder模式的核心功能包括自然语言项目初始化、智能项目架构设计和多文件协调代码生成,显著提升了开发效率,降低了技术门槛。然而,它在处理复杂业务逻辑和高度定制化需求方面仍有局限。未来,Builder模式将集成云部署、测试套件生成和DevOps流水线等功能
1302 2
|
网络安全 开发工具 git
git 出现错误:kex_exchange_identification: read: Connection reset by peer fatal
git 出现错误:kex_exchange_identification: read: Connection reset by peer fatal
git 出现错误:kex_exchange_identification: read: Connection reset by peer fatal
|
存储 移动开发 HTML5
SessionStorage 和 LocalStorage 有什么区别?
SessionStorage 和 LocalStorage 有什么区别?
579 3
|
2月前
|
SQL 数据可视化 数据挖掘
云上 · 百炼 MCP 数据分析与可视化 Demo 实战
一套跑在阿里云百炼上的“生成 SQL → 执行 → 分析 → 出图”闭环方案,端到端无本地依赖,可发布为组件/网页对外服务。
214 8
|
网络架构
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
|
数据采集 存储 安全
如何确保Python Queue的线程和进程安全性:使用锁的技巧
本文探讨了在Python爬虫技术中使用锁来保障Queue(队列)的线程和进程安全性。通过分析`queue.Queue`及`multiprocessing.Queue`的基本线程与进程安全特性,文章指出在特定场景下使用锁的重要性。文中还提供了一个综合示例,该示例利用亿牛云爬虫代理服务、多线程技术和锁机制,实现了高效且安全的网页数据采集流程。示例涵盖了代理IP、User-Agent和Cookie的设置,以及如何使用BeautifulSoup解析HTML内容并将其保存为文档。通过这种方式,不仅提高了数据采集效率,还有效避免了并发环境下的数据竞争问题。
222 1
如何确保Python Queue的线程和进程安全性:使用锁的技巧
|
SQL 监控 数据库
grafana 配置自定义dashboard
grafana 配置自定义dashboard
1311 0
grafana 配置自定义dashboard