前端 JS 之 AJAX 简介及使用
zhezhongyun 2024-12-11 18:18 38 浏览
概述
AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求。
AJAX 不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:
- HTML 或 XHTML
- CSS
- JavaScript
- DOM
- XML
- XSLT
- XMLHttpRequest
尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势,比如更加轻量以及作为 Javascript 的一部分,目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。
AJAX 的优势
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面。
AJAX 通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
AJAX 的工作原理
其工作原理基本经过以下几个步骤:
- 客户端发送请求,请求交给 xhr。
- xhr 把请求提交给服务。
- 服务器进行业务处理。
- 服务器响应数据交给 xhr 对象。
- xhr 对象接收数据,由 JavaScript 把数据写到页面上。
AJAX 的创建步骤
根据 AJAX 的工作原理,它的创建步骤主要包括:
- 创建 XMLHttpRequest 对象,即创建一个异步调用对象。
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
- 设置响应 HTTP 请求状态变化的函数。
- 发送 HTTP 请求。
- 获取异步调用返回的数据。
- 使用 JavaScript 和 DOM 实现局部刷新。
AJAX 的具体使用
以下是 使用 AJAX 的完整流程。
1. 创建 XMLHttpRequest 对象
const request = new XMLHttpRequest();
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下:
request.open(method, url, async, user, password);
参数解析:
- method 要使用的HTTP方法,比如 "GET"、"POST"、"PUT"、"DELETE" 等。
- url 表示要向其发送请求的 URL 地址。
- async (可选) 一个可选的布尔参数,表示是否异步执行操作,默认为 true。如果值为 false,send() 方法直到收到答复前不会返回。如果 true,已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true,否则将引发异常。
- user (可选 用于认证用途的用户名,默认值为 null。
- password (可选) 用于认证用途的密码,默认值为 null。
3. 设置响应 HTTP 请求状态变化的函数和服务端返回信息函数
创建完 HTTP 请求之后,应该就可以将 HTTP 请求发送给 Web 服务器了。然而,发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始,到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态:
- 未初始化状态。在创建完 XMLHttpRequest 对象时,该对象处于未初始化状态,此时 XMLHttpRequest 对象的 readyState 属性值为 0。
- 初始化状态。在创建完 XMLHttpRequest 对象后使用 open() 方法创建了 HTTP 请求时,该对象处于初始化状态。此时 XMLHttpRequest 对象的readyState属性值为 1。
- 发送数据状态。在初始化 XMLHttpRequest 对象后,使用 send() 方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest 对象的 readyState 属性值为 2。
- 接收数据状态。Web 服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest 对象处于接收数据状态,XMLHttpRequest 对象的 readyState 属性值为 3。
- 完成状态。XMLHttpRequest 对象接收数据完毕后,进入完成状态,此时 XMLHttpRequest 对象的 readyState 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用 responseText 属性或 responseXml 属性来获取数据。
总的来说,readyState 属性的值有以下几种:
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前,status 的值为 0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为0:
- UNSENT(未发送) 0
- OPENED(已打开) 0
- LOADING(载入中) 200
- DONE(完成) 200
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0
xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1
xhr.onprogress = function () {
console.log('LOADING', xhr.readyState); // readyState 为 3
};
xhr.onload = function () {
console.log('DONE', xhr.readyState); // readyState 为 4
};
xhr.send(null);
只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态:
const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// do something here
}
}
4. 发送HTTP请求
XMLHttpRequest.send(data);
结束
最后,附上一个简单的完整 AJAX 实例:
<button id="ajaxButton" type="button">Make a request</button>
<script>
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
~
~
~ 本文完
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!
- 上一篇:一文看懂Ajax,学习前端开发的同学不可错过
- 下一篇:Thymeleaf详细介绍
相关推荐
- Flutter TextField 边框样式以及提示文本
-
题记——执剑天涯,从你的点滴积累开始,所及之处,必精益求精。1引言1.1情景一一个文本框默认情况下可编辑(允许输入文本的情况)获取焦点(正在输入文本)下,会有默认的一个下划线,这个下划线的颜...
- 让最懂产品的人成为销售员 亿家净水试水“微分销”
-
国内领先的净水设备服务供应商亿家净水开始试水“微分销”,借助第三方微分销平台——有赞建立的亿家净水微商城近日已经开通。根据规划,下一步将把公司300多名员工以及遍布全国的6000多名安装服务工程师纳入...
- 案例分享丨各品牌软水机和中央净水机的旁通阀介绍、区分辨认和使
-
案例:前几天接到一个浙江的客户反馈,他说凯优的软水机安装后加的盐,使用4、5年了一直没加过盐到现在盐还是那么多,客户以前以为加完盐后能管好长时间就没把软水机当回事,最近听朋友说软水机需要定期加盐客户...
- 一文教你Java字符串处理(String,StringBuffer,StringBuild)
-
前言本文篇幅较长,但都是满满的干货,请大家耐心观看,相信会有不小的收获。本人在总结的过程中也收获了很多的知识,也希望大家可以一起借鉴学习下,希望大家最后都能有所收获!再言字符串的分类在java.lan...
- 浏览器渲染引擎之从入门到优化实践
-
在当今互联网时代,浏览器扮演着人们访问网页和应用程序的主要工具。当我们在浏览网页的时候,页面的展示和交互都是依靠浏览器进行实现的。所以浏览器的表现和性能直接影响着用户的体验。为了提供快速且高效的浏览体...
- NAVI S1mple准星+视角+持枪控制台设置大全 新增显示器设置
-
简单男孩S1mple科斯特利耶夫(AleksandrKostyliev)生日1997年10月2日准星设置cl_crosshairalpha255;cl_crosshaircolor5;cl...
- 2014福布斯全球名人榜:女王碧昂斯登顶 李娜85
-
最近,有一篇名为《浙商炮轰马云:若不改作风,5年内必倒》的文章,在网络和自媒体上流传甚广,引起广泛关注。这篇文章是怎样出炉的?针对这个问题,《浙商》杂志记者进行了调查。2014福布斯全球名人榜前20人...
- 美国处女河中有一条步道,全程只有25公里
-
美国<:articlestyle="BOX-SIZING:border-box;BORDER-BOTTOM:0px;TEXT-ALIGN:left;BORDER-LEFT:0px...
- Unreal丨模块化路牌蓝图制作(路牌模型)
-
本期文章介绍使用虚幻蓝图制作一个模块化的路牌,先来看一下完成后的效果。如图,这些路牌全部是使用同一个蓝图制作的资产。1素材准备基础的路牌模型我使用的是虚幻商城中的资产“FreewayProps”。然...
- 神奇白Tee加减法,1+1>2(equal tee是什么管件)
-
来源:时尚芭莎说到炎炎夏日,除了空调、冰棍、西瓜、网络是缺一不可的以外,衣柜里怎么能少一件白Tee呢?2"style="text-decoration:none;outline:none;c...
- 跟着快联电路学习PCB设计的六个过程
-
PADS是一种常用的PCB设计软件,作为PCB设计工程师,必须掌握熟练应用的设计工具。与AD相比,PADS在开始和设计上相对复杂,需要更多的耐心和时间。在使用PADS设计PCB的过程中,需要关注印刷板...
- Allegro软件中怎么通过ROOM框来放置元器件呢?
-
上述我们讲解了怎么快速的将元器件放置在PCB板上,通过图6-40所示的图可以看出,器件放置的都是很零散的,不是按模块或者是按页放置的,这里给大家介绍一些,通过在原理图添加ROOM属性,然后通过ROOM...
- 电路设计入门-从DXP2004双闪灯电路设计开始
-
DXP2004!?为什么要用这么老的版本呢?因为DXP2004是最经典的版本!protel是最原始的版本,版本包括protelforDOS,protel98,protel99se;后面prte...
- 小幅改进 微软或启用Outlook Mail品牌
-
去年十月微软就对Outlook.com及相关网站进行了改版,改进了下拉菜单,使得用户能够在微软相关的服务,比如OneDrive以及OfficeOnline之间切换。不过现在看来,微软似乎准备再一次对...
- 将多个属性传递给 Vue 组件的几种方式
-
所有使用基于组件的体系结构(如Vue和React)的开发人员都知道,创建可重用组件是很困难的,而且大多数情况下,最终会通过传入大量的属性,以便从外部更容易地控制和自定义组件。这并不坏,但是传递大量属性...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)