什么是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/794835.shtml

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

相关文章

基于SpringBoot Vue汽车租赁系统

一、&#x1f4dd;功能介绍 基于SpringBoot Vue汽车租赁系统 角色&#xff1a;管理员、普通管理员、用户 管理员&#xff1a;管理员进入主页面&#xff0c;主要功能包括对系统首页、个人中心、用户管理、普通管理员管理、汽车类别管理、汽车信息管理、租车订单管理、取消订单管…

c#让不同的工厂生产不同的“鸭肉”

任务目标 实现对周黑鸭工厂的产品生产统一管理&#xff0c;主要产品包括鸭脖和鸭翅。武汉工厂能生生产鸭脖和鸭翅&#xff0c;南京工厂只能生产鸭翅&#xff0c;长沙工厂只能生产鸭脖。 分析任务 我们需要有武汉工厂、南京工厂、长沙工厂的类&#xff0c;类中需要实现生产鸭…

网络安全 | 什么是威胁情报?

关注WX&#xff1a;CodingTechWork 威胁情报 威胁情报-介绍 威胁情报也称为“网络威胁情报”(CTI)&#xff0c;是详细描述针对组织的网络安全威胁的数据。威胁情报可帮助安全团队更加积极主动地采取由数据驱动的有效措施&#xff0c;在网络攻击发生之前就将其消弭于无形。威…

09 flink-sql 中基于 mysql-cdc 的 select * from test_user 的具体实现

前言 这也是最近帮一个朋友看问题 遇到的一个问题 然后 引发了一下 对于 flink-sql 里面的一些 常规处理的思考, 理解 原始问题主要是 在测试库可以使用 flink-sql 可以正常同步, 但是 在生产环境 无法正常同步数据 这个问题 我们后面单独 记录一篇文章 测试用例 下载…

ChatGPT写作指南:制作精彩学术论文的关键

ChatGPT无限次数:点击直达 ChatGPT写作指南&#xff1a;制作精彩学术论文的关键 作为CSDN网站上拥有10年经验的专业原创文章优质创作者&#xff0c;我想分享一些关于如何利用ChatGPT制作精彩学术论文的关键要点。在本文中&#xff0c;我将介绍一些写作技巧和指南&#xff0c;以…

网络抓包专题

导航目录 HTTP 原理HTTPS 原理TLS 原理网络抓包原理一. 什么是抓包&#xff1f;二. 抓包的原理对HTTP请求进行抓包对HTTPS请求进行抓包 三. Android设备抓包问题Android6.0 及以下系统Android7.0 及以上系统方式一&#xff1a;方式二 HTTP 原理 HTTP 详解 点击跳转 HTTPS 原理…

【QT入门】 Qt代码创建布局综合运用:仿写腾讯会议登陆界面

往期回顾&#xff1a; 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解-CSDN博客 【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客 【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客 【QT入门】 Qt代码创建布局综合运用&#xff1a;仿写腾讯会议登陆界面 一、界面分…

Linux基础篇:文件系统介绍——根目录下文件夹含义与作用介绍

Linux文件系统介绍——文件夹含义与作用 Linux文件系统是一个组织和管理文件的层次结构。它包括了目录、子目录和文件&#xff0c;这些都是按照一定的规则和标准进行组织的。以下是Linux文件系统的一些关键组成部分&#xff1a; 1./bin&#xff1a; 该目录包含了系统启动和运…

数据结构中的堆

优先队列是队列数据结构实现&#xff0c;其中根据优先级处理对象&#xff0c;在优先队列中&#xff0c;添加的对象根据其优先级&#xff0c;默认情况下&#xff0c;优先级由对象的自然顺序决定的。队列构建时提供的比较器可以覆盖默认优先级。 优先队列就是一个堆&#xff0c;…

代码示例:OpenSSL AES CBC 加密

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 这是一个基于OpenSSL的AES-CBC…

Rust线程间通信通讯channel的理解和使用

Channel允许在Rust中创建一个消息传递渠道&#xff0c;它返回一个元组结构体&#xff0c;其中包含发送和接收端。发送端用于向通道发送数据&#xff0c;而接收端则用于从通道接收数据。不能使用可变变量的方式&#xff0c;线程外面修改了可变变量的值&#xff0c;线程里面是拿不…

C++设计模式:策略模式(二)

1、定义与动机 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换&#xff08;变化&#xff09;&#xff0c;该模式使得算法可独立于使用它的客户程序&#xff08;稳定&#xff09;而变化&#xff08;扩展&#xff0c;子类化&#xff09; 在软…

Hadoop-MapReduce

一、MapReduce 概述 1.1 MapReduce 定义 MapReduce 是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于 Hadoop 的数据分析应用”的核心框架。 MapReduce 核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在…

Linux:Centos9:配置固定ip

centos9的网卡位置移动到了 /etc/NetworkManager/system-connections/ 下面 查看网卡 ifconfig 当前有两块网卡&#xff0c;我要去配置ens160的一个固定的ip&#xff0c;让其ip为192.168.6.20/24&#xff0c;网关为192.168.6.254.dns为&#xff1a;1.1.1.1 vim /etc/Netwo…

CSS-概述

&#x1f4da;详见 W3scholl&#xff0c;本篇只做快速思维索引。 概述 CSS 是一种描述 HTML 文档样式的语言。 有三种插入样式表的方法&#xff1a; 外部 CSS内部 CSS行内 CSS &#x1f4c5; 外部 CSS 外部样式表存储在.css文件中。HTML 页面必须在 head 部分的<link&g…

Java 中的 List 集合

文章目录 添加元素获取元素检查元素删除元素修改元素获取列表大小检查列表是否为空清空列表查找元素索引获取列表的子列表 List 是 Java 集合框架中的一个接口&#xff0c;它表示一个有序的集合&#xff08;序列&#xff09;&#xff0c;允许存储重复的元素。List 接口提供了许…

基于JavaWeb实现的漫画网站前后台系统

一、项目简介 本项目是一套基于JavaWeb实现的漫画网站前后台系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#x…

云服务器ECS租用价格表报价——阿里云

阿里云服务器租用价格表2024年最新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核…

SRS 实时视频服务器搭建及使用

一、SRS 介绍 SRS是一个开源的&#xff08;MIT协议&#xff09;简单高效的实时视频服务器&#xff0c;支持RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等协议。 SRS媒体服务器和FFmpeg、OBS、VLC、 WebRTC等客户端配合使用&#xff0c;提供流的接收和分发的能力&am…

DNS和HTTP

DNS应用层协议 域名解析系统 使用IP地址&#xff0c;来描述设备在网络上的位置 IP地址并不适合来进行传播网站&#xff0c;就采用了域名的方式来解决网站传播的问题。如www.baidu.com这样类似的就很容易让人记住。其域名就直接代表了这个网站。而且有一套自动的系统会将域名解…