ajax
XML 指可扩展标记语言(eXtensible Markup Language)。
XML 被设计用来传输和存储数据,不用于表现和展示数据,HTML 则用来表现数据。
是前后台交互的能力也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 是⼀个默认异步执行机制的功能,AJAX分为同步(async = false)和异步(async = true)
- 什么是同步请求?(false) 定义:发送一个请求后,必须等待该请求的响应返回,才能继续发送下一个请求。同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同。客户端向服务器端发送请求,必须等待结果返回,才能向服务器端发送下一次请求。 优点: 简单直观 结果即时可见 缺点: 在网络延迟或处理时间长时效率低下 占用较多系统资源 也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态 - 什么是异步请求?(默认:true) 定义:发送请求后,无需等待响应即可继续执行其他任务。响应通过回调函数、事件监听等方式处理。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。 客户端向服务器端发送请求,必须等待结果返回,才能向服务器端发送下一次请求。 说明:异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始。 优点: 支持高效并发处理 提高资源利用率 提升用户体验,减少等待时间 缺点: 实现相对复杂 错误处理较为困难 增加开发和维护成本 默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事, Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。 一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。 - 选择策略 在决定使用同步还是异步交互时,应考虑以下因素: 性能需求:如果系统需要处理大量并发请求,异步交互是更好的选择。 用户体验:为了提升应用的响应速度和流畅度,减少用户等待时间,异步交互是优选。 开发成本:如果项目时间紧迫或开发资源有限,同步交互可能更合适,因为它实现简单。 业务逻辑:根据具体业务场景和需求,灵活选择最适合的交互方式。
1. AJAX 的优势
不需要插件的支持,原生 js 就可以使用
用户体验好(不需要刷新页面就可以更新数据)
减轻服务端和带宽的负担
缺点:搜索引擎的支持度不够,因为数据都不在页面上,搜索引擎搜索不到
2. AJAX 的操作流程
具体操作流程:
首先通过PHP页面将数据库中的数据取出
取出后转成json格式的字符串,后利用ajax把字符串返还给前台
再利用json.parse解析通过循环添加到页面上
那么反之,前端的数据可以利用ajax提交到后台
但是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上
最后再由PHP将数据插入到数据库中
3. AJAX 的使用
在 js 中有内置的构造函数来创建 ajax 对象
创建 ajax 对象以后,我们就使⽤ ajax 对象的方法去发送请求和接受响应
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
事件,对象,属性,方法 事件event对象是指在浏览器中触发事件时,浏览器会自动创建一个event对象,其中存储了本次事件相关的信息,包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后,会自动将该对象作为参数传递给绑定的事件处理函数,我们可以在事件处理函数中通过访问event对象的属性和方法,来获取事件的相关信息,并做出后续的逻辑处理。 事件可以由用户操作触发,例如:鼠标事件、键盘事件等等;也可以通过 JS 脚本代码来触发,例如:通过element.click()方法,触发对应元素的点击事件;还可以由API生成,例如:动画完成后触发对应事件、视频播放被暂停时触发对应事件;最后还可以通过自定义事件来进行触发。这四种方式都会创建并传递event对象。 除了我们自己绑定的事件处理函数之外,浏览器会对某些元素的某些事件存在默认处理,例如: a 标签的click点击事件,默认处理为跳转到链接的地址。当然我们也可以通过event对象的preventDefault() 方法来阻止浏览器的默认处理。 我们还需要注意元素的嵌套关系,因为由于元素结构上的重叠,事件会随着嵌套关系依次传递,也就是事件冒泡和事件捕获。 Event对象示例和常用属性见可参考文章:JS 之 事件Event对象详解(属性、方法、自定义事件)_js event-CSDN博客 三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左、右键均可)时,会发生 mousedown 事件。 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。 mouseup 当在元素上松开鼠标按键(左、右键均可)时,会发生 mouseup 事件。 与 click 事件不同,mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。 click 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click 事件。 注意:触发click事件的条件是按下并松开鼠标左键!,按下并松开鼠标右键并不会触发click事件。 三个事件的触发顺序 若在同一个元素上按下并松开鼠标左键,会依次触发mousedown、mouseup、click,前一个事件执行完毕才会执行下一个事件 若在同一个元素上按下并松开鼠标右键,会依次触发mousedown、mouseup,前一个事件执行完毕才会执行下一个事件,不会触发click事件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步