百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端 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 的工作原理

其工作原理基本经过以下几个步骤:

  1. 客户端发送请求,请求交给 xhr。
  2. xhr 把请求提交给服务。
  3. 服务器进行业务处理。
  4. 服务器响应数据交给 xhr 对象。
  5. xhr 对象接收数据,由 JavaScript 把数据写到页面上。

AJAX 的创建步骤

根据 AJAX 的工作原理,它的创建步骤主要包括:

  1. 创建 XMLHttpRequest 对象,即创建一个异步调用对象。
  2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
  3. 设置响应 HTTP 请求状态变化的函数。
  4. 发送 HTTP 请求。
  5. 获取异步调用返回的数据。
  6. 使用 JavaScript 和 DOM 实现局部刷新。

AJAX 的具体使用

以下是 使用 AJAX 的完整流程。

1. 创建 XMLHttpRequest 对象

Bash
const request = new XMLHttpRequest();

2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下:

Bash
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>

~

~

~ 本文完

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

相关推荐

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&gt;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)的开发人员都知道,创建可重用组件是很困难的,而且大多数情况下,最终会通过传入大量的属性,以便从外部更容易地控制和自定义组件。这并不坏,但是传递大量属性...