什么是ajax,为什么使用ajax!

前言:

要学习一门新的、技术之前,首先我们要了解一下他是什么,为什么使用,有什么好处,该怎么理解。现在就从下文开始了解吧

什么是ajax:

Ajax即"Asynchronous Javascript And XML"(异步JavaScript 和XML),是指一种创建交互式网页应用的的网页开发技术。是一种用于提高浏览器和服务器交互效率的快速创建动态网页技术。能够替换传统传统的web交互模式。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。

为什么使用ajax

应用程序的大多数处理在用户的浏览器中发生,而且对服务器的数据请求往往很短。所以可以使用Ajax建立功能丰富的应用程序,这些应用程序依赖基于web的数据,但是其性能远远超过老式的,因为老式方法要求服务器传回整个HTML页面来响应用户操作

无刷新:不刷新整个页面,只刷新局部

无刷新的好处:

1、只更新部分页面,有效利用带宽

2、提供连续的用户体验

3、提供类似c/s的交互效果,操作更方便

如何理解这个同步异步?

传统同步交互模式是怎样的?

在传统模型中,使用的是同步交互模式,客户端浏览器向服务器提出请求,然后在服务器响应这个请求之前,一直处于等待的状态,并且不能进行别的操作。

主流技术异步交互模式是怎样的?

在Ajax异步交互模式中,在客户端浏览器和服务器当中,多了一个传递对象Ajax引擎,当客户端浏览器是向Ajax引擎提交请求,然后由Ajax引擎负责和服务器进行请求信息转交,这样就能实现在客户端浏览器发送请求后,能够继续操作,而不是处于等待状态。当服务器处理完Ajax引擎请求后,将响应传递给Ajax引擎,Ajax引擎会更新客户端浏览器页面。

下面是ajax请求的简单示例

AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术。它允许在不重新加载整个页面的情况下,通过异步方式与服务器进行通信,从而实现动态更新页面内容的效果。

以下是一个基本的AJAX请求的示例代码:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 当请求完成且响应状态码为200时,执行以下代码
    console.log(this.responseText); // 打印响应内容
  }
};
xhttp.open("GET", "example.com/api/data", true); // 设置请求方法、URL和是否异步
xhttp.send(); // 发送请求

上述代码中,我们创建了一个XMLHttpRequest对象,通过设置其onreadystatechange属性来监听请求状态的变化。当请求状态变为4(即请求完成)且响应状态码为200时,我们可以通过responseText属性获取到服务器返回的响应内容。

需要注意的是,AJAX请求需要满足两个前提条件才能成功获取到响应:一是HTTP请求的状态码为200~299,表示请求成功;二是AJAX对象自身的状态码也需要正确,用来表示请求的各个阶段。12

相关推荐
觉醒法师5 分钟前
HarmonyOS开发 - 电商App实例二( 网络请求http)
前端·http·华为·typescript·harmonyos·ark-ts
沈剑心5 分钟前
Kotlin的协程,真能提升编程效率么?
android·前端·kotlin
堕落年代16 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
OpenTiny社区26 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽27 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿31 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
剪刀石头布啊38 分钟前
css属性值计算过程
前端·css
bin915343 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14基础固定表头示例
前端·javascript·vue.js·ecmascript·deepseek
小华同学ai1 小时前
吊打中文合成!这款开源语音神器效果炸裂,逼真到离谱!
前端·后端·github
颜酱1 小时前
后台系统从零搭建(三)—— 具体页面之部门管理(抽离通用的增删改查逻辑)
前端·javascript·react.js