Ajax使用异步对象发送请求简介


文章目录

    • 一、什么是Ajax
    • 二、全局刷新和局部刷新
    • 二、Ajax中使用XMLHttpRequest对象(Ajax核心步骤)
      • 1、创建异步对象
      • 2、给异步对象绑定事件
      • 3、异步对象的属性 readyState 表示异步对象请求的状态变化
      • 4、初始异步请求对象
      • 5、使用异步对象发送请求
      • 6、json使用

一、什么是Ajax

Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。它不是一种新的编程语言,而是由多种技术组合而成的,包括HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT,以及最重要的XMLHttpRequest。

Ajax的原理是通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。

使用Ajax技术的网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,从而节省网络带宽,提高网页加载速度,缩短用户等待时间,改善用户体验。

Ajax通过异步通信的方式,实现了在不刷新整个页面的情况下,对页面的局部进行更新,极大地提升了Web应用的交互性和性能。

二、全局刷新和局部刷新

  • 全局刷新:整个浏览器被新的数据覆盖。在网络中传输大量的数据,浏览器需要加载,渲染页面。
  • 局部刷新:在浏览器器的内部,发起请求,获取数据,改变页面中的部分内容,其余的页面无需加载和渲染。

网络中数据传输量越少,给用户的感受越好。

Ajax是用来做局部刷新的:局部刷新使用的核心对象:异步对象(XMLHttpRequest)。这个异步对象是存在浏览器内存中的,使用JavaScript语法创建和使用XMLHttpRequest对象。

  • Ajax包含的技术主要有:JavaScript、dom、css、xml等。
  • 核心是:JavaScript 和 xml【被json代替】。
  • JavaScript:负责创建异步对象,发送请求,更新页面的dom对象。
  • Ajax是一种做局部刷新的新方法(2003),不是一种语言;

XML:网络中的传输的数据格式,使用json替换了XML。

<数据><数据1>宝马1</数据1><数据2>宝马2</数据2><数据3>宝马3</数据3><数据4>宝马4</数据4>
</数据>

二、Ajax中使用XMLHttpRequest对象(Ajax核心步骤)

1、创建异步对象

var xmlHttp = new XMLHttpRequest();

2、给异步对象绑定事件

onreadystatechange :当异步对象发起请求,获取了数据都会触发这个事件。这个事件需要指定一个函数, 在函数中处理状态的变化。

btn.onclick = fun1()function fun1(){alert("按钮单击")}

例如:

xmlHttp.onreadystatechange= function(){处理请求的状态变化。if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){// 可以处理服务器端的数据,更新当前页面var data = xmlHttp.responseText;document.getElementById("name").value = data;}}

3、异步对象的属性 readyState 表示异步对象请求的状态变化

  • 0:创建异步对象时, new XMLHttpRequest();
  • 1:初始异步请求对象,xmlHttp.open(请求方式,请求地址,true);
  • 2:发送请求,xmlHttp.send();
  • 3:从服务器端获取了数据,此时3是异步对象内部使用,获取了原始的数据。
  • 4:异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。

在4的时候,开发人员做什么?更新当前页面!

异步对象的status属性:表示网络请求的状况的:200,404,500,需要是当status==200时,表示网络请求是成功的。

4、初始异步请求对象

异步的方法open()

xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求(默认是true,异步请求));// 例如
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

5、使用异步对象发送请求

xmlHttp.send();

获取服务器端返回的数据,使用异步对象的属性responseText

使用例子:xmlHttp.responseText

回调:当请求的状态变化时,异步对象会自动调用onreadystatechange 事件对应的函数。

访问地址:使用get方式传递参数

http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

6、json使用

1、Ajax发起请求后会返回的一个json格式的字符串

{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"}

2、json分类:

  • json对象格式:JSONObject,这种对象的格式名称: 值,也可以看做是key: value格式。
  • json数组格式:JSONArray,
// 基本格式:  
[{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"},{ name: "山西", jiancheng: "晋", "shenghui": "太原"} 
]

3、为什么要使用json

  • json格式好理解
  • json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
  • json格式数据他占用的空间下,在网络中传输快,用户的体验好。
  • 处理json的工具库:Gson(google)、Fastjson(阿里)、jackson、 json-lib。
  • 在js中的,可以把json格式的字符串,转为json对象, json中的key,就是json对象的属性名。

当然,下面是一个简单的Ajax示例,演示了如何使用JavaScript和XMLHttpRequest对象来执行异步HTTP请求,并更新网页内容。请注意,为了简化示例,我们假设服务器上存在一个名为example.txt的文件,它包含一些简单的文本内容。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>Ajax 示例</title>  <script>  function loadContent() {  // 创建一个新的XMLHttpRequest对象  var xhr = new XMLHttpRequest();  // 定义请求完成时的回调函数  xhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {  // 请求成功完成,服务器返回状态码200  // 更新页面内容  document.getElementById('content').innerHTML = xhr.responseText;  }  };  // 设置请求方法和URL  xhr.open('GET', 'example.txt', true);  // 发送请求  xhr.send();  }  </script>  
</head>  
<body>  <h1>Ajax 示例</h1>  <button onclick="loadContent()">加载内容</button>  <div id="content"></div>  
</body>  
</html>

在这个示例中,定义了一个名为loadContent的JavaScript函数。当点击按钮时,这个函数会被调用。

  • 首先,我们创建一个新的XMLHttpRequest对象。
  • 然后,我们定义了一个回调函数onreadystatechange,这个函数会在请求的状态改变时被调用。当请求完成(readyState === 4)并且服务器返回状态码为200(成功)时,我们更新页面上id为content的<div>元素的内容。
  • 接着,我们使用open方法设置请求的方法和URL。在这个例子中,我们使用GET方法请求example.txt文件。
  • 最后,我们使用send方法发送请求。
  • 请注意,这个例子假设服务器上的example.txt文件是可访问的,并且与你的HTML文件在同一个域名下。如果文件位于其他位置,你需要修改xhr.open方法中的URL来指向正确的位置。

此外,现代Web开发中,可能会更倾向于使用更高级的库(如jQuery的$.ajax方法)或现代的Fetch API来执行Ajax请求,因为它们提供了更简洁、更强大的功能,并且能更好地处理错误和跨域请求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android DB锁问题

并发访问事务 在Android中使用SQLite数据库时&#xff0c;如果多个线程尝试同时对同一个数据库开启事务&#xff0c;可能会遇到几个问题&#xff1a; 锁定异常 (android.database.sqlite.SQLiteDatabaseLockedException): 如果一个线程已经在数据库上持有一个写事务&#xff0…

LangChain LangServe 学习笔记

LangChain LangServe 学习笔记 0. 引言1. LangServe 概述2. 特性3. 限制4. 安装5. 示例应用程序6. OpenAPI文档7. Python SDK 客户端8. Playground9. 聊天可运行页面 0. 引言 使用 LangServe 可以立即将您的LLM应用程序变成 API 服务器。 LangServe 使用 FastAPI 构建&#x…

three.js(1):three.js简介

1 什么是three.js three.js&#xff0c;一个WebGL引擎&#xff0c;基于JavaScript&#xff0c;可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。 2 下载地址 three.js下载地址:https://github.com/mrdoob/three.js 3 目录介绍 下载…

【题目】【信息安全管理与评估】2022年国赛高职组“信息安全管理与评估”赛项样题5

【题目】【信息安全管理与评估】2022年国赛高职组“信息安全管理与评估”赛项样题5 第一阶段竞赛项目试题 本文件为信息安全管理与评估项目竞赛-第一阶段试题&#xff0c;第一阶段内容包括&#xff1a;网络平台搭建与设备安全防护。 本次比赛时间为180分钟。 介绍 竞赛阶段…

浅谈函数 fscanf/sscanf 和 fprintf/sprintf

目录 一&#xff0c;fprintf 的介绍和使用1. 函数介绍2. 函数使用 二&#xff0c;fscanf 的介绍和使用1. 函数介绍2. 函数使用 三&#xff0c;sprintf 的介绍和使用1. 函数介绍2. 函数使用 四&#xff0c;sscanf 的介绍和使用1&#xff0c;函数介绍2&#xff0c;函数使用 五&am…

SSL Pinning之双向认证

双向认证处理流程 概述获取证书逆向app 获取证书的KeyStore的 key通过jadx 反编译 app 获取证书&#xff1a;frida hook 证书转换命令行转换portecle 工具使用 charles 配置 p12 格式证书 概述 本篇只介绍怎么解决ssl pinning&#xff0c; 不讲ssl/tls 原理。 为了解决ssl pinn…

BCrypt实现信息加密

1.BCrypt的概述 bcrypt 是一种密码哈希函数&#xff0c;通常用于加密密码。它采用了 Blowfish 加密算法的变种&#xff0c;并结合了盐&#xff08;salt&#xff09;和密钥延时&#xff08;key stretching&#xff09;等技术&#xff0c;以增加密码破解的难度。 2.BCrypt的使用…

RT-Thread 多级目录 scons 构建

前言 RT-Thread 默认使用 scons 进行工程的构建&#xff0c;虽然 RT-Thread BSP 中的 hello world 例程比较简单&#xff0c;实际项目开发&#xff0c;可能源码的工程会由多级目录&#xff0c;如何让多级的目录参与构建&#xff1f; scons 构建时&#xff0c;除了依赖工程的根…

基于R语言实现的beta二项回归模型【理解与实现】

本实验&#xff0c;创建一组使用二项分布模拟的数据&#xff08;不带额外的随机性&#xff09;&#xff0c;和另一组使用Beta二项分布模拟的数据&#xff08;引入了随机成功概率 p&#xff0c;从而增加了数据的离散性。 现在假设我们站在上帝视角&#xff0c;有两组不知道分布…

【C语言】结构体structure

【C语言】结构体structure&#xff1a; C语言可以自定义数据类型。结构体是其中一个自定义的数据类型。结构体类型是复杂的数据类型&#xff0c;将多个不同数据按一定功能进行整体封装&#xff0c;用一个名称来给结构体命名。可用typedef为结构体提供别名。关键字struct。结构…

Android中协程的理解

Android中的协程是一种轻量级的并发编程结构&#xff0c;它允许在子线程中挂起和恢复运行。协程的主要目标是提高多线程编程的效率和可读性&#xff0c;特别是在需要频繁切换任务或操作的数据驱动的场景中。 理解协程需要理解其核心概念&#xff1a;任务、线程和状态。 任务&…

Qt 中默认代码

目录 主函数 widget的声明 widget的定义 form file .pro 文件 主函数 #include "widget.h" ​ #include <QApplication> ​ int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 上面就是 Qt 刚创建的一…

机器学习-随机森林温度预测模型优化

文章目录 前言旧模型训练新模型训练参数查看组合参数训练学习模型评估 前言 在机器学习-随机森林算法预测温度一文中&#xff0c;通过增大模型训练数据集和训练特征的方式去优化模型的性能&#xff0c;本文将记录第三方种优化方式&#xff0c;通过调整随机森林创建模型参数的方…

【高阶数据结构】哈希表 {哈希函数和哈希冲突;哈希冲突的解决方案:闭散列,开散列;红黑树结构 VS 哈希结构}

一、哈希表的概念 顺序结构以及平衡树 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系。因此在查找一个元素时&#xff0c;必须要经过关键码的多次比较。顺序查找时间复杂度为O(N)&#xff1b;平衡树中为树的高度&#xff0c;即O(log_2 N)&#xf…

区间比较指令

1&#xff0c;比较值和和区间值比较 2&#xff0c;指令 ZCP K2 K5 C0 Y000 3&#xff0c;当比较值小于 区间返回 软元件灯亮 当比较直在区间内软元件1 接通 > 第一个 < 第二个 大于第二个值 软元件2接通 如果区间中第二个值大于第一个值那个只比较第一个值 直接比较 参数…

【HTML】制作一个简单的实时字体时钟

目录 前言 HTML部分 CSS部分 JS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段HTML代码&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建一个文本文档&#xff0c;两个文件夹&#xff0c;其中HTML的文件名改为[index.html]&am…

CSS3进阶技巧:Flexbox布局实战与高级应用

Flexbox布局是CSS3中一种强大的布局技术&#xff0c;它可以帮助我们更灵活地布局网页元素&#xff0c;解决传统布局方式中的一些问题。在本文中&#xff0c;我将介绍一些Flexbox布局的进阶技巧和高级应用。 Flexbox的基本概念 Flexbox布局是基于弹性盒子模型的&#xff0c;它主…

设计模式:生活中的命令模式

将命令模式类比到日常生活中,可以想象一个餐厅的运作过程。在这个类比中,顾客点菜的过程就像是发出一个命令,而厨师则是执行命令的接收者。 角色类比 顾客(Client):下达命令。他们决定要什么菜,并通知服务员。服务员(Invoker):接收命令,并传递给厨师。服务员不需要…

202209青少年软件编程(scratch图形化) 等级考试试卷(四级)

第1题&#xff1a;【 单选题】 运行下列程序&#xff0c;说法正确的是&#xff1f;&#xff08;&#xff09; A:列表中的数字全部小于11 B:列表的长度为 10 C:变量i最终值为 20 D:列表中有大于 10 的数字 【正确答案】: D 【试题解析】 : 程序运行后&#xff0c;变量i最…

Spark 应用程序优化和调优总结

文章目录 前言调整 Spark 默认配置查看和设置 Spark 配置信息动态扩展集群负载 数据的缓存和持久化DataFrame.cache()DataFrame.persist()何时缓存和持久化何时不缓存和持久化 Spark 中的 JOINs广播连接排序合并连接 总结 前言 本文总结了 Spark 中比较重要和常用的调优手段&a…